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>
相关推荐
不想有bug的小菜鸟8 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_748238639 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596010 分钟前
前端代理,解决跨域问题讲解
前端
quitv15 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238123 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星25 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架