Three.js 如果不支持纹理和颜色，如何显示fbx模型？
我需要在我的网站上插入一个三维模型。 我有FBX模型。 当我用three.js插入它们时，它们不会显示，而且控制台中有很多错误 我如何解决这个问题？ 示例页面是。 我的代码是Three.js 如果不支持纹理和颜色，如何显示fbx模型？,three.js,fbx,Three.js,Fbx,我需要在我的网站上插入一个三维模型。 我有FBX模型。 当我用three.js插入它们时，它们不会显示，而且控制台中有很多错误 我如何解决这个问题？ 示例页面是。 我的代码是 <!DOCTYPE html> -FBX装载机 角色与动画 将*作为三个源导入'https://unpkg.com/three@0.119.0/build/three.module.js'； 从导入统计信息'https://cdnjs.cloudflare.com/ajax/libs/stats.js
<!DOCTYPE html>
-FBX装载机
角色与动画
将*作为三个源导入'https://unpkg.com/three@0.119.0/build/three.module.js'；
从导入统计信息'https://cdnjs.cloudflare.com/ajax/libs/stats.js/r17/Stats.min.js';
从导入{OrbitControls}https://unpkg.com/three@0.119.0/examples/jsm/controls/OrbitControls.js'；
从导入{FBXLoader}https://cdn.jsdelivr.net/npm/three@0.117.1/examples/jsm/loaders/FBXLoader.js'；
让摄影机、场景、渲染器、统计信息；
常数时钟=新的三个时钟（）；
让混合器；
init（）；
制作动画（）；
函数init（）{
const container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，12000）；
摄像机位置设置（100200300）；
场景=新的三个。场景（）；
scene.background=新的三种颜色（0xA0）；
scene.fog=新的3.fog（0xA02001000）；
恒半球光=新的三个半球光（0xffffff，0x4444）；
半光。位置。设置（0，200，0）；
场景。添加（半光）；
const dirLight=新的三方向光（0xffffff）；
dirLight.position.set（0，200，100）；
dirLight.castShadow=true；
dirLight.shadow.camera.top=180；
dirLight.shadow.camera.bottom=-100；
dirLight.shadow.camera.left=-120；
dirLight.shadow.camera.right=120；
场景。添加（dirLight）；
//添加（新的3.CameraHelper（dirLight.shadow.camera））；
//地面
const mesh=new THREE.mesh（new THREE.PlaneBufferGeometry（20002000），new THREE.MeshPhongMaterial（{color:0x999999，depthWrite:false}））；
mesh.rotation.x=-Math.PI/2；
mesh.receiveShadow=true；
场景。添加（网格）；
const grid=new THREE.GridHelper（2000,20,0x000000,0x000000）；
grid.material.opacity=0.2；
grid.material.transparent=true；
场景.添加（网格）；
//模型
const loader=新的FBXLoader（）；
loader.load（'http://izgt-wp.tw1.ru/wp/wp-content/uploads/2020/11/Header.fbx，函数（对象）{
混合器=新的三个。动画混合器（对象）；
const action=mixer.clipAction（object.animations[0]）；
动作。游戏（）；
遍历（函数（子对象）{
if（child.isMesh）{
child.castShadow=true；
child.receiveShadow=true；
}
} );
场景。添加（对象）；
} );
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.shadowMap.enabled=true；
container.appendChild（renderer.doElement）；
常量控件=新的轨道控件（摄影机、渲染器.doElement）；
控制.target.set（0,100,0）；
控件更新（）；
addEventListener（'resize'，onWindowResize，false）；
//统计数据
统计数据=新统计数据（）；
container.appendChild（stats.dom）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
//
函数animate（）{
请求动画帧（动画）；
const delta=clock.getDelta（）；
if（mixer）mixer.update（delta）；
渲染器。渲染（场景、摄影机）；
stats.update（）；
}
<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - FBXLoader<br />
Character and animation from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">Mixamo</a>
</div>
<script type="module">
import * as THREE from 'https://unpkg.com/three@0.119.0/build/three.module.js';
import Stats from 'https://cdnjs.cloudflare.com/ajax/libs/stats.js/r17/Stats.min.js';
import { OrbitControls } from 'https://unpkg.com/three@0.119.0/examples/jsm/controls/OrbitControls.js';
import { FBXLoader } from 'https://cdn.jsdelivr.net/npm/three@0.117.1/examples/jsm/loaders/FBXLoader.js';
let camera, scene, renderer, stats;
const clock = new THREE.Clock();
let mixer;
init();
animate();
function init() {
const container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 100, 200, 300 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa0a0a0 );
scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 200, 0 );
scene.add( hemiLight );
const dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 0, 200, 100 );
dirLight.castShadow = true;
dirLight.shadow.camera.top = 180;
dirLight.shadow.camera.bottom = - 100;
dirLight.shadow.camera.left = - 120;
dirLight.shadow.camera.right = 120;
scene.add( dirLight );
// scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
// ground
const mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );
const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
// model
const loader = new FBXLoader();
loader.load( 'http://izgt-wp.tw1.ru/wp/wp-content/uploads/2020/11/Header.fbx', function ( object ) {
mixer = new THREE.AnimationMixer( object );
const action = mixer.clipAction( object.animations[ 0 ] );
action.play();
object.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = true;
}
} );
scene.add( object );
} );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
container.appendChild( renderer.domElement );
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 100, 0 );
controls.update();
window.addEventListener( 'resize', onWindowResize, false );
// stats
stats = new Stats();
container.appendChild( stats.dom );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
const delta = clock.getDelta();
if ( mixer ) mixer.update( delta );
renderer.render( scene, camera );
stats.update();
}
</script>
</body>