3つのjsアニメーションを使用するソーラーシステム

Question

3つのjs.Inを使用してソーラーシステムを作成しています。オブジェクトをクリックすると詳細が表示されます。オブジェクトピッキングの概念を使用しました。交差しているオブジェクトを取得できません。交差配列のオブジェクトを印刷しようとすると、「未定義」および交差配列の長さが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);