0
は、私は複数のファイルをロードし、three.js JSONLoaderため、次のコードを使用して正しく動作していた：私は上記のロードしようとしています二つのモデルで、three.js JSONLoaderをObjectLoaderに変換するにはどうすればよいですか？
<!DOCTYPE html>
<html>
<head>
<title>Rotating Sphere</title>
<meta charset="utf-8">
<!-- https://cdnjs.com/libraries/three.js -->
<script src="http://www.amdesigngroup.com/clients/AM_6292_Learning/js/three.min.js"></script>
<script src="http://www.amdesigngroup.com/clients/AM_6292_Learning/js/OrbitControls.js"></script>
<!-- Tween.js: https://cdnjs.com/libraries/tween.js/ -->
<script src="http://www.amdesigngroup.com/clients/AM_6292_Learning/js/Tween.js"></script>
</head>
<body style="margin: 0; background-color:#6cdbf5;">
<div class="canvas-wrapper">
<canvas id="mycanvas">
</canvas>
</div>
<script>
function createObject(filePath) {
// Set up the scene, camera, and renderer as global variables.
var canvas = null,
scene = null,
camera = null,
renderer = null,
mesh = null,
mesh2 = null,
object = null;
init();
run();
// Sets up the scene.
function init() {
// Get canvas
canvas = document.getElementById("mycanvas");
// Create the scene and set the scene size.
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
// Create a renderer and add it to the DOM.
renderer = new THREE.WebGLRenderer({antialias:true, alpha:true, canvas:canvas});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
// Create a camera, zoom it out from the model a bit, and add it to the scene.
camera = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT, 0.1, 20000);
camera.position.set(0,6,0);
camera.lookAt(scene.position);
scene.add(camera);
// Create an event listener that resizes the renderer with the browser window.
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH/HEIGHT;
camera.updateProjectionMatrix();
});
// Set the background color of the scene to transparent
//renderer.setClearColor(0x000000, 0);
// Create a light, set its position, and add it to the scene.
var light = new THREE.PointLight(0xffffff);
light.position.set(0,0,-100);
scene.add(light);
// Load in the mesh and add it to the scene.
var loader = new THREE.JSONLoader();
loader.load(filePath, function(geometry, materials){
var material = new THREE.MeshLambertMaterial({color: 0x55B663});
mesh = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
mesh.translation = THREE.GeometryUtils.center(geometry);
mesh.rotation.x = - (Math.PI/2);
mesh.position.set(-1.5, 0, 0);
scene.add(mesh);
object = mesh;
//animate(mesh);
});
// Load in the mesh and add it to the scene.
var loader2 = new THREE.JSONLoader();
loader2.load("http://www.amdesigngroup.com/clients/AM_6292_Learning/models/ConstructionManA_2/ConstructionManA_2.json", function(geometry, materials){
var material2 = new THREE.MeshLambertMaterial({color: 0x55B663});
mesh2 = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
mesh2.translation = THREE.GeometryUtils.center(geometry);
mesh2.rotation.x = - (Math.PI/2);
//mesh2.scale.set(.65, .65, .65);
mesh2.position.set(1.5, 0, 0);
scene.add(mesh2);
//animate(mesh2);
});
// Add OrbitControls so that we can pan around with the mouse.
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
/* rotate mesh */
function animate(mesh) {
var tween = new TWEEN.Tween(mesh.rotation)
.to({ z: "-" + Math.PI/2}, 2500) // relative animation
.onComplete(function() {
// Check that the full 360 degrees of rotation,
// and calculate the remainder of the division to avoid overflow.
if (Math.abs(mesh.rotation.z)>=2*Math.PI) {
mesh.rotation.y = mesh.rotation.z % (2*Math.PI);
}
})
.start();
tween.repeat(Infinity)
}
// Renders the scene and updates the render as needed.
function run() {
// Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
requestAnimationFrame(run);
TWEEN.update();
// Render the scene.
renderer.render(scene, camera);
controls.update();
}
//document.addEventListener('mousedown', onMouseDown, false);
function onMouseDown(e) {
var vectorMouse = new THREE.Vector3(//vector from camera to mouse
-(window.innerWidth/2-e.clientX)*2/window.innerWidth,
(window.innerHeight/2-e.clientY)*2/window.innerHeight,
-1/Math.tan(22.5*Math.PI/180)); //22.5 is half of camera frustum angle 45 degree
vectorMouse.applyQuaternion(camera.quaternion);
vectorMouse.normalize();
var vectorObject = new THREE.Vector3(); //vector from camera to object
vectorObject.set(object.x - camera.position.x,
object.y - camera.position.y,
object.z - camera.position.z);
vectorObject.normalize();
if (vectorMouse.angleTo(vectorObject)*180/Math.PI < 1) {
//mouse's position is near object's position
console.log("click");
}
}
}
createObject("http://www.amdesigngroup.com/clients/AM_6292_Learning/models/Platform/Platform.json");
</script>
</body>
</html>しかし、それは私を伝えます代わりにObjectLoaderを使用してください。私はObjectLoaderに切り替えようとしましたが、GeometryUtils.centerに関するエラーが発生し、新しいGeometry.center（）構文を使用するとさらに致命的なエラーが発生します。私はまた、aは未定義でa.centerは未定義であるというエラーを得る。これらのエラーの原因は何ですか？どのように修正できますか？
JSONLoaderとObjectLoaderは別々に動作しなければならず、他のコードの一部を変更する必要がありますが、オンラインやドキュメントで多くの情報を見つけることはできません。物事を悪化させる。
ありがとうございました！
注：おかしなコードは申し訳ありません。非効率的であることを認識しています。現時点では機能が動作するだけです。私は後でそれを掃除します！問題は、私は関数の引数としてオブジェクトを取得していなかった、と私はシーンにオブジェクトを追加することはなかったでした
var loader = new ObjectLoader();
loader.load('scene.js', function(object) {
scene.add(object); // load the object into your scene here
});：