加載JSON對象時的三個JS白色屏幕

我下載了threejs，現在嘗試創建一個3D environment，您可以在某種「自我透視」中自由移動。我使用了pointlock-control示例作爲提交，現在我開始添加自己的東西，從在Blender中創建的汽車開始，並導出爲JSON，但每次嘗試加載它時，我都會看到一個白色屏幕。我希望你們能幫助我。加載JSON對象時的三個JS白色屏幕

代碼：在指示體和文本「顏色」的

<style> 
     html, body { 
      width: 100%; 
      height: 100%; 
     } 

     body { 
      background-color: #ffffff; 
      margin: 0; 
      overflow: hidden; 
      font-family: arial; 
     } 

     #blocker { 
      position: absolute; 
      width: 100%; 
      height: 100%; 
      background-color: rgba(0,0,0,0.5); 
     } 

     #instructions { 
      width: 100%; 
      height: 100%; 
      display: -webkit-box; 
      display: -moz-box; 
      display: box; 
      -webkit-box-orient: horizontal; 
      -moz-box-orient: horizontal; 
      box-orient: horizontal; 
      -webkit-box-pack: center; 
      -moz-box-pack: center; 
      box-pack: center; 
      -webkit-box-align: center; 
      -moz-box-align: center; 
      box-align: center; 
      color: #ffffff; 
      text-align: center; 
      cursor: pointer; 
     } 

    </style> 
</head> 
<body> 
    <script src="../build/three.min.js"></script> 
    <script src="js/controls/PointerLockControls.js"></script> 
    <div id="blocker"> 
     <div id="instructions"> 
      <span style="font-size:40px">Click to move</span> 
      <br /> 
      (WASD or Arrow Keys = Move, SPACE = Jump, MOUSE = Look around) 
     </div> 
    </div> 
    <script> 
     var camera, scene, renderer; 
     var geometry, material, mesh; 
     var loader; 
     var auto; 
     var loadModel; 
     var controls,time = Date.now(); 
     var objects = []; 
     var ray; 
     var blocker = document.getElementById('blocker'); 
     var instructions = document.getElementById('instructions'); 

     // http://www.html5rocks.com/en/tutorials/pointerlock/intro/ 
     var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document; 

     if (havePointerLock) { 
      var element = document.body; 
      var pointerlockchange = function (event) { 
       if (document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element) { 
        controls.enabled = true; 
        blocker.style.display = 'none'; 
       } else { 
        controls.enabled = false; 
        blocker.style.display = '-webkit-box'; 
        blocker.style.display = '-moz-box'; 
        blocker.style.display = 'box'; 
        instructions.style.display = ''; 
       } 
      } 

      var pointerlockerror = function (event) { 
       instructions.style.display = ''; 
      } 

      // Hook pointer lock state change events 
      document.addEventListener('pointerlockchange', pointerlockchange, false); 
      document.addEventListener('mozpointerlockchange', pointerlockchange, false); 
      document.addEventListener('webkitpointerlockchange', pointerlockchange, false); 
      document.addEventListener('pointerlockerror', pointerlockerror, false); 
      document.addEventListener('mozpointerlockerror', pointerlockerror, false); 
      document.addEventListener('webkitpointerlockerror', pointerlockerror, false); 
      instructions.addEventListener('click', function (event) { 
       instructions.style.display = 'none'; 
       // Ask the browser to lock the pointer 
       element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock; 

       if (/Firefox/i.test(navigator.userAgent)) { 
        var fullscreenchange = function (event) { 
         if (document.fullscreenElement === element || document.mozFullscreenElement === element || document.mozFullScreenElement === element) { 
          document.removeEventListener('fullscreenchange', fullscreenchange); 
          document.removeEventListener('mozfullscreenchange', fullscreenchange); 
          element.requestPointerLock(); 
         } 
        } 
        document.addEventListener('fullscreenchange', fullscreenchange, false); 
        document.addEventListener('mozfullscreenchange', fullscreenchange, false); 
        element.requestFullscreen = element.requestFullscreen || element.mozRequestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen; 
        element.requestFullscreen(); 
       } else { 
        element.requestPointerLock(); 
       } 
      }, false); 
     } else { 
      instructions.innerHTML = 'Your browser doesn\'t seem to support Pointer Lock API'; 
     } 
     init(); 
     animate(); 
     function init() { 
      camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000); 
      scene = new THREE.Scene(); 
      scene.fog = new THREE.Fog(0xffffff, 0, 750); 
      var light = new THREE.DirectionalLight(0xffffff, 1.5); 
      light.position.set(1, 1, 1); 
      scene.add(light); 
      var light = new THREE.DirectionalLight(0xffffff, 0.75); 
      light.position.set(-1, - 0.5, -1); 
      scene.add(light); 
      controls = new THREE.PointerLockControls(camera); 
      scene.add(controls.getObject()); 
      ray = new THREE.Raycaster(); 
      ray.ray.direction.set(0, -1, 0); 

      // floor 
      geometry = new THREE.PlaneGeometry(2000, 2000, 100, 100); 
      geometry.applyMatrix(new THREE.Matrix4().makeRotationX(- Math.PI/2)); 

      for (var i = 0, l = geometry.vertices.length; i < l; i ++) { 
       var vertex = geometry.vertices[ i ]; 
       vertex.x += Math.random() * 20 - 10; 
       vertex.y += Math.random() * 2; 
       vertex.z += Math.random() * 20 - 10; 
      } 

      for (var i = 0, l = geometry.faces.length; i < l; i ++) { 
       var face = geometry.faces[ i ]; 
       face.vertexColors[ 0 ] = new THREE.Color().setHSL(Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75); 
       face.vertexColors[ 1 ] = new THREE.Color().setHSL(Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75); 
       face.vertexColors[ 2 ] = new THREE.Color().setHSL(Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75); 
       face.vertexColors[ 3 ] = new THREE.Color().setHSL(Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75); 
      } 

      material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors }); 
      mesh = new THREE.Mesh(geometry, material); 
      scene.add(mesh); 

      // objects 
        loader = new THREE.JSONLoader(); 
    loadModel = function(geometry) 
     {       
      auto = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ envMap: THREE.ImageUtils.loadTexture('textures/metal.jpg', new THREE.SphericalReflectionMapping()), overdraw: true, shading: THREE.SmoothShading })); 
      mesh.scale.set(1, 1, 1); 
      mesh.position.set(0, 150, 0); 
      //mesh.rotation.set(Math.PI/2, Mat.PI/2, Math.PI/2); 
      //mesh.matrix.setRotationFromEuler(mesh.rotation); 
      scene.add(auto); 
     }; 
    loader.load('blender.js/auto.js', loadModel); 
    setInterval(render, 50); 

     renderer = new THREE.WebGLRenderer(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(renderer.domElement); 
     window.addEventListener('resize', onWindowResize, false); 
     } 

     function onWindowResize() { 
      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
     } 

     function animate() { 
      requestAnimationFrame(animate); 
      controls.isOnObject(false); 
      ray.ray.origin.copy(controls.getObject().position); 
      ray.ray.origin.y -= 10; 
      var intersections = ray.intersectObjects(objects); 
      if (intersections.length > 0) { 
       var distance = intersections[ 0 ].distance; 
       if (distance > 0 && distance < 10) { 
        controls.isOnObject(true); 
       } 
      } 
      controls.update(Date.now() - time); 
      renderer.render(scene, camera); 
      time = Date.now(); 
     } 
    </script> 
</body>

來源

2013-03-08 Jonathan Speth

背景顏色，風格相同#FFFFFF。

請更改其中的一個，然後試試:)

它可以起到放出來，但你可能沒看出來，

更新：

你加入的場景在這裏scene.add(mesh2);我想我們應該按照下面的工作代碼重新繪製場景（使用循環或定時器，每個「0.05秒」），不要添加新場景，使用圓形的簡單示例移動然後繼續複雜的車輛，有時可能會混淆..

工作ING代碼：

loader = new THREE.JSONLoader(); 
loadModel = function (geometry) { 
    mesh2 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ 
       envMap : THREE.ImageUtils.loadTexture('textures/metal.refl.jpg', new THREE.SphericalReflectionMapping()), 
       overdraw : true, 
       shading : THREE.SmoothShading 
      })); 
    mesh2.scale.set(1, 1, 1); 
    mesh2.position.set(0, 0, 0); 
    //mesh.rotation.set(Math.PI/2, Mat.PI/2, Math.PI/2); 
    //mesh.matrix.setRotationFromEuler(mesh.rotation); 
    scene.add(mesh2); 
};

評論，如果使用這種

來源

2013-03-08 11:08:12 MarmiK

hm不變（但當然顏色） – 2013-03-08 11:37:03

controls.update（Date.now（） - time）; renderer.render（scene，camera）; time = Date.now（）;如果你正在嘗試使用date.now（）-time;我不認爲它沒有任何用處，在那裏時間= date.now（），以便可能導致零（理論上）嘗試跳過這些步驟.. – MarmiK 2013-03-08 12:22:51

當我跳過這些步驟我不能移動了，只是相機 – 2013-03-08 12:28:36

您的相機沒有地位，也沒有目標沒有得到解決。

來源

2013-03-08 11:09:29 gaitat

但爲什麼它沒有加載json模型工作？當我從「loader = ...」到「loader.load」刪除部分我看到地板和一切，當我嘗試加載JSON車屏幕獲取黑色 – 2013-03-08 11:38:21

試圖給相機的位置和目標，但剛剛白色屏幕也 – 2013-03-08 11:48:40

-1

var intersections = ray.intersectObjects(objects);但您並未將網格添加到對象。

來源

2014-03-16 10:38:52 Larisa

加載JSON對象時的三個JS白色屏幕

回答

相關問題