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必須以不同的方式工作，其他一些代碼必須要更改，但我無法在線或在文檔中找到很多信息，而我所做的任何更改似乎都是讓事情變得更糟。
非常感謝你！
注意：對於凌亂的代碼抱歉 - 我意識到它效率低下，目前只是爲了使功能正常工作。我會在晚些時候清理它！