Question

我需要用旋转等做非常简单的3D模型查看器。我有简单的代码，一切正常，但是当我用OrbitControls添加这两行时，那里只有空白页：

controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );

整个代码：

<body>
    <script src="js/OrbitControls.js"></script>
    <script src="js/three.min.js"></script>
    <script src="js/OBJLoader.js"></script>
    <div id="ahoj" style="width:1000px; height:700px">
    </div>
    <script>

        var container;
        var camera, controls, scene, renderer;
        var mouseX = 0, mouseY = 0;
        var windowHalfX = 1000 / 2;
        var windowHalfY = 700 / 2;
        init();
        animate();
        function init() {
            container = document.getElementById('ahoj');
            document.body.appendChild( container );
            camera = new THREE.PerspectiveCamera( 75, 1000 / 700, 1, 2000 );
            camera.position.z = 200;
            // scene
            scene = new THREE.Scene();
            var ambient = new THREE.AmbientLight( 0x000 );
            scene.add( ambient );
            var directionalLight = new THREE.DirectionalLight( 0xffeedd );
            directionalLight.position.set( 0, 0, 1 );
            scene.add( directionalLight );
            // texture
            var manager = new THREE.LoadingManager();
            manager.onProgress = function ( item, loaded, total ) {
                console.log( item, loaded, total );
            };
            var texture = new THREE.Texture();
            var onProgress = function ( xhr ) {
                if ( xhr.lengthComputable ) {
                    var percentComplete = xhr.loaded / xhr.total * 100;
                    console.log( Math.round(percentComplete, 2) + '% downloaded' );
                }
            };
            var onError = function ( xhr ) {
            };
            var loader = new THREE.ImageLoader( manager );
            loader.load( 'textures/mapa1.png', function ( image ) {
                texture.image = image;
                texture.needsUpdate = true;
            } );
            // model
            var loader = new THREE.OBJLoader( manager );
            loader.load( 'obj/Immortal.obj', function ( object ) {
                object.traverse( function ( child ) {
                    if ( child instanceof THREE.Mesh ) {
                        //child.material.map = texture;
                    }
                } );
                object.scale.set(3,3,3);
                object.position.y = 0;
                object.position.z = 0;
                object.position.x = 0;
                scene.add( object );
            }, onProgress, onError );
            //
            renderer = new THREE.WebGLRenderer({
                antialias: true,
                alpha: true
            });
            //controls = new THREE.OrbitControls( camera );
            //controls.addEventListener( 'change', render );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( 1000, 700 );
            container.appendChild( renderer.domElement )
            window.addEventListener( 'resize', onWindowResize, false );
        }
        function onWindowResize() {
            windowHalfX = 1000 / 2;
            windowHalfY = 700 / 2;
            camera.aspect = 1000 / 700;
            camera.updateProjectionMatrix();
            renderer.setSize( 1000, 700 );
        }
        function animate() {
            render();
            requestAnimationFrame( animate );
            controls.update();
        }
        function render() {
            renderer.render( scene, camera );
        }
    </script>
</body>

知道问题出在哪里？我尝试了一些教程，但没有人帮助过我..

Answer 1

您需要首先加入three.min.js ：

<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/OBJLoader.js"></script>

带有OrbitControls的Three.js OBJloader

1 个答案: