javascript - 三.javascript中的JS + OOP，无法将3D JSON对象传递给其他类

Question

很难用一行描述这个问题，所以这就是情况。

我将使用 Three.js 构建一个大型 Javascript 项目，因此我试图掌握它的 OOP 概念。

1) 我创建了一个 3D 世界对象
2) 带有子类的 3D_object 基类
3) 在下面的示例中，您会看到选项 1 和选项 2 应该产生相同的结果，但不知何故却没有。
知道为什么吗？完整的源代码位于代码片段中。

(脚本之前应包含 Three.js，我假设有一个“resources/object.json”文件)

这是一个github link项目的内容，也许有人会这样发现。 (可能需要在本地Python服务器上运行它，例如绕过chrome中的跨源文件加载问题)

//create world
    var myWorld = new World(500,500);
    myWorld.AddWorldToPage();


    //load simple model in the world
    var cube = new Cube();
    myWorld.addToScene(cube);


    // load json model in the world
    //option 1
    // myWorld.addToSceneTemp();

    //option 2 OO (not working)
    var jsonObject = new Object_3D_JSON();
    function afterModelLoaded(){
        console.log("after loading is done");
        myWorld.addToScene(jsonObject);

    }
    jsonObject.loadModel(afterModelLoaded);


    myWorld.render();

// Inhertit convencience method
//=====================================================================================================
function inheritsF / rom(child, parent) {
  child.prototype = new parent();
  child.prototype.constructor = child;
}



// 3D Objects
//=====================================================================================================

// 3D object class
//=====================================================================================================
function Object_3DClass() {
    this._geometry = new THREE.BoxGeometry(1, 1, 1);
    this._material = new THREE.MeshBasicMaterial({
      color: 0xff00ff
    });
    this._mesh = new THREE.Mesh(this._geometry, this._material);
  }
  //Get 3D mesh
Object_3DClass.prototype.getMesh = function() {
  return this._mesh;
}

//Animate Object
Object_3DClass.prototype.animateFrame = function() {
  this._mesh.rotation.x += 0.01;
  this._mesh.rotation.y += 0.01;
}
Object_3DClass.prototype.setPosition = function(x, y, z) {
    this._mesh.position.set(x, y, z);
  }
  // END 3D object class
  //===================================================================================================




// 3D Cube class
//=====================================================================================================
function Cube() {
  this._geometry = new THREE.BoxGeometry(1, 1, 1);
  this._material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
  });
  this._mesh = new THREE.Mesh(this._geometry, this._material);
}
inheritsFrom(Cube, Object_3DClass)
  // END OF 3D Cube class
  //=====================================================================================================



// 3D JSON Model class
//=====================================================================================================
function Object_3D_JSON() {

  // instantiate a loader
  this._loader = new THREE.JSONLoader();
  this._mesh = null;


}
inheritsFrom(Object_3D_JSON, Object_3DClass);
//loadModel
Object_3D_JSON.prototype.loadModel = function(whenReady_Fn) {
    //   _geometry = this._geometry;
    var self = this;
    // load a resource
    this._loader.load(
      // resource URL
      'resources/object.json',
      // Function when resource is loaded
      function(geometry, materials) {
        console.log("loading");
        // this._material = new THREE.MultiMaterial( materials );
        self._material = new THREE.MeshBasicMaterial({
          color: 0xffffff
        });
        self._mesh = new THREE.Mesh(geometry, materials);
        self._geometry = geometry;
        whenReady_Fn();
        // scene.add( this._mesh );
      },
      //onProgress
      function() {},
      //onError
      function() {
        console.log("resource not found");
      }
    );
  }
  // END OF 3D JSON Model class
  //=====================================================================================================


// World class
//=====================================================================================================

var World = (function() {
  // World constructor
  function World(width, height) {
    //private members
    //===========================
    this._width = width;
    this._height = height;
    this._scene = new THREE.Scene();

    this._camera = new THREE.PerspectiveCamera(75, this._width / this._height, 0.1, 1000);
    this._camera.position.set(6.8, 9.5, 12.2);
    this._camera.lookAt(new THREE.Vector3(0, 0, 0));

    this._renderer = new THREE.WebGLRenderer();
    this._renderer.setSize(this._width, this._height);


    this._worldName = "Tubrines";
    this._object_3DList = [];


    return _privatePrintMessage.call(this, "message");
  }


  //public
  //===========================
  //functions
  World.prototype.AddWorldToPage = function() {
    document.body.appendChild(this._renderer.domElement);
  }

  World.prototype.render = function() {
    //zichzelf meegeven aan AnimationFrame
    requestAnimationFrame(this.render.bind(this));

    this._object_3DList[0].animateFrame();



    this._renderer.render(this._scene, this._camera);
  }

  World.prototype.addToScene = function(object_3DClass) {

    this._scene.add(object_3DClass.getMesh());
    this._object_3DList.push(object_3DClass);

  }

  World.prototype.addToSceneTemp = function() {
    _scene = this._scene;
    _object_3DList = this._object_3DList;


    //  instantiate a loader
    var loader = new THREE.JSONLoader();
    // load a resource
    loader.load(
      // resource URL
      'resources/object.json',
      // Function when resource is loaded
      function(geometry, materials) {
        // var material = new THREE.MultiMaterial( materials );
        var material = new THREE.MeshBasicMaterial({
          color: 0xff00ff
        });
        var mesh = new THREE.Mesh(geometry, material);
        _scene.add(mesh);
        _object_3DList.push(mesh);
      });
  }



  //private functions
  //===========================
  function _privatePrintMessage(message) {
    // return prefix + this._foo;
    console.log("World class: " + this._worldName + " " + message);
  }

  return World;
})();
// END OF World class
//=====================================================================================================




//create world
var myWorld = new World(500, 500);
myWorld.AddWorldToPage();


//load simple model in the world
var cube = new Cube();
myWorld.addToScene(cube);


// load json model in the world
//option 1
// myWorld.addToSceneTemp();

//option 2 OO (not working)
var jsonObject = new Object_3D_JSON();

function afterModelLoaded() {
  console.log("after loading is done");
  myWorld.addToScene(jsonObject);

}
jsonObject.loadModel(afterModelLoaded);


myWorld.render();

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8>
  <title>My first three.js app</title>
  <style>
    body {
      margin: 0;
    }
    canvas {
      width: 100%;
      height: 100%
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <script src="script.js"></script>
</body>

</html>

Answer 1

您试图传递 Material 列表而不告诉 Three.js 它是多种 Material 。

更改此行:

self._mesh = new THREE.Mesh( geometry , materials );

至:

var materialSet = new THREE.MultiMaterial( materials );
self._mesh = new THREE.Mesh( geometry , materialSet );

现在您正在使用正确的 json 提供的 Material ，您需要向场景添加灯光，否则模型中的兰伯特 Material 将不会显示。 (朗伯 Material 需要灯光，而基本 Material 不需要，这就是立方体起作用的原因)。

    this._scene = new THREE.Scene();

    var spotLight = new THREE.SpotLight( 0xffffff );
    spotLight.position.set( 100, 1000, 100 );

    spotLight.castShadow = true;

    spotLight.shadow.mapSize.width = 1024;
    spotLight.shadow.mapSize.height = 1024;

    spotLight.shadow.camera.near = 500;
    spotLight.shadow.camera.far = 4000;
    spotLight.shadow.camera.fov = 30;

    this._scene.add( spotLight );