Three.js OBJloader with OrbitControls

Question

I need to do very simple 3d model viewer with rotation and so on.. I have simple code, everything works fine, but when I add these two rows with OrbitControls then there'S only blank page:

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

Whole code:

<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>

Any idea where is the problem? I tried some few tutorials, but no one helped me..

Answer 1

You need to include three.min.js first :

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

Three.js OBJloader with OrbitControls

Question

1 answers

solution1
0 ACCPTED 2015-11-22 13:53:03

Three.js OBJloader with OrbitControls

Question

1 answers

solution1 0 ACCPTED 2015-11-22 13:53:03

solution1
0 ACCPTED 2015-11-22 13:53:03