Javascript 无法在three.js中使用FBXLoader
我注意到three.js站点不包含fbx加载程序代码，我一直在尝试将其合并到我的程序中（mixamo.com上的fbx模型）。它以前使用jsm和import语句，但我修改了代码使其模块化，将主文件与场景对象分离，以便更容易使用。这样做给我带来了很多问题。 当所有内容的代码都在一个文件（my main.js文件）中时，使用GLTF和FBX导入是可行的。 但在将所有内容与多个其他js文件一起移动到主文件后，无法使用import语句。整理GLTF错误花了很长时间，它表明构造函数不存在，或者它没有定义（当我在开始时使用三个，而不是三个之间切换时）。我最终通过为GLTF源引用不同的文件来修复它 现在FBX代码也出现了同样的错误，我引用的所有源代码都不起作用。我不知道该使用什么链接 这是我的index.html，其中的注释是我将要放置fbx代码的地方：Javascript 无法在three.js中使用FBXLoader,javascript,three.js,fbx,mixamo,Javascript,Three.js,Fbx,Mixamo,我注意到three.js站点不包含fbx加载程序代码，我一直在尝试将其合并到我的程序中（mixamo.com上的fbx模型）。它以前使用jsm和import语句，但我修改了代码使其模块化，将主文件与场景对象分离，以便更容易使用。这样做给我带来了很多问题。 当所有内容的代码都在一个文件（my main.js文件）中时，使用GLTF和FBX导入是可行的。 但在将所有内容与多个其他js文件一起移动到主文件后，无法使用import语句。整理GLTF错误花了很长时间，它表明构造函数不存在，或者它没有定义（
<!-- 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>
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 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) {
}
}