使用Three.js 心得系列二 如何改变三维场景的GlTF模型的位置

本文主要是介绍使用Three.js 心得系列二 如何改变三维场景的GlTF模型的位置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

如何改变三维场景的GlTF模型的位置？

如图，我的世界原点有个人物模型，这里人物模型时GLTF格式的3D模型，这个模型，暂不包含动画。

如何所示我想实现它在点击按钮时 沿着X轴方向前进如何做？

 

 

 不说废话，直接上源码。

我这里把人人物的模型 起名字： main_mode

 const loader = new GLTFLoader().setPath( './01Images_Test/' );loader.load( 'miner.gltf', function ( gltf ) {gltf.scene.traverse( function ( child ) {child.name="main_mode";if ( child.isMesh ) {// TOFIX RoughnessMipmapper seems to be broken with WebGL 2.0// roughnessMipmapper.generateMipmaps( child.material );}} );//gltf.userData.name="main_mode";scene.add( gltf.scene );

点击一个按钮，执行事件：

 var object1 = scene.getObjectByName("main_mode");object1.position.z=object1.position.z-100;object1.rotateY(Math.PI/2);for(var i=0;i<100;i++) {(function(i) {var timeoutInfo=setTimeout(function() {console.log(i);object1.position.set(object1.position.x + i, object1.position.y, object1.position.z);console.log(object1.position.x);}, (i + 1) * 1000);})(i)if(object1.position.x>1000) {window.clearInterval(timeoutInfo);alert("超出抵达世界边际点位置，已停止！");}}

以上代码就是沿着X轴每一秒移动一次。

这篇关于使用Three.js 心得系列二 如何改变三维场景的GlTF模型的位置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---