Three.js中的交互式網格

我剛接觸javascript和three.js，所以這可能是一個noob問題。順便說一句，我正在研究示例interactive/cubes/tween，我試圖修改它來測試其他東西。目前MouseDown事件給補間效果相交的幾何形狀，這裏的功能：Three.js中的交互式網格

function onDocumentMouseDown(event) { 

       event.preventDefault(); 

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

       raycaster.setFromCamera(mouse, camera); 

       var intersects = raycaster.intersectObjects(scene.children); 

       if (intersects.length > 0) { 

        new TWEEN.Tween(intersects[ 0 ].object.position).to({ 
         x: Math.random() * 800 - 400, 
         y: Math.random() * 800 - 400, 
         z: Math.random() * 800 - 400 }, 2000) 
        .easing(TWEEN.Easing.Elastic.Out).start(); 

        new TWEEN.Tween(intersects[ 0 ].object.rotation).to({ 
         x: Math.random() * 2 * Math.PI, 
         y: Math.random() * 2 * Math.PI, 
         z: Math.random() * 2 * Math.PI }, 2000) 
        .easing(TWEEN.Easing.Elastic.Out).start(); 

       } 

       /* 
       // Parse all the faces 
       for (var i in intersects) { 

        intersects[ i ].face.material[ 0 ].color.setHex(Math.random() * 0xffffff | 0x80000000); 

       } 
       */ 
      }

但是，如果我想給這種效果被貫穿的幾何形狀和非相交的人有不同的影響是什麼？我已經試過這樣：

function init() 
{ 

//JUST SOME CODE OF THE INIT()// 
//TRIANGLE// 
     var triangle = new THREE.Mesh(new THREE.CircleGeometry(50, 3, 0, Math.PI * 2), triangleMat); 
     triangle.position.set(70, 0, 0); 
     scene.add(triangle); 
     sceneArr.push(circle); 

     //SQUARE// 
     var square = new THREE.Mesh(new THREE.CircleGeometry(50, 4, 0, Math.PI * 2), squareMat); 
     square.position.set(-35, 60.6218, 0); 
     scene.add(square); 
     sceneArr.push(square); 

     //CIRCLE// 
     circle = new THREE.Mesh(new THREE.CircleGeometry(50, 27, 0, Math.PI * 2), circleMat); 
     circle.position.set(-35, -60.6218, 0); 
     scene.add(circle); 
     sceneArr.push(circle); 
}

這裏是我的MouseDown功能：

function onDocumentMouseDown(event) { 

    event.preventDefault(); 

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

    raycaster.setFromCamera(mouse, camera); 

    var intersects = raycaster.intersectObjects(scene.children); 


    if (intersects.length > 0) { 

     console.log(intersects[0]); 

     new TWEEN.Tween(intersects[ 0 ].object.position).to({ 
      x: 0, 
      y: 0, 
      z: 0 }, 4000) 
     .easing(TWEEN.Easing.Elastic.Out).start(); 

     new TWEEN.Tween(intersects[ 0 ].object.rotation).to({ 
      x: 0, 
      y: 0, 
      z: Math.random() * 2 * Math.PI }, 2000) 
     .easing(TWEEN.Easing.Elastic.Out).start(); 

     for(var geo in sceneArr){ 

      if(geo != intersects[ 0 ]){ 

       geo.position.set(50, 50, 0); 
      } 
     } 

    } 

}

不幸的是我的邏輯沒有工作。我怎樣才能使它工作？

來源

2015-06-17 leota

我看你_copied_代碼。你寫的代碼在哪裏？ – WestLangley

我嘗試了許多沒有結果的代碼。但我可以在大約一個小時後，一回家就發佈我所嘗試過的內容。 – leota

我編輯了這篇文章，你現在可以檢查我的代碼，看看有什麼錯誤:) – leota

解決了它。實際上我無法將低谷網格圈入場景中。不知道scene.traverse（）。下面是新的代碼：這裏找到

function onDocumentMouseDown(event) { 

    event.preventDefault(); 

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

    raycaster.setFromCamera(mouse, camera); 

    var intersects = raycaster.intersectObjects(scene.children); 


    if (intersects.length > 0) { 

     new TWEEN.Tween(intersects[ 0 ].object.position).to({ 
      x: 0, 
      y: 0, 
      z: 0 }, 4000) 
     .easing(TWEEN.Easing.Elastic.Out).start(); 

     new TWEEN.Tween(intersects[ 0 ].object.rotation).to({ 
      x: 0, 
      y: 0, 
      z: Math.random() * 2 * Math.PI }, 2000) 
     .easing(TWEEN.Easing.Elastic.Out).start(); 

     scene.traverse(function(node) { 

      if (node instanceof THREE.Mesh) { 

       if (node != intersects[ 0 ].object){ 

       new TWEEN.Tween(node.position).to({ 
        x: 50, 
        y: 50, 
        z: 0 }, 4000) 
       .easing(TWEEN.Easing.Elastic.Out).start(); 

       } 
      } 

     }); 


    } 

}

解決方案：Three.js: for loop for every mesh in scene?

來源

2015-06-18 22:28:16 leota

Three.js中的交互式網格

回答

相關問題