Outline + Edging
Mix of methods
HTML
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
var renderer, scene, camera, controls;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 20, 20, 20 );
// controls
controls = new THREE.OrbitControls( camera );
var light = new THREE.HemisphereLight( 0xeeeeee, 0x888888, 1 );
light.position.set( 0, 20, 0 );
//scene.add( light );
// axes
scene.add( new THREE.AxisHelper( 20 ) );
// geometry
//var geometry = new THREE.SphereGeometry( 5, 4, 8 );
var geometry = new THREE.BoxGeometry( 15, 12, 8 );
// material
/*
var material = new THREE.MeshPhongMaterial( {
color: 0x000000,
shading: THREE.FlatShading,
polygonOffset: true,
polygonOffsetFactor: 1, // positive value pushes polygon further away
polygonOffsetUnits: 1
} );
*/
// mesh
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// wireframe - old way
/*
var helper = new THREE.EdgesHelper( mesh, 0xffffff );
//var helper = new THREE.WireframeHelper( mesh, 0xffffff ); // alternate
helper.material.linewidth = 2;
scene.add( helper );
*/
// wireframe - new way
var geo = new THREE.EdgesGeometry( mesh.geometry ); // or WireframeGeometry
var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
var wireframe = new THREE.LineSegments( geo, mat );
mesh.add( wireframe );
//... Lee Stemkoski Sphere
var material = new THREE.MeshNormalMaterial();
var sphereGeometry = new THREE.SphereGeometry(8, 32, 32);
var sphere = new THREE.Mesh( sphereGeometry, material );
sphere.position.set(0, 0, 0);
scene.add( sphere );
var...