vue2中使用three.js步骤
1.使用npm 下载依赖这里以0.158.0版本为例
npm install three@0.158.0 --save2.
<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>