在 three.js 中加载 JSON 对象后对其进行操作

Question

我是 Javascript 的新手，甚至是 Three.JS 的新手。我已经成功获取了一个 obj 并进行了转换，然后通过 three.js THREE.JSONLoader 将其作为 JSON 对象加载到我的站点中。它显示得很好，但我需要能够像任何其他 THREE.Mesh 对象一样旋转、动画和操纵它。我的第一次尝试是像the first three.js tutorial 中的立方体一样旋转和动画它（网椅）。但是，在加载对象并尝试在“animate()”函数中旋转它之后，我设置的变量“myChair”在写入时会产生“未定义”错误：

myChair.rotation.x += 0.1;

我认为对于three.js，我必须采取另一个步骤才能像对待任何THREE.Mesh 对象一样对待这个JSON？

这是我的代码：

viewport = document.getElementById('mycanvas');
h = viewport.offsetHeight;
w = viewport.offsetWidth;
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
var camera = new THREE.PerspectiveCamera( 75, w/h, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize(w, h);
viewport.appendChild(renderer.domElement);

//end viewport

var myChair = new THREE.JSONLoader();
myChair.load(
	'https://api.myjson.com/bins/iaxn7',
	function ( geometry, materials ) {
		var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
		var object = new THREE.Mesh( geometry, material );
		scene.add(object);
	}
);

alert(myChair); //this alert confirms that an object is stored in the variable 

var animate = function () {
  requestAnimationFrame( animate );

  myChair.rotation.x += 0.1;
  myChair.rotation.y += 0.1;

  renderer.render(scene, camera);
};

animate();

非常感谢！任何帮助深表感谢。

更新：在 Marco 回复之后。

 var myChairLoader = new THREE.JSONLoader();
 var chairMesh = null;

myChairLoader.load(
	'https://api.myjson.com/bins/iaxn7',
	function ( geometry, materials ) {
		var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
		var chairMesh = new THREE.Mesh(geometry,material);
		scene.add(chairMesh);
    renderer.render(scene,camera);
	}
);

var animate = function (){
  requestAnimationFrame(animate);

  if(chairMesh !== null){
    alert();
    chairMesh.rotation.x += 0.1;
    chairMesh.rotation.y += 0.1;
  }
  renderer.render(scene,camera);
};

animate();

Answer 1

您正在尝试为myChair 设置动画，这是一个THREE.JSONLoader 对象，无法设置动画。您应该为已添加到场景中的名为 object 的网格设置动画。我建议您将代码更改为以下内容：

var chairLoader = new THREE.JSONLoader();

// 1: Will remain null until the JSON file is loaded
var chairMesh = null;

chairLoader.load(
    'https://api.myjson.com/bins/iaxn7',
    function ( geometry, materials ) {
        var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );

        // 2: Once JSON is loaded, we use the variable from above, and turn it into a Mesh.
        chairMesh = new THREE.Mesh( geometry, material );

        // 3: Now we add it to the scene
        scene.add(chairMesh);
    }
);

alert(chairLoader); //this is not the chair you want to animate. This is its loader.

var animate = function () {
    requestAnimationFrame( animate );

    // 4: Will animate chairMesh only after the JSON has been loaded.
    if(chairMesh !== null){
        chairMesh.rotation.x += 0.1;
        chairMesh.rotation.y += 0.1;
    }

    renderer.render(scene, camera);
};

注意chairMesh 变量。这就是您想要制作动画并添加到场景中的那个。

旁注：你不应该使用 object 作为变量名，因为这已经是 JavaScript 对象的保留关键字，并且可能导致混淆......例如，使用名为 string 的变量可能非常令人困惑。