Three.js 带有 OrbitControls 的 OBJloader答案

【问题标题】：Three.js OBJloader with OrbitControlsThree.js 带有 OrbitControls 的 OBJloader
【发布时间】：2015-11-22 13:37:36
【问题描述】：

我需要做一个非常简单的带有旋转等的 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>

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

【问题讨论】：

您检查过 JavaScript 控制台是否有错误？ (F12)。您可能忘记包含./examples/js/controls/OrbitControls.js。
我包含了所有需要的文件

标签： javascript three.js

【解决方案1】：

你需要包含three.min.jsfirst：

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

【讨论】：