レイトキャスティングと交差テストを使用したThree.jsマウスイベント

Question

私は完全なThree.js初心者で、一般的なJavaScriptの新機能です。私はいくつかのマウスイベントの相互作用をテストしようとしています。私は多くのことを試みましたが、何も起こりませんでしたので、次のページからJavascriptをいくつかつかんで、MouseOverイベントではなく「MouseDown」イベントに調整して一般的に単純化しました

https://threejs.org/examples/#webgl_interactive_cubes

しかし、結果のページでは、私は理解していない問題があります - ：なし回転などされています。ページがリフレッシュされるたびに、キューブは自動的に赤色に着色されますが、これは、クリックすると発生するはずです。キューブのサイズを小さくすると、問題が解決されます。

私はconsole.log(INTERSECTIONS)を実行し、リフレッシュ時に値が '5'でしたが、その後にキューブをクリックするたびに値が '1'にな​​ることがわかりました。私は実際にまだ何かをクリックしていないので、リフレッシュ時に値が '0'になると思いますか？これを知って、私は簡単のようなものになるの文「場合」の追加を追加することができます。

if (intersects.length > 4) 
     { 
    INTERSECTED.material.emissive.setHex(0x111111); 
     } 

そして、これはやや問題を解決しますが、この問題は最初の場所で発生し、なぜ私はまだ思ったんだけど？

このコードをさらに単純化すると、今後のマウスクリックイベントタイプのページを作成できるベーステンプレートが得られます。たとえば、キュ​​ーブをクリックして回転させたい場合は、現時点では動作していませんか？次のように

コードは次のとおりです。

<script src="js/three.js"></script> 
<script> 

    var camera, scene, raycaster, renderer; 
    var mouse = new THREE.Vector2(), INTERSECTED; 
    var radius = 100; 
    init(); 
    animate(); 

    function init() { 

    container = document.createElement('div'); 
    document.body.appendChild(container); 

    var info = document.createElement('div'); 
    info.style.position = 'absolute'; 
    info.style.top = '10px'; 
    info.style.width = '100%'; 
    info.style.textAlign = 'center'; 


    camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 10000); 
    scene = new THREE.Scene(); 

    scene.add(new THREE.AmbientLight(0xffffff, 0.2)); 

    var light = new THREE.DirectionalLight(0xffffff, 2); 

    light.position.set(30, 10, 1).normalize(); 
    scene.add(light); 

    var cubeGeometry = new THREE.BoxGeometry(20,20,20); 
    var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x999999, wireframe: false}); 
    var object = new THREE.Mesh(cubeGeometry, cubeMaterial); 

     object.position.x = 0; 
     object.position.y = 0; 
     object.position.z = 0; 

     scene.add(object); 



    raycaster = new THREE.Raycaster(); 
    renderer = new THREE.WebGLRenderer(); 
    renderer.setClearColor(0xf0f0f0); 
    renderer.setPixelRatio(window.devicePixelRatio); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    renderer.sortObjects = false; 
    container.appendChild(renderer.domElement); 


    document.addEventListener('mousedown', onDocumentMouseDown, false); 
    window.addEventListener('resize', onWindowResize, false); 

    } 
    function onWindowResize() { 
    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    } 
    function onDocumentMouseDown(event) { 
    event.preventDefault(); 
    mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
    mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 
    } 

    function animate() { 
    requestAnimationFrame(animate); 
    render(); 
    } 

    camera.position.x = -30; 
    camera.position.y = 30; 
    camera.position.z = 30; 
    camera.lookAt(scene.position); 
    camera.updateMatrixWorld(); 

    function render() 
    { 
    // find intersections 
    raycaster.setFromCamera(mouse, camera); 
    var intersects = raycaster.intersectObjects(scene.children); 
    if (intersects.length > 0) { 
     if (INTERSECTED != intersects[ 0 ].object) { 
     if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex); 
     INTERSECTED = intersects[ 0 ].object; 
     INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex(); 
     INTERSECTED.material.emissive.setHex(0xff0000); 
     console.log(intersects.length); 
     } 
    } else { 
     if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex); 
     INTERSECTED = null; 
    } 
    renderer.render(scene, camera); 

    } 
</script> 

Answer 1

あなたがvar mouse = new THREE.Vector2()を宣言すると、あなたが（あなたのマウスが画面の中央に位置することを意味する）の値{x:0, y:0}でベクトルを作成することを意味します。次に、init()でシーンを初期化し、そこにキューブを設定して、animate()でレンダリングを開始します。

scneenの中央にマウスを置いて、すべてのレンダリング（あなたのrender()関数内）で交差点を確認します。それはあなたのmouseが画面の真ん中にある間、あなたは交差の肯定的な結果を持っていることを意味します。キューブのどこかをクリックすると、マウスの新しい点が設定されるため、交差結果は負の値になります。

マウスをクリックして操作したい場合は、交差をチェックするコードブロックをrender()からonDocumentMouseDown(event)に移動する方がよいでしょう。

// find intersections 
raycaster.setFromCamera(mouse, camera); 
var intersects = raycaster.intersectObjects(scene.children); 
if (intersects.length > 0) { 
    if (INTERSECTED != intersects[ 0 ].object) { 
    if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex); 
    INTERSECTED = intersects[ 0 ].object; 
    INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex(); 
    INTERSECTED.material.emissive.setHex(0xff0000); 
    console.log(intersects.length); 
    } 
} else { 
    if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex); 
    INTERSECTED = null; 
} 

シーンをクリックしたときにのみ交差を確認します。

jsfiddle例