vue2中使用three.js步骤

1.使用npm 下载依赖这里以0.158.0版本为例

npm install three@0.158.0 --save

2.

<template><div id="container"></div>
</template><script>
import * as THREE from 'three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';export default {name: 'ThreeJsModelLoader',mounted() {const container = document.getElementById('container');const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 0.1, 1000);camera.position.set(7, 7, 7)const renderer = new THREE.WebGLRenderer({alpha: true,//渲染器透明antialias: true,//抗锯齿precision: 'highp',//着色器开启高精度});//开启HiDPI设置renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(container.offsetWidth, container.offsetHeight);container.appendChild(renderer.domElement);renderer.setClearColor(0xffffff);// // 光源强度const ambientLight = new THREE.AmbientLight(0xffffff,2);// pointLight.position.set(0, 0, 0);scene.add(ambientLight);// 平行光源const directionalLight = new THREE.DirectionalLight(0xffffff,2);scene.add(directionalLight);// 创建控件const controls = new OrbitControls(camera, renderer.domElement);const objLoader = new OBJLoader();const mtlLoader = new MTLLoader();const loader = new GLTFLoader();const fbxloader = new FBXLoader();const dracoLoader = new DRACOLoader();//压缩模型// 加载材质和OBJ模型// mtlLoader.load('/static/model/objvs.mtl', (materials) => {//   materials.preload();//   objLoader.setMaterials(materials).load('/static/model/dvg.obj', (object) => {//     scene.add(object);//     animate();//   });// });// 加载材质和glb模型// loader.load('/static/model/glbmodel.glb', function (gltf) {//   // 获取模型的尺寸//   const box = new THREE.Box3().setFromObject(gltf.scene);//   const size = box.getSize(new THREE.Vector3()).length();//   // 设置模型到单位球体大小//   const scaleFactor = 20 / size;//   gltf.scene.scale.set(scaleFactor, scaleFactor, scaleFactor);//   scene.add(gltf.scene);//   animate();// }, undefined, function (err) {//   console.error('失败了啊', err);// });// 配置Draco解码路径dracoLoader.setDecoderPath('three/examples/jsm/libs/draco/');dracoLoader.setDecoderConfig({ type: 'js' });loader.setDRACOLoader(dracoLoader);//加载fbx模型fbxloader.load('/static/model/family.fbx', (object) => {//  获取模型的尺寸const box = new THREE.Box3().setFromObject(object);const size = box.getSize(new THREE.Vector3()).length();// 设置模型到单位球体大小const scaleFactor = 10 / size;object.scale.set(scaleFactor, scaleFactor, scaleFactor);scene.add(object); // 将模型添加到场景中animate();});function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);controls.update(); // 更新控件状态}}
}
</script><style>
#container {width: 100vw;height: 100vh;
}
</style>