3

Please have a look this demo with both WebGL enable and disabled.

As you switch between WebGL and canvas render (it's done automatically as the javascript detect if you have WebGL or not) the wireframe-only sphere (the first one on the left) change.

As WebGL is enabled you can see also the wireframe on the back of the sphere (the part which is hidden on the other spheres as they have a non-transparent material).

As WebGL is disabled you can't appreciate the transparency anymore.

I'm preparing a demo and I'd like to offer support to those browser not supporting WebGL: it is crucial to have transparency as my idea is entirely based on it. My presentation only have a 6-face cube, I guess even old CPU's should have no trouble presenting it in transparent wireframe.

Does three.js support this? Is there any way I can do it? How should I set the material so that it works even with canvas render?

To further prove my point, here's a second demo. Same issue as you switch between WebGL and canvas.

Current wireframe material is declared this way:

new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: true } );

but behave as expected only in WebGL.

Jsfiddle here

Thanks for reading!

p.s. I'm willing to adopt any alternative to Three.js if this can't do what I need. I MUST prepare this demo but I don't have the math/geometry knowledge to do this by myself even if it is as simple as rotating a 3d cube.

With webgl:

enter image description here enter image description here

with canvas render:

enter image description here enter image description here

Improve this question
7
  • Can you show a live example (jsfiddle.net) of your code and ask a specific question? Are you only conderned about wireframe models? Commented Apr 3, 2013 at 17:23
  • Thanks for posting. There are two examples linked in the question and the code to generate the wireframe material is the one posted. What do you mean by wireframe "models"? I need to render just the wireframe of the mesh (the edges), not the faces if that's what you mean. Point is some edges are missing with canvas render, while with webgl you see them all. Just try the demos with Safari and Chrome and you'll see the difference. Commented Apr 3, 2013 at 17:35
  • I see the difference. I was asking you to ask a specific question about YOUR code, and the best way to do that is to provide a live example of YOUR code. Commented Apr 3, 2013 at 17:45
  • To me it would be helpful if you could post screenshot to illustrate what you mean. I'm not sure what you're trying to achieve. Commented Apr 3, 2013 at 18:11
  • Please assume my code is the one posted in the examples. If you need to isolate the part which causes the problem just look at the code I've posted: that's where you decide if the wireframe will be transparent or not. Commented Apr 4, 2013 at 22:33

1 Answer 1

Reset to default
10

Note: This question is about CanvasRenderer, which has been removed from the three.js library.

The trick that works in your case, when using CanvasRenderer, is to create two identical cubes in the same location -- the second one is flip-sided. For convenience, you can add them both to a parent object, but it is not necessary.

var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: false, opacity: 1 } ); 
            
var wireframeMaterial2 = new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: false, opacity: 1, side: THREE.BackSide } ); 
                        
var cube = new THREE.Mesh( geometry, wireframeMaterial );
            parent.add( cube );
            
var cube2 = new THREE.Mesh( geometry, wireframeMaterial2 );
            parent.add( cube2 );

three.js r.70

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

now that's some counter intuitive but BRILLIANT stuff! Thank you very much for your help :)
totally unrelated to the question: how did you found this solution? Did you just studied the whole three.js documentation and learned about THREE.BackSide? Three.js it's huge, how one can possibly know all the tips and trick like the one posted above?
By answering hundreds of questions like this one. :-)
upvote! also unrelated, I have kind of the same problem, but with a .obj loaded into the canvasrenderer. Lots of clipping and 3d glitches. Great solution but only apply for simple shapes, such as cubes ?
@MarcelFalliere You will just have to experiment. Please make a new post if you are having problems.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.