javascript - Three.js OBJ 加载器不能在 codepen 上工作？

Question

我试图在 Three.js 上加载一个 OBJ 文件，它在我的本地工作，当我在我的服务器上部署文件时它工作正常: http://hafsadanguir.com/THREEJS/

但它不适用于 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 );
        }

有人可以帮忙，这是我第一次使用 three.js :)

Answer 1

我让加载程序使用最新版本的 ThreeJS。您使用的是版本 73，您应该使用 v75:

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

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

您的服务器不允许您访问这些目标文件。我从您的服务器收到 CORS 错误。如果从同一个域加载它们，那么它应该可以工作。

但是如果没有适当的 CORS，允许原始 header ，您将无法在 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.