如何讓3D物體在點擊時相互平滑地跳起來？ Three.JS

我對Three.JS和3D web開發人員非常陌生，一般來說我試圖做的是模仿這個動作：https://www.youtube.com/watch?v=HWSTxPc8npk&feature=youtu.be&t=7s本質上，這是一組3D平面，點擊後整個堆棧反應並給出被點擊的空間周圍的空間。如何讓3D物體在點擊時相互平滑地跳起來？ Three.JS

現在，我的基本情況是3架飛機，先找出是否可以點擊中間的飛機，如何讓其他飛機順利跳回，就好像它們被推動一樣，而不是瞬間出現並消失。現在點擊一個按鈕。

長期目標是爲每個飛機設置一個單獨的按鈕，以便在點擊時，選定的飛機將在其周圍填充並且堆疊中的其餘飛機相應地移動。

我已經看過Tween.js和CSS3D，但作爲一個新手相當不知所措。任何教程或提示將不勝感激！

// Our Javascript will go here. 
     window.addEventListener('resize', onWindowResize, false); 

     function onWindowResize(){ 

      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 

      renderer.setSize(window.innerWidth, window.innerHeight); 

     } 
     var scene = new THREE.Scene(); 
     var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

     var renderer = new THREE.WebGLRenderer(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(renderer.domElement); 

     var geometry = new THREE.PlaneGeometry(3, 3, 1); 
     var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); 
     var plane = new THREE.Mesh(geometry, material); 
     plane.rotation.y = -.7; 

     var material2 = new THREE.MeshBasicMaterial({ color: 0x0000ff }); 
     var material3 = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 
     var plane2 = new THREE.Mesh(geometry, material2); 
     plane2.rotation.y = -.7; 
     plane2.position.x = 1; 

     var plane3 = new THREE.Mesh(geometry, material3); 
     plane3.rotation.y = -.7; 
     plane3.position.x = -1; 

     scene.add(plane, plane2, plane3); 

     camera.position.z = 5; 
     function render() { 
      requestAnimationFrame(render); 
      // cube.rotation.x += 0.1; 
      // cube.rotation.y += 0.1; 
      renderer.render(scene, camera); 
     } 
     render(); 

     function clickFirst() { 
     TWEEN.removeAll(); 
     var tween = new TWEEN.Tween(plane3.position).to({x: -2}, 1000).start(); 
     tween.easing(TWEEN.Easing.Elastic.InOut); 
      render(); 
     } 
    </script> 
    <button onclick="clickFirst();" style="background-color: white; z-index: 9999;">Click me</button>

來源

2017-01-17 quidkid

你嘗試過什麼嗎？你能分享你的代碼嗎？ – bfontaine

剛剛添加了不起作用的代碼。我不認爲我理解如何正確使用吐溫。感謝回覆！！ – quidkid

首先，您需要找到2架飛機。

其次，你需要讓飛機可點擊： https://threejs.org/examples/#webgl_interactive_cubes https://github.com/josdirksen/learning-threejs/blob/master/chapter-09/02-selecting-objects.html

第三，你應該使用Tween.js過渡。選擇合適的飛機後，做一個補間與補間另一面，都在同一個軸移動：

例如：

createjs.Tween.get(plane3.position.z).to(
       plane3.position.z + 100 
      , 1000, createjs.Ease.cubicOut)

如果你將開始實施後，在這裏添加一些代碼我將能夠幫助更多。

來源

2017-01-17 16:59:06 Tlatis

感謝Lior回覆！我實際上不希望飛機本身是可點擊的，而是它們由單獨的按鈕控制器控制。我添加了當前正在運行的代碼，但這不起作用。我不認爲我正在理解如何使用Tween.js與Three.js – quidkid

你是否能夠看到飛機？ – Tlatis

是的，我有3個彼此相鄰！ – quidkid

如何讓3D物體在點擊時相互平滑地跳起來？ Three.JS

回答

相關問題