Question

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

我一直在修改的代码来自Three.js示例。我读到，您可以在动画功能中使用类似3dobject.rotation.x =+ 0.01或if (3dobject) 3dobject.rotation.x =+ 0.01的名称，但是没有运气。在这个项目中，我定义了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 个答案: