如何解决无法在three.js中使用FBXLoader
我注意到three.js站点不包含fbx加载器代码，我一直在无休止地尝试将其合并到我的程序中（来自mixamo.com的fbx模型）。它以前与 jsm 和 import 语句一起工作，但我已经修改了我的代码以使其模块化，将我的主文件与我的场景对象分开，以便更容易使用。这样做给我带来了很多问题。 当所有代码都在一个文件（我的 main.js 文件）中时，使用 GLTF 和 FBX 的导入工作。 但是在将所有内容与多个其他 js 文件一起移动到主文件后，无法使用 import 语句。花了很长时间才解决 GLTF 错误，该错误表明构造函数不存在，或者未定义（当我在它开始时使用 THREE 和不使用 THREE 之间进行交换时）。我最终通过引用 GLTF 源的不同文件来修复它。
现在 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 文件中引用的类都不能用于HTML 正文中引用的其他 js 文件：
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);
}
}
function MainChar(scene) {
//load a model and animate it
//Todo!
this.update = function(time) {
}
}
不管我做什么，都无法调用 FBXLoader 函数。请帮忙！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。