2013-04-29 2 views
2

Я пытаюсь использовать three.js online editor, чтобы сделать обычный эксперимент по сопоставлению. Редактор велик, как вы можете увидеть ниже:Редактор 3d.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] 
      }] 
    } 
} 

Я понимаю, что редактор работает, так что это, вероятно, еще не реализовано, но знаете ли вы, есть ли способ увидеть сгенерированный код из редактора при создании сцены? Я могу видеть код, которого мне должно быть достаточно.

Спасибо :)

ответ

1

К сожалению, ребята, я понял, как получить карту нормалей работать, я до сих пор не знаю, как увидеть код из редактора, но я закрою этот вопрос в любом случае ... Спасибо тем, что взял время, чтобы прочитать его.

   //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 
       ); 
0

Не уверен, что это то, что вы имели в виду, но я пытался загрузить простую сцену, которую я настраивал в редакторе. Был в состоянии сделать это, используя 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> 
Смежные вопросы