Displaying objects in wire-frame with hidden lines removed, etc.

[dipaksa]

Hello,

I'm in the process of evaluating three.js as a component in a commercial product we are building. One of the featuers of our product is the ability to display 3D ( and 2D) drawings that are sourced from AutoCAD and other commonly used packages. Within the browser, we want the user to be able to rotate/zoom the drawing and pick objects or locations on the drawing for inputing data. We also want to be able to display various data on top of the drawing.

1) What do I need to do to display a wire-frame version of my objects with hidden lines removed? For example, what do I change in canvas_geometry_cube.html

2) Assume the user clicks on a one object in the drawing, say a valve. We want to change the color of that object to something different. Does this require the entire scene to be rendered or can just the portion that was changed be rendered? I don't understand how to do this in three.js.

3) Click and drag - is there an example that show the ability to click and drag and object through a scene in an efficien way?

Thanks.

[mrdoob]

1) http://mrdoob.github.com/three.js/examples/webgl_materials.html 2) http://mrdoob.github.com/three.js/examples/webgl_interactive_cubes.html 3) http://mrdoob.github.com/three.js/examples/webgl_interactive_draggablecubes.html

[alteredq]

1) What do I need to do to display a wire-frame version of my objects with hidden lines removed? For example, what do I change in canvas_geometry_cube.html

Normally you can't do this, but you can use a trick to give similar appearance - use two materials, first unlit MeshBasicMaterial using background color and then wireframe material.

This example does something similar:

http://mrdoob.github.com/three.js/examples/webgl_geometry_colors.html

Just you would use solid white colored material instead of vertex colors:

var materials = [ 
  new THREE.MeshBasicMaterial( { color: 0xffffff, shading: THREE.FlatShading } ),
  new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true } ) 
];

var mesh = new THREE.Mesh( geometry, materials );

2) Assume the user clicks on a one object in the drawing, say a valve. We want to change the color of that object to something different. Does this require the entire scene to be rendered or can just the portion that was changed be rendered? I don't understand how to do this in three.js.

You could do this either by changing material of the selected object (e.g. if more objects share the same material):

var regularMaterial = new THREE.MeshBasicMaterial( { color: 0x000000 } );
var selectedMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );

// on selection
myObject.materials[ 0 ] =  selectedMaterial;

// on deselection
myObject.materials[ 0 ] =  regularMaterial;

or by changing the color of existing material of selected object (e.g. if each object has a separate material)

var regularColor = 0x000000;
var selectedColor = 0xff0000;

// on selection
myObject.materials[ 0 ].color.setHex( selectedColor );

// on deselection
myObject.materials[ 0 ].color.setHex( regularColor );

3) Click and drag - is there an example that show the ability to click and drag and object through a scene in an efficien way?

http://mrdoob.github.com/three.js/examples/webgl_interactive_draggablecubes.html

https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_draggablecubes.html

[dipaksa]

Mr. doob,

Thanks for the quick response.

How about for Canvas Rendering? We want to target IE9 as part of the client platforms our application will run on.

-----Original Message----- From: Mr.doob [mailto:reply@reply.github.com] Sent: Wednesday, September 14, 2011 3:00 PM To: Dipak Patel Subject: Re: [three.js] Displaying objects in wire-frame with hidden lines removed, etc. (#538)

1) http://mrdoob.github.com/three.js/examples/webgl_materials.html 2) http://mrdoob.github.com/three.js/examples/webgl_interactive_cubes.html 3) http://mrdoob.github.com/three.js/examples/webgl_interactive_draggablecubes.html

Reply to this email directly or view it on GitHub: https://github.com/mrdoob/three.js/issues/538#issuecomment-2098639

[mrdoob]

How complex are the objects? CanvasRenderer can't handle objects with too much detail.

[dipaksa]

I have converted my AutoCAD drawing into a Coallada format (DAE). This was done by Open Design Alliance folks. Please take a look at the file at: http://www.box.net/shared/ij38bes0r1k3g891onc2.

My goal is to demonstrate that in a Browser we can get output that looks like http://www.box.net/shared/hkie6qicn5l5ikqj193u. If this cannot be achieved, then for now we would be happy with something like http://www.box.net/shared/pgin5m48amjvr2tnykb9.

Actual drawings may be 5x the complexity of this but not more. We are going to be dealing with piping and boiler equipment.

The process we envision is:

1) AutoCAD 3D file is converted to Coallada XML file - we have a tool chain in place for this

2) The XML file is processed to take care of any issues in getting it accepted by something like Three.js importer

3) Three.js is used to import the DAE file and render the drawing with the ability to select the individual objects that made up the initial drawing.

Since we want the widest usability of this product from platform standpoint, restricting it to just WebGL is going to limit us. From what I have read, I'm guessing that Apple and Android tablets will come with WegGL enabled browsers. However, not sure what Microsoft will support out-of-the box. Our customers are huge Power Utility companies that tightly control what goes on their desktops.

I would appreciate any help in demonstrating the above model with Three.js in both Canvas and WebGL forms.

Also, can you tell me what other companies are using Three.js in commercial products?

[mrdoob]

I don't think CanvasRenderer is what you need. I'm afraid you'll need WebGL for what you're after. If you won't want to depend on Microsoft, then maybe you should consider Flash 11, Unity3D or Java instead.