我注意到three.js 站点不包含fbx 加载器代码，我一直在不断尝试将其合并到我的程序中（来自mixamo.com 的fbx 模型）。它以前与 jsm 和 import 语句一起使用，但我已经更改了我的代码以使其模块化，将我的主文件与我的场景对象分开，以便更容易使用。这样做给我带来了很多问题。当所有内容的代码都在一个文件（我的 main.js 文件）中时，使用 GLTF 和 FBX 的导入就可以了。但是在将所有内容与多个其他 js 文件一起移动到主文件后，导入语句无法使用。花了很长时间来解决 GLTF 错误，它表明构造函数不存在，或者没有定义（当我在它开始时使用 THREE 和未定义时）。
现在 FBX 代码也出现了同样的错误，我引用的所有来源都不起作用。我不知道要使用什么链接。
这是我的 index.html，注释是我放置 fbx 代码的地方：
<!-- This html file is what the browser shows when we
run index.js on port 5000. Therefore our display of our game-->
<!DOCTYPE html>
<html>
<head>
<title>Aftermath</title>
<!-- SCRIPTS-->
<!--Loads three.js into our game-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.js"> </script>
<!--Loads orbit controls around player-->
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<!--Loads gltf files (our blender files)-->
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<!--Lets us load models in fbx format-->
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="base.css">
</head>
<body>
<!--Use js file for the main js code-->
<!-- <script src="./js/main.js" type="module"></script>-->
<!-- <script src="./js/test.js" type="module"></script>-->
<canvas id="canvas"></canvas>
<!--Lighting scripts-->
<script src="./js/sceneSubjects/GeneralLights.js" ></script>
<!--add models to scene-->
<!--Subject (model) scripts-->
<script src="./js/sceneSubjects/House.js" ></script>
<script src="./js/sceneSubjects/MainChar.js" ></script>
<script src="./js/sceneSubjects/SceneSubject.js" ></script>
<!--Load the scene manager-->
<script src="./js/SceneManager.js" ></script>
<!--Load our main.js function-->
<script src="./js/main2.js" type="module"></script>
</body>
</html>
这是我的 main.js 文件（称为 main2.js），我将在其中放置 import 语句，但是由于以这种方式引用它们，因此仅在 main.js 文件中引用的类都不能在其他 js 中使用HTML 正文中引用的文件：
const canvas = document.getElementById("canvas");
const sceneManager = new SceneManager(canvas);
bindEventListeners();
render();
function bindEventListeners() {
window.onresize = resizeCanvas;
resizeCanvas();
}
function resizeCanvas() {
canvas.style.width = '100%';
canvas.style.height= '100%';
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
sceneManager.onWindowResize();
}
function render() {
requestAnimationFrame(render);
sceneManager.update();
}
这是我用较小的对象渲染整个场景的 js 文件：
function SceneManager(canvas) {
//this creates a scene where you can add as many items as you want to it (e.g. we can create the house and add as
//many items as we want to the house)
const clock = new THREE.Clock();
const screenDimensions = {
width: canvas.width,
height: canvas.height
}
//the essentials for rendering a scene
const scene = buildScene();
const renderer = buildRender(screenDimensions);
const camera = buildCamera(screenDimensions);
const sceneSubjects = createSceneSubjects(scene);
//allow camera to orbit target (player)
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 20, 0);
controls.update();
//this function creates our scene
function buildScene() {
//create a new scene
const scene = new THREE.Scene();
//set the scene's background-> in this case it is our skybox
const loader = new THREE.CubeTextureLoader();
//it uses different textures per face of cube
const texture = loader.load([
'../skybox/House/posx.jpg',
'../skybox/House/negx.jpg',
'../skybox/House/posy.jpg',
'../skybox/House/negy.jpg',
'../skybox/House/posz.jpg',
'../skybox/House/negz.jpg'
]);
scene.background = texture;
//if we wanted it to be a colour, it would have been this commented code:
//scene.background = new THREE.Color("#000");
return scene;
}
//this creates a renderer for us
function buildRender({ width, height }) {
const renderer = new THREE.WebGLRenderer({canvas: canvas,
antialias: true,alpha: true
});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
return renderer;
}
//create a camera for the screen
function buildCamera({ width, height }) {
//SETTING FIELD OF VIEW, ASPECT RATIO (which should generally be width/ height), NEAR AND FAR (anything outside near/ far is clipped)
const aspectRatio = width / height;
const fieldOfView = 60;
const nearPlane = 1;
const farPlane = 1000;
//there are 2 types of cameras: orthographic and perspective- we will use perspective (more realistic)
const camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane);
//set where the camera is
camera.position.set(0, 10, 0);
return camera;
}
//add subjects to the scene
function createSceneSubjects(scene) {
const sceneSubjects = [
//these come from te js folder sceneSubjects. If you want to add more subjects do the following:
//reference the file in index.html, create a file and code it in sceneSubjects, and then reference it here
//here we added a light to the scene and then the subject. If we didn't have a light, we wouldn't be able to see the subject
//add it in the order of rendering
new GeneralLights(scene),
new House(scene),
new MainChar(scene),
//this is just an example, can remove it and replace with our char
new SceneSubject(scene)
];
return sceneSubjects;
}
//this updates the subject/model every frame
this.update = function() {
const elapsedTime = clock.getElapsedTime();
for(let i=0; i<sceneSubjects.length; i++)
sceneSubjects[i].update(elapsedTime);
//update orbit controls
controls.update();
renderer.render(scene, camera);
}
this.onWindowResize = function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
}
我想在这个 js 文件中加载一个 FBX 模型：
function MainChar(scene) {
//load a model and animate it
//TODO!
this.update = function(time) {
}
}
尽管我做了什么，但无法调用 FBXLoader 函数。请帮忙！