CODEWITHSUNDEEP
javascripthtmlcssthree.js
Hafsa
Hafsa

Reputation: 105

Three.js OBJ loader not working on codepen?

I'm a trying to load an OBJ file on Three.js, its working on my local, and when I deploy the files on my server it's working fine : http://hafsadanguir.com/THREEJS/

but it's not working on codepen : http://codepen.io/hafsadanguir/pen/RaJaPZ 

var container;
        var camera, scene, renderer;
        var mouseX = 0, mouseY = 0;
        var windowHalfX = window.innerWidth/ 2;
        var windowHalfY = window.innerHeight / 2;
        init();
        animate();

        function init() {
            container = document.createElement( 'div' );
            document.body.appendChild( container );
            camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
                            camera.position.z = 900;
                            camera.position.x = -1000;
            // scene
            scene = new THREE.Scene();
            var ambient = new THREE.AmbientLight( 0x404040 ); //This creates an Ambientlight with a color.
            scene.add( ambient );

            var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
            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('http://hafsadanguir.com/THREEJS/textures/red.jpg', function ( image ) {
                texture.image = image;
                texture.needsUpdate = true;
            } );

            // model
            var loader = new THREE.OBJLoader( manager );
            loader.load('http://hafsadanguir.com/THREEJS/obj/Heart.obj', function ( object ) {
                object.traverse( function ( child ) {
                    if ( child instanceof THREE.Mesh ) {
                        child.material.map = texture;
                    }
                } );
                object.position.y = -150;

                scene.add( object );
            }, onProgress, onError );
            //
            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );
            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            //
            window.addEventListener( 'resize', onWindowResize, false );
        }
        function onWindowResize() {
            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );

        }
        function onDocumentMouseMove( event ) {
            mouseX = ( event.clientX - windowHalfX ) / 2;
            mouseY = ( event.clientY - windowHalfY ) / 2;
        }
        //
        function animate() {
            requestAnimationFrame( animate );
            render();
        }


        function render() {
            //camera.position.x += ( mouseX - camera.position.x ) * .005;
            //camera.position.y += ( - mouseY - camera.position.y ) * .005;
            camera.lookAt( scene.position );
            renderer.render( scene, camera );
        }

Someone can help please, it's my first time using three.js :)

Upvotes: 1

Views: 1215

Answers (1)

Aaron Franco
Aaron Franco

Reputation: 1580

I have the loader working using the latest version of ThreeJS. You are using version 73, you should be using v75:

http://codepen.io/aaronfranco/pen/LNrZQg

https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.min.js

Your server does not allow you to access those object files. I'm getting CORS error from your server. If load them from the same domain, then it should work.

But without proper CORS, allow origin headers, you won't be able to use them in CodePen.

> XMLHttpRequest cannot load
> http://hafsadanguir.com/THREEJS/obj/Heart.obj. No
> 'Access-Control-Allow-Origin' header is present on the requested
> resource. Origin 'http://s.codepen.io' is therefore not allowed
> access.

Upvotes: 3

Related Questions