如何在ThreeJS中旋转gltf模型

Question

这里的主要菜鸟。 我试图使这种模型自行旋转，在尝试其他帖子的答案后，我很茫然。 我的最新尝试给我一个错误，声称该引用未定义。 请帮忙。

我一直在修改的代码来自Three.js示例。 我读到您可以在动画函数中使用类似3dobject.rotation.x =+ 0.01或if (3dobject) 3dobject.rotation.x =+ 0.01的方法，但是没有运气。 在这个项目中，我要定义model = gltf.scene ，然后在我的动画函数中使用model = gltf.scene model.rotation.x =+ 0.01 。

有什么可以帮助的，谢谢。

 <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - glTF loader</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { font-family: Monospace; background-color: #000; color: #fff; margin: 0px; overflow: hidden; } #info { color: #fff; position: absolute; top: 10px; width: 100%; text-align: center; z-index: 100; display:block; } #info a { color: #75ddc1; font-weight: bold; } </style> </head> <body> <div id="info"> <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader<br /> Test fo <a href="" target="_blank" rel="noopener">stuff</a><br /> </div> <script src="js/three.js"></script> <script src="js/controls/OrbitControls.js"></script> <script src="js/loaders/GLTFLoader.js"></script> <script src="js/Detector.js"></script> <script src="js/libs/stats.min.js"></script> <div> <script> if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); var container, stats; var controls var camera, scene, renderer, light; init(); animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 ); camera.position.set( -1.8, 0.9, 2.7 ); controls = new THREE.OrbitControls( camera ); controls.target.set( 0, -0.2, -0.2 ); controls.update(); scene = new THREE.Scene(); light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 ); light.position.set( 0, 1, 0 ); scene.add( light ); // model var model; var loader = new THREE.GLTFLoader(); loader.load( 'models/gltf/Cube1.gltf', function ( gltf ) { gltf.scene.traverse( function ( child ) { } ); model = gltf.scene; scene.add( model ); } ); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth/2, window.innerHeight/2 ); renderer.gammaOutput = true; container.appendChild( renderer.domElement ); window.addEventListener( 'resize', onWindowResize, false ); // stats stats = new Stats(); container.appendChild( stats.dom ); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } // function animate() { requestAnimationFrame( animate ); //****** this is where im trying to make it rotate model.rotation.x =+ 0.01; renderer.render( scene, camera ); stats.update(); } </script> </div> </body> </html>

Answer 1

除了Don的建议之外，我还发现了另一个问题-您的模型未全局定义，因此无法用于动画功能 。

将模型与其他变量（全局）一起添加：

var camera, scene, renderer, light, model;

然后等待模型实际加载：

if (model) {
    model.rotation.x += 0.01;
}

如何在ThreeJS中旋转gltf模型

问题描述

1 个解决方案

解决方案1
0 2018-09-25 10:12:17

如何在ThreeJS中旋转gltf模型

问题描述

1 个解决方案

解决方案1 0 2018-09-25 10:12:17

解决方案1
0 2018-09-25 10:12:17