THREE.JS 网眼 position 光滑 animation

Question

我有一个很简单的问题要问你 three.js 关于 imported.obj 网格的 x position 翻译。

我是 three.js 的新手，如果有人可以指导我如何处理或解决这个问题，我正在徘徊。

所以...我在(0,-200,0)上有这个网格，我只是想将它移动到(50,-200,0) ，通过一个按钮来回平滑地移动到两个位置。

 objLoader = new THREE.OBJLoader(); objLoader.load('models/map_real.obj', function (obj) { var blackMat = new THREE.MeshStandardMaterial({color:0xfaf9c9}); obj.traverse(function (child) { if (child instanceof THREE.Mesh) { child.material = blackMat; } }); obj.castShadow = true; obj.receiveShadow = true; obj.position.set(0,-200,0) obj.rotation.y = getDeg(-20); scene.add(obj); objWrap = obj; });

我的 main.js 中有一个init() ，它包含所有函数，例如camera(), animate(), render()等......并且从变量objWrap.position.x中记录正确的 position。

我试图捕捉我的#test button上的点击（如下面的代码片段所示）并且只将 position 增加0.5 - - 我明白了，它不在动画循环中所以它不能保持添加0.5 。

 $('#test').click(function(){ if (objWrap.position.x <= 50) { objWrap.position += 0.5} });

所以我想要的最终结果是一个按钮来回切换平滑的 animation 从objWrap.position.x = 0到objWrap.position.x = 50

我希望已经清楚了，如果您需要了解更多信息，请随时询问，我会在几秒钟内回复...非常感谢所有帮助！

Answer 1

只是一个如何使用Tween.js ：

 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); camera.position.setScalar(50); camera.lookAt(scene.position); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); scene.add(new THREE.GridHelper(200, 100)); var box = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshBasicMaterial({ color: "aqua" })); scene.add(box); btnMove.addEventListener("click", onClick, false); var forth = true; function onClick() { new TWEEN.Tween(box.position) .to(box.position.clone().setX(forth ? 50 : 0), 1000) .onStart(function() { btnMove.disabled = true; }) .onComplete(function() { btnMove.disabled = false; forth = !forth; }) .start(); } render(); function render() { requestAnimationFrame(render); TWEEN.update(); renderer.render(scene, camera); } 

 body { overflow: hidden; margin: 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script> <button id="btnMove" style="position:absolute;">Move</button> 

Answer 2

这适用于ReactJS ，

导入吐温。

import {TWEEN} from "three/examples/jsm/libs/tween.module.min";

启用拖动 controller 和补间 animation。

const { gl, camera } = useThree();
const objects = [];   // objects.push(ref.current)

useEffect(() => {
    const controls = new DragControls( objects, camera, gl.domElement );

    controls.addEventListener( 'dragend', (e) => {
         new TWEEN.Tween(e.object.position)
             .to(new Vector3(x, y, z), 1000)
             .easing(TWEEN.Easing.Back.InOut)
             .start();
    });
})

UseFrame 显示 animation。

useFrame(() => {
    TWEEN.update();
});

希望能帮助别人。