如何让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

回答

相关问题