Question

我尝试使用three.js online editor进行正常的映射实验。编辑器很棒，如下所示：

没有法线贴图：

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]
            }]
    }
}

我知道编辑器正在进行中，所以这可能还没有实现，但是你知道在构建场景时是否有办法从编辑器中看到生成的代码？我可以看到它对我来说应该足够了。

谢谢：）

Answer 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
                );

Answer 2

不确定这是不是你的意思，但我试图加载我在编辑器中设置的简单场景。能够使用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>

Three.js在线编辑器导出法线贴图

2 个答案: