vue2中使用three.js步骤

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

javascript 复制代码

npm install three@0.158.0 --save

html 复制代码

<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>