安裝three.js:
npm install three頁面部分代碼：
<div style="width: 100%; height: 300px; position: relative;"><div style="height: 200px; background-color: white; width: 100%; position: absolute; top: 0;"><div id="threeView" style="width: 100%; height: 200px; background-color: #f1f1f1; position: absolute; bottom: 0;"></div>
</div>js部分代碼：
initThree(){console.log('打印場景API',THREE.Scene)scene=new THREE.Scene();var ambient = new THREE.AmbientLight(0xffffff,5);scene.add(ambient) //添加環境光var width = window.innerWidthvar height = 300var k = width/height;camera = new THREE.PerspectiveCamera(45,k,1,1000);camera.position.set(0,0,20);camera.lookAt(new THREE.Vector3(0, 0, 0));renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize(width, height);renderer.setClearColor(0XECF1F3, 0);const element = document.getElementById('threeView');element.appendChild(renderer.domElement);renderer.render(scene, camera);this.animate();},createControls() {controls = new OrbitControls(camera, renderer.domElement)controls.enableZoom = true;},// 修改為僅使用STLLoader加載模型的方法loadSTLModel() {let loader = new GLTFLoader();loader.load('scene.gltf', function(gltf) {// 使用加載的幾何體創建材質和網格console.log(loader)// const material = new THREE.MeshPhongMaterial({// color: 0xffffff// });// const mesh = new THREE.Mesh(geometry, material);const mesh = gltf.scene;scene.add(mesh);const rotationXDegrees = -90 // 模型沿X軸旋轉45度const rotationXRadians = THREE.MathUtils.degToRad(rotationXDegrees);mesh.rotation.y = rotationXRadians;// 添加模型到場景scene.add(mesh);// 調整模型大小mesh.scale.set(3, 3, 3);// 設置模型位置mesh.position.set(0, 0, 0);const animations = gltf.animations;if (animations && animations.length > 0) {// 創建一個動畫混合器this.mixer = new THREE.AnimationMixer(mesh);// 查找你想播放的動畫，例如假設第一個動畫是開門動畫const animationAction = this.mixer.clipAction(animations[0]);this.start=this.mixer.clipAction(animations[0]);animationAction.stop(); // 默認播放動畫}}.bind(this));}部分效果圖：
