Threejs Geometry Edges
body {
//background: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>
var scene = new THREE.Scene();
//add a camera
// THREE.PerspectiveCamera(fov, aspect, near, far)
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
//add camrera position z at 100
camera.position.z = 100;
//add renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = true;
document.body.appendChild( renderer.domElement );
//Add shape
//Icosahedron
var geometry = new THREE.IcosahedronGeometry(20, 0);
//hex color
var color = new THREE.Color("#ffffff");
//Cube
//var geometry = new THREE.BoxGeometry(20, 20, 20)
//Add material
var material = new THREE.MeshBasicMaterial( { color: color.getHex() } );
var cube = new THREE.Mesh( geometry, material );
var edges = new THREE.EdgesHelper( cube, 0x000000 );
edges.matrixAutoUpdate = true;
edges.material.linewidth = 2;
//add cube
scene.add(cube);
//add edges
scene.add( edges );
//Add light
var light = new THREE.PointLight( 0xFFFF00 );
light.position.set( 10, 0, 25 );
scene.add( light );
//Render
var render = function () {
requestAnimationFrame( render );
edges.rotation.x += 0.01;
edges.rotation.y += 0.01;
camera.updateProjectionMatrix();
renderer.render(scene, camera);
};
render();
Work in progress - learning from http://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene