Three.js定制几何raycaster捕获错误的对象

Question

I need to use my own gemetry since the default cube does not look like it should in wireframe mode (now it is made of triangles instead of squares).

So I made my own geometry and it looks ok, but the raycaster does not work as good with my own objects as it does with the built-in cubes.

var cube = new THREE.Line( getCube( 5,5, 5), new THREE.LineDashedMaterial( { color: 0x000000,dashSize: 1, gapSize: 0.1, linewidth: 2 } ),THREE.LinePieces );

where getCube() returns

var geometry = new THREE.Geometry()

See example: http://jsfiddle.net/QHjSM/12/

6 colour filled box on the top are the defalt THREE.CubeGeometry boxes, and selecting them with raycaster works perfect, 6 wireframe are my custom geometry.

Issues: If you try to click outside the box, but pretty close to it it will catch the box, and if you click inside the box (in the middle of it) it will not catch it neither.

But the most annoying thing is that if you click inside one box, but close to another one sometimes it catches not the wrong one.

I'm not sure can it be done better, tried all the geometry.compute... methods, but still no effect.

Answer 1

Good day, your custom cubes are not in fact cubes. They are just a stack of lines with no cooresponding faces. Your selection is not returning as expected due to the fact that your "cubes" indeed have gapping holes right threw them. What you can do is in your getCube function after you've built the vertices you can then build all your faces in a similar way.

Have a look at this example: Issue with custom geometry and face normal

Generally you'll need to carefully pattern out every 3 set of vertices so that when you build the faces there in a clock-wise direction so that the normals will be computerd correctly. Here's a basic example of adding a face.

geometry.faces.push(new THREE.Face3(1,2,3));

BUT! Note that this will result in the same aforementioned diagonal lines through your wireframe. So, for your use case why not simply use both the basic cube mesh with picking and remove the wireframe then overlay the line drawn boxes as your custom wireframe. Best of both worlds.

FYI, you probably already know but Face4 is gone, so you'll need to use Face3 and some sort of custom wireframe to do this anyway.

Edit: I did a little test to your fiddle, noticed something strange. Using the CanvasRender, even with the wireframe off the default cube you still see the diagonal lines! I try WebGLRenderer and it's fine. I'll have to look into that one further.

CanvasRenderer http://jsfiddle.net/QHjSM/13/

WebGLRenderer http://jsfiddle.net/QHjSM/14/

Me again, hmm it appears those ghosted face lines are visible in all the CanvasRenderer examples that use a MeshBasicMaterial on the Three.js site. The only thing I was able to do was simply reduce the opacity of the cube mesh material to 0.1 to lessen the effect. I suppose the only other method is to switch to the WebGLRenderer but I look forward to being wrong on this :) Here's the last test

http://jsfiddle.net/QHjSM/16/