我使用以下代码为三个.js JSONLoader加载并正常工作了多个文件：
<!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.center未定义。是什么导致了所有这些错误，我该如何修复它们？
所有我能想到的是JSONLoader和ObjectLoader必须以不同的方式工作，其他一些代码必须要更改，但我在网上或文档中找不到太多信息，而且我做的任何改变似乎都是事情变得更糟。
非常感谢!!!
注意：对于凌乱的代码感到抱歉 - 我发现它效率低下，目前只是为了让功能正常运行。我稍后会清理它！
答案 0 :(得分：0)
找到答案here：
var loader = new ObjectLoader();
loader.load('scene.js', function(object) {
scene.add(object); // load the object into your scene here
});
问题是我没有将对象作为函数参数，我没有将对象添加到场景中。我只是想使用网格/几何。不知道为什么这对于对象加载器不起作用，但它肯定不会。因此，以下代码有效：
<!DOCTYPE html>
<html>
<head>
<title>Rotating Sphere</title>
<meta charset="utf-8">
<!-- https://cdnjs.com/libraries/three.js -->
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<!-- Tween.js: https://cdnjs.com/libraries/tween.js/ -->
<script src="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.ObjectLoader();
loader.load( filePath, function(object, materials){
//var material = new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture('models/textures/ship.jpg')});
//object.mesh = new THREE.SkinnedMesh(object.geometry, new THREE.MeshFaceMaterial(materials));
//mesh.translation = THREE.GeometryUtils.center(geometry);
object.rotation.x = - (Math.PI / 2);
object.rotation.y = Math.PI;
//mesh.position.set(-1.5, 0, 0);
scene.add(object);
//object = mesh;
//animate(mesh);
});
// Load in the mesh and add it to the scene.
var loader2 = new THREE.ObjectLoader();
loader2.load( "models/Platform/Platform.json", function(object, materials){
//var material2 = new THREE.MeshLambertMaterial({color: 0x55B663});
//mesh2 = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
//mesh2.translation = THREE.GeometryUtils.center(geometry);
object.rotation.x = - (Math.PI / 2);
object.rotation.y = Math.PI;
object.scale.set(.025, .025, .025);
object.position.set(0, 1, .4);
scene.add(object);
//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("models/ConstructionManA_2/ConstructionManA_2.json");
</script>
</body>
</html>