jonathanphz
7/8/2016 - 4:21 PM

Threejs Geometry Edges

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();