2

three.js オンライン エディターを使用して、通常のマッピング実験をしようとしています。以下に示すように、エディターは優れています。

法線マップなし:

ここに画像の説明を入力

法線マップの場合: ここに画像の説明を入力

エクスポート時の私の問題です。私にとって最も重要なことはマテリアルですが、エクスポーターがシェーダーやユニフォームなどのマテリアル設定をエクスポートしていないようです:

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

エディターは進行中なので、おそらくまだ実装されていないことは理解していますが、シーンを構築するときにエディターから生成されたコードを確認する方法があるかどうか知っていますか? 私には十分なはずのコードを見ることができます。

ありがとう ：）

4

2 に答える 2

2

法線マップを機能させる方法を考え出した申し訳ありませんが、エディターからコードを表示する方法はまだわかりませんが、とにかく質問を閉じます...時間をかけて読んだ人に感謝します。

             //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-29T23:55:02.683 に答える
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>
于 2013-09-05T21:01:01.800 に答える