三個.js導入紋理

我正在使用three.js現在有一個地板和一個車載的json加載場景。一切都很好，但汽車只是黑色而不是從攪拌機的紋理。有沒有可能直接用攪拌機的紋理輸出它，或者之後添加紋理？三個.js導入紋理

這是我使用的代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>three.js - pointerlock controls</title> 
    <style> 
     html, body { 
      width: 100%; 
      height: 100%; 
     } 

     body { 
      background-color: #eeeeee; 
      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 mesh2; 
     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) 
     {       
      mesh2 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ envMap: THREE.ImageUtils.loadTexture('textures/metal.jpg', new THREE.SphericalReflectionMapping()) })); 
      mesh2.scale.set(0.1, 0.1, 0.1); 
      mesh2.position.set(0, 1, 0); 
      mesh2.rotation.set(29.85, 3.14, 2); 

      scene.add(mesh2); 
     }; 
    loader.load('blender.js/auto.js', loadModel);    


      // 

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

與//objects的部分是我加載我已經嘗試添加一些示例質地不工作，以及汽車。最好的時候，我可以簡單地將混合器中的紋理與模型一起導入。

來源

2013-03-11 Jonathan Speth

嘗試看看是否它可以幫助你：HTTP：// stackoverflow.com/questions/15192316/three-js-loading-model-with-jsonloader-loads-only-half-of-textures/15198090#15198090 – Popov 2013-03-11 13:07:19

是的，謝謝幫了我很多 – 2013-03-14 07:11:12

教程如何從攪拌機出口：here

加載的對象與質地：

var loader = new THREE.JSONLoader();   

loader.load("obj.js", function(geometry, materials) { 
    var material = new THREE.MeshFaceMaterial(materials); 
    mesh = new THREE.Mesh(geometry, materials); 
    scene.add(mesh) 
});

單獨添加紋理：

var loader = new THREE.JSONLoader();   

loader.load("obj.js", function(geometry) { 

    var texture = THREE.ImageUtils.loadTexture(textureUrl); 
    var material = new THREE.MeshLambertMaterial({map: texture}); 
    mesh = new THREE.Mesh(geometry, material); 
    scene.add(mesh) 
});

來源

2013-03-11 13:52:30 uhura

我試圖用你的代碼的紋理對象，因爲它通常應該有一個紋理，但然後我只是得到一個白色的屏幕沒有錯誤或什麼 – 2013-03-12 13:30:08

我有同樣的問題喬納森，但它只適用於Firefox ... – 2013-10-11 15:49:53

三個.js導入紋理

回答

相關問題