12

2 つのメッシュ (キューブ) を含むキャンバス レンダラーを設定します。私がする必要があるのはcatch the click event on each cube、そのための便利なメソッドを呼び出すことです。

これまでのところ、すべてのレンダラーでクリック イベントをキャッチできました。つまり、cube1 と cube2 をクリックすると、クリックは同じものに属しますrenderer。

私の質問は、各キューブでクリック イベントをバインドする方法です。

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

            //dom
    var containerPopUp=document.getElementById('popup');
    //renderer
    var rendererPopUp = new THREE.CanvasRenderer();
    rendererPopUp.setSize(420,200);

    containerPopUp.appendChild(rendererPopUp.domElement);
    //Scene
    var scenePopUp = new THREE.Scene();
    //Camera
    var cameraPopUp = new THREE.PerspectiveCamera(50,60/60,1,1000);

    cameraPopUp.position.z = 220;
    cameraPopUp.position.y =  20;
    //
    scenePopUp.add(cameraPopUp);

    //Add texture for the cube
    //Use image as texture
    var img2D = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
    map:THREE.ImageUtils.loadTexture('img/2d.png') 
    });
    img2D.map.needsUpdate = true; //ADDED
    //Add Cube
    var cubeFor2D = new THREE.Mesh(new THREE.CubeGeometry(40,80,40),img2D);
    cubeFor2D.position.x =- 60;
    cubeFor2D.position.y = 20;

    scenePopUp.add(cubeFor2D);
    //
    var img3D = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
    map:THREE.ImageUtils.loadTexture('img/3d.png') 
    });
    img3D.map.needsUpdate = true;
    var cubeFor3D = new THREE.Mesh(new THREE.CubeGeometry(40,80,40),img3D);
    cubeFor3D.position.x = 60;
    cubeFor3D.position.y=20;

    scenePopUp.add(cubeFor3D);
    //
    rendererPopUp.render(scenePopUp,cameraPopUp);
    //
    animate();

    rendererPopUp.domElement.addEventListener('click',testCall,false);//Here the click event is bound on the whole renderer, means what ever object in the renderer is clicked, the testCall method is called.

ご覧のとおり、cubeFor2D と cubeFor3D はレンダラーに含まれています。各メッシュでクリック イベントをバインドする必要があります。私はこれを試しましたthreex.domevent.js：

var meshes  = {};
        meshes['mesh1'] = cubeFor2D;
        meshes['mesh1'].on('mouseover', function(event){

              //response to click...
              console.log('you have clicked on cube 2D');

        });

しかし、それは機能しません。コンソールで、次のエラーが発生しました。

TypeError: meshes.mesh1.on is not a function

もちろん、API ソース コード ファイルを含めました。

    <script src="threex.domevent.js"></script>
4

2 に答える 2

32

このようなコールバックを生成できます。最初に、各オブジェクトのコールバック関数を定義します。

mesh.callback = function() { console.log( this.name ); }

次に、標準のピッキング パターンに従います。

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onDocumentMouseDown( event ) {

    event.preventDefault();

    mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

    raycaster.setFromCamera( mouse, camera );

    var intersects = raycaster.intersectObjects( objects ); 

    if ( intersects.length > 0 ) {

        intersects[0].object.callback();

    }

}

編集: three.js r.70 に更新

于 2012-10-09T21:53:57.593 に答える