Three.js在線編輯器導出法線貼圖

我試圖用three.js online editor來做一個正常的貼圖實驗。該編輯器是偉大的，因爲你可以看到下面：Three.js在線編輯器導出法線貼圖

不正常的地圖：

enter image description here

隨着法線貼圖： enter image description here

我導出時的問題，對我來說最重要的是材料，但看起來像出口商沒有出口材料設置像着色器或制服：

{ 
    "metadata": { 
     "version": 4, 
     "type": "object", 
     "generator": "ObjectExporter" 
    }, 
    "geometries": [ 
     { 
      "type": "PlaneGeometry", 
      "width": 200, 
      "height": 200, 
      "widthSegments": 1, 
      "heightSegments": 12 
     }], 
    "materials": [ 
     { 
      "type": "MeshPhongMaterial", 
      "color": 16580351, 
      "ambient": 16777215, 
      "emissive": 0, 
      "specular": 13027014, 
      "shininess": 60, 
      "opacity": 1, 
      "transparent": false, 
      "wireframe": false 
     }], 
    "object": { 
     "type": "Scene", 
     "children": [ 
      { 
       "name": "Plane 8", 
       "type": "Mesh", 
       "position": [-13.67,102.97,28.83], 
       "rotation": [-0.18,-0.22,0], 
       "scale": [1,1,1], 
       "geometry": 0, 
       "material": 0 
      }, 
      { 
       "name": "AmbientLight 10", 
       "type": "AmbientLight", 
       "color": 2236962 
      }, 
      { 
       "name": "AmbientLight 11", 
       "type": "AmbientLight", 
       "color": 2236962 
      }, 
      { 
       "name": "DirectionalLight 12", 
       "type": "DirectionalLight", 
       "color": 16777215, 
       "intensity": 1, 
       "position": [200,200,200] 
      }, 
      { 
       "type": "Object3D", 
       "position": [0,0,0], 
       "rotation": [0,0,0], 
       "scale": [1,1,1] 
      }, 
      { 
       "type": "Object3D", 
       "position": [0,0,0], 
       "rotation": [0,0,0], 
       "scale": [1,1,1] 
      }, 
      { 
       "name": "DirectionalLight 12 Target", 
       "type": "Object3D", 
       "position": [0,0,0], 
       "rotation": [0,0,0], 
       "scale": [1,1,1] 
      }] 
    } 
}

我知道編輯器正在工作，所以這可能還沒有實現，但是您知道在構建場景時是否有方法從編輯器中查看生成的代碼嗎？我可以看到它對我來說應該足夠的代碼。

謝謝:)

來源

2013-04-29 Remo H. Jansen

對不起傢伙，我想出如何讓法線貼圖的工作，我仍然不知道怎麼看從編輯器的代碼，但我會關閉的問題反正...感謝那些花閱讀它的時間。

   //wall 
       var textures = { 
       lion: THREE.ImageUtils.loadTexture('../media/lion.png'), 
       lionbumpnormal: THREE.ImageUtils.loadTexture('../media/lion-bumpnormal.png') 
       }; 

       // common material parameters 

       var ambient = 0, diffuse = 0x331100, specular = 0xffffff, shininess = 10, scale = 23; 
       var material = new THREE.MeshPhongMaterial({ 
        map: textures.lion, 
        normalMap: textures.lionbumpnormal, 
        color: 16580351, 
        ambient: 16777215, 
        emissive: 0, 
        specular: 13027014, 
        shininess: 60, 
        opacity: 1, 
        transparent: false, 
        wireframe: false 
       }); 

       var planeGeometry = new THREE.PlaneGeometry(10, 10); 

       var wall = new THREE.Mesh(
        planeGeometry, 
        material 
       );

來源

2013-04-29 23:55:02

不知道這是你的意思，但我試圖加載一個簡單的場景，我在編輯器中設置。能夠使用THREE.ObjectLoader

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="../three.js/build/three.js"></script> 
    <script> 
     (function() { 
     var Game = function() { 
     } 

     Game.prototype.init = function() { 
      var loader = new THREE.ObjectLoader(); 
      loader.load('data.json', (function(data) { 
      this.scene = data; 
      this.load(); 
      }).bind(this)); 
     } 

     Game.prototype.draw = function() { 
      this.renderer.render(this.scene, this.camera); 
     } 

     Game.prototype.load = function() { 
      var container = document.createElement('div'); 
      document.body.appendChild(container); 

      this.camera = new THREE.PerspectiveCamera(30, window.innerWidth/window.innerHeight, 1, 10000); 
      this.camera.position.z = 500; 
      this.camera.position.x = 500; 
      this.camera.position.y = 100; 
      this.camera.lookAt(new THREE.Vector3(0,0,0)); 
      this.scene.add(this.camera); 

      this.renderer = new THREE.WebGLRenderer(); 
      this.renderer.setSize(window.innerWidth, window.innerHeight); 
      container.appendChild(this.renderer.domElement); 
      this.update(); 
     }; 

     Game.prototype.update = function() { 
      requestAnimationFrame(this.update.bind(this)); 
      this.draw(); 
     } 

     window.onload = function() { 
      var g = new Game(); 
      g.init(); 
     } 

     }).call(this); 

    </script> 
    </head> 
    <body> 
    </body> 
</html>

來源

2013-09-05 21:01:01 agmcleod

Three.js在線編輯器導出法線貼圖

回答

相關問題