3D graphic using THREE.js

Question

3D graphic using THREE.js

Navigation

#1 by (3 votes)

1

Good friends, I need to know how to make a 3D graphic (some type of structure or box) that inside draw a line according to values that will be passed to them. Attached picture of what I want to do.

I tried to create a cube without texture, where only the lines that denote it are seen, transparent to begin with, but I have a problem with the textures, in the online editor but it does not let me see how the edition code would like.

What I try to implement:

Link (s):
EDITOR ONLINE: threejs.org/editor/
OFFICIAL PAGE: threejs.org /

javascript 3d

asked by Jose Emanuel Rojas Rivas 15.11.2016 в 21:57

source

1 answer

Use driver without $ scope Does not complete the foreach cycle

score 3 · Accepted Answer

First of all: What version of Three.js are you using?

This question is because in the version lower than 81 you can use the EdgeHelper object to make the edges and to remove the mesh that you have on the faces of the cube in the MeshBasicMaterial you have to pass it the value wireframe: False :

shape3D_material = new THREE.MeshBasicMaterial({
    color:0x9E0000,
    wireframe: false,
    transparent: true,
    opacity: this.shapes_settings.opacity
});

After this we will add the EdgesHelper object:

shape3D                             =   new THREE.Mesh(shape3D_geometry,    shape3D_material);

this.scene.add(shape3D);

//  Generamos las aristas
edges                               =   new THREE.EdgesHelper(shape3D, 0x808080);
edges.material.linewidth            =   3;

this.scene.add(edges);

Note : I told you about the version because this EdgeHelper object was removed in version 81.

In the version 81 onwards , if not bad memory you could use:

WireframeGeometry

You can check the official documentation and you can check this example :