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の最新バージョンを使用して作業しています、助けてくださいすることができます。あなたはV75を使用する必要があり、バージョン73を使用している：

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

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

サーバーには、あなたがそれらのオブジェクト・ファイルにアクセスすることはできません。あなたのサーバーからCORSエラーが発生しています。それらを同じドメインからロードすると、うまくいくはずです。

しかし、適切なCORSがない場合は、元のヘッダを許可してください。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.