Как повернуть модель gltf в ThreeJS

Главный нуб здесь. Я пытаюсь заставить эту модель вращаться самостоятельно, и, попробовав ответы из других сообщений, я в растерянности. Моя последняя попытка дает мне ошибку, утверждая, что ссылка не определена. Пожалуйста помоги.

Код, который я адаптировал, взят из примера 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>


javascript rotation gltf three.js
person Christian Oiticica    schedule 25.08.2018    source источник
comment
Этот код не будет работать во фрагменте Stack Overflow, поскольку он зависит от других файлов, указанных в тегах <script/>. Если вы запускаете его локально, что вы имеете в виду, говоря, что ссылка не определена? Что такое полная ошибка? Но я думаю, ваша ошибка может заключаться в следующем: добавьте к числу, используя +=, а не =+. Последнее то же самое, что и x = (+0.1), который просто повторно устанавливает X в одно и то же значение.   -  person Don McCurdy    schedule 27.08.2018
comment
@DonMcCurdy Это ошибка, которая отображается в консоли: untitled.html: 103 Uncaught ReferenceError: модель не определена в animate (untitled.html: 103) animate @ untitled.html: 103   -  person Christian Oiticica    schedule 27.08.2018
comment
строка 103 такая: model.rotation.x + = 0,01;   -  person Christian Oiticica    schedule 27.08.2018
comment
Вам нужно подождать, пока модель загрузится, прежде чем вращать ее, попробуйте if ( model) model.rotation.x += 0.01;   -  person Don McCurdy    schedule 27.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

Помимо предложений Дона, я обнаружил еще одну проблему - ваша модель не определена глобально, чтобы ее можно было использовать в функции анимации.

Добавьте модель вместе с другими переменными (глобальными):

var camera, scene, renderer, light, model;

Затем подождите, пока модель загрузится:

if (model) {
    model.rotation.x += 0.01;
}
person Rvy Pandey    schedule 25.09.2018