Question

我正在创建一个使用三个js的太阳系。我想显示点击任何对象的一些细节。我使用了对象拾取概念。在那里我试图得到与之相交的对象但是我无法得到任何相交的物体。当我试图在相交数组中打印物体时，我得到了＃34;未定义＆＃34;和数组的长度为0。

function mous(event) {
var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
vector = vector.unproject(camera);

raycaster = new THREE.Raycaster(camera.position, vector);

var intersects = raycaster.intersectObjects([orbitDir1,orbitDir2,orbitDir3,orbitDir4,orbitDir5]);
alert(intersects[0]);

alert(intersects.length);

}`

这是orbitDir的代码。

geometry = new THREE.CircleGeometry(2.3, 100);
    geometry.vertices.shift();

circle = new THREE.Line(
    geometry,
    new THREE.LineDashedMaterial({color: 'red'})
);
circle.rotation.x = Math.PI * 0.5   ;
tex = new THREE.ImageUtils.loadTexture("Mercury.jpeg") ;
planet = new THREE.Mesh(
    new THREE.SphereBufferGeometry(0.3, 32, 32),
    new THREE.MeshPhongMaterial({ map : tex})
);
planet.position.set(2.3, 0, 0);
scene.add(planet);

orbit = new THREE.Group();
orbit.add(circle);
orbit.add(planet);

orbitDir = new THREE.Group();
orbitDir.add(orbit);
//orbitDir.position.x += 0.1 ;
orbitDir.position.y += 4 ;
orbitDir.position.z += 5 ;
orbitDir.rotation.x +=2.3 ;
scene.add(orbitDir);

Answer 1

“unprojection”和光线投射的代码看起来很好，所以我猜x和y值可能不对。您使用的clientX和clientY是相对于窗口左上角的鼠标坐标。这些仅在<canvas>为完整页面时有效。如果不是这种情况，请确保使用相对于<canvas>左上角的鼠标坐标。

我认为你可以做那样的光线投射：

raycaster.intersectObjects(scene, true) //scan the whole scene recursive

docs

您正在寻找的答案可能是here

projector.unprojectVector( vector, camera.position );

使用三个js动画的太阳系

1 个答案: