Question

I am trying to visualize a space time cube as seen here http://www.intechopen.com/source/html/38305/media/image7.jpeg with the help of the webgl javascript framework three.js. The problem is to have that cube with a material only displaying the outlines. I created 6 planes for the walls of the cube (I could not use a cube as a geometry because then it was impossible to place something inside and let it be rendered). The closest I got was to set wireframe to true. But of course it does not only render the outlines but also every other line of every polygon. Unfortunately the three.js "API" is not very helpful at all.

Was it helpful?

Solution

Taken from "How to draw a line" - ThreeJS wiki

Assuming you have your scene, renderer and camera set up, you can do this.

var material = new THREE.LineBasicMaterial({
    color: 0x0000ff
});

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
// Everything from this point, would represent a line
geometry.vertices.push(new THREE.Vector3(0, 10, 0));
geometry.vertices.push(new THREE.Vector3(10, 0, 0));

var line = new THREE.Line(geometry, material);  scene.add(line);

// on update
renderer.render(scene, camera);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top