1台舱、引入three模塊律杠，npm install three --save
2潭流、把模塊加載到你加載FBX文件的js中
????????import * as THREE from '../build/three.module.js';
????????import { OrbitControls } from './jsm/controls/OrbitControls.js';
????????import { FBXLoader } from './jsm/loaders/FBXLoader.js';
3、創(chuàng)建容器柜去、相機灰嫉、場景、燈光嗓奢、加載模型讼撒、動畫、渲染
//容器
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 );//霧化
//燈光
light = new THREE.HemisphereLight( 0xffffff, 0x444444 );//沒有光線股耽，將啥也看不到
light.position.set( 0, 200, 0 );
scene.add( light );
?// model 模型
var loader = new FBXLoader();
loader.load( 'models/fbx/ball.fbx', function ( object ) {
//獲取動畫
mixer = new THREE.AnimationMixer( object );
var 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 );
controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 100, 0 );
controls.update();
4根盒、最后注意的有兩點，1物蝙、代碼要跑在服務器中炎滞；2、引入的文件需要放在最外層的public文件夾中
