使用三个js动画的太阳能系统

我正在用三个js创建一个太阳能系统。在这个例子中，我想展示一些关于点击任何对象的细节。我已经使用了对象拾取的概念。在那我试图获得与交叉点的对象。但我无法获得任何相交的对象。当我尝试打印交叉点数组中的对象时，我得到“未定义”和相交数组的长度为0.使用三个js动画的太阳能系统

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);

来源

2017-02-28 Naren

你可以提供一个小提琴或codepen？ – prisoner849

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

我认为你能做的光线投射这样的：

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

docs

也许你正在寻找的答案是here

projector.unprojectVector(vector, camera.position);

来源

2017-02-28 11:08:16 philipp

使用三个js动画的太阳能系统

回答

相关问题