Three.js 使用三个js动画的太阳系
我用三个js创建了一个太阳系。我想在点击任何物体时显示一些细节。我使用了物体拾取的概念。我试图得到与物体相交的物体 单击。但我无法获取任何相交的对象。当我尝试打印相交数组中的对象时,我得到的结果是“未定义”,而相交数组的长度为0Three.js 使用三个js动画的太阳系,three.js,Three.js,我用三个js创建了一个太阳系。我想在点击任何物体时显示一些细节。我使用了物体拾取的概念。我试图得到与物体相交的物体 单击。但我无法获取任何相交的对象。当我尝试打印相交数组中的对象时,我得到的结果是“未定义”,而相交数组的长度为0 function mous(event) { var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHei
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);
“unprojection”和光线投射的代码看起来不错,所以我猜
x
和y
值可能不正确。您正在使用clientX
和clientY
,这是相对于窗口左上角的鼠标坐标。只有当您的
是整页时,这些才有效。如果不是这样,请确保使用鼠标坐标相对于
的左上边缘
我想你可以这样做光线投射:
raycaster.intersectObjects(scene, true) //scan the whole scene recursive
也许你想要的答案是
你能提供提琴或密码笔吗?
projector.unprojectVector( vector, camera.position );