threejs 笔记 vue ----基础创建一个几何体

最新推荐文章于 2025-04-24 18:17:42 发布

原创最新推荐文章于 2025-04-24 18:17:42 发布 · 475 阅读

0 ·

CC 4.0 BY-SA版权

vue专栏专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用Three.js实现基础3D几何体创建、相机控制、光照设置，并演示了物体动画和控制器的使用。适合初学者理解Three.js在前端开发中的应用。

1.安装threejs

npm install --save three 安装

import * as THREE from "three" 引入.vue组件中

2.简单案例---创建一个简单几何体

<style scoped>
  #container {
    width: 100%;
    height: 100%;
  }
</style>
<template>
  <div id="container"></div>
</template>
<script>
  import * as THREE from "three";
export default {
    name: "three3D",
    mounted() {
     this.init();
      this.$nextTick(()=>{
        let _this = this;
        // console.log(this.container.clientWidth);
        this.clientWidth = this.container.clientWidth;
        // onresize 事件会在窗口被调整大小时发生
        window.addEventListener('resize',function(){
          // 重置渲染器输出画布canvas尺寸
          _this.renderer.setSize(_this.container.clientWidth,_this.container.clientHeight);
         //执行updateProjectionMatrix ()方法更新相机的投影矩阵
          _this.camera.updateProjectionMatrix ();
          // location.reload()// 刷新页面
        });
      });
    }
beforeDestroy(){
      this.scene = null;// 场景对象
      this.mesh = null;// 物体对象
      this.camera = null;// 摄像机对象
      this.renderer = null;// 渲染器对象
      this.container = null;// 容器
       //     清除所有定时、延时器
      for(let i = 0 ;i< this.timeOutList.length;i++){
        clearTimeout(this.timeOutList[i]);
      }
      for(let i = 0 ;i< this.intervalList.length;i++){
        clearInterval(this.intervalList[i]);
      }
    },
methods: {
 init() {
        this.camera = null;// 相机
        this.scene = null;
        this.mesh = null;
        this.renderer = null;// 渲染器
        this.container = null;// 容器
        //  创建场景对象Scene
        this.scene = new THREE.Scene();
        this.createGeometry();// 创建物体模型
        this.createPoint();// 创建光源
        this.createCamera();// 创建相机
        this.createRenderer();// 创建渲染器
  }，
 createGeometry(){// 创建模型
        let geometry = new THREE.BoxGeometry(10, 15, 15); // 几何体
        let material = new THREE.MeshLambertMaterial({color: 0xdedede}); //材质
        this.mesh = new THREE.Mesh(geometry, material); // 生成网格
        this.scene.add(this.mesh);
      },
createPoint(){// 创建光源
        // 环境光
        let light = new THREE.AmbientLight(0x555555);
        this.scene.add(light);
        // 平行光
        const directionalLight = new THREE.DirectionalLight( 0xffffff, 1.1 );// 平行光，颜色为白色，强度为1
        directionalLight.position.set(35, 45, 40); // 设置光源位置
      },
 createCamera(){// 创建相机
        this.container = document.getElementById("container");
        this.camera = new THREE.PerspectiveCamera(55, this.container.clientWidth / this.container.clientHeight,0.1,2000);
        this.camera.position.set(40, 90, 180);//设置相机位置
        this.camera.lookAt(this.scene.position);//设置相机方向(指向的场景对象)
      },
createRenderer(){//创建渲染器对象
        this.renderer = new THREE.WebGLRenderer({ antialias: true});// 声明渲染器，antialias - 是否执行抗锯齿。默认为false.
        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);// 设置渲染器大小
        // const pixelRatio = window.devicePixelRatio < 1.5 ? 1.5 : window.devicePixelRatio;
        // this.renderer.setPixelRatio (pixelRatio);// 设置设备像素比。通常用于避免HiDPI设备上绘图模糊
        this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        this.container.appendChild(this.renderer.domElement);// 把渲染器添加到容器中
        this.renderer.render(this.scene, this.camera);// 执行渲染操作 
      },
   
 }
}
</script>

以上是最基础的一个使用，创建一个三维立体模型，在vue中使用threejs 声明变量时不要在data（）return里声明，当创建的模型多了之后，页面的渲染会很卡，这是重点，以上代码内是使用threejs的几个关键元素，包括了场景、光源、物体、相机、渲染器，也是threejs的最小组成单位，其他的都在其基础上扩展你的需求

3.控制物体让其动起来

首先需要导入 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; 控制类

在上面init方法内声明控制器对象 this.controls = null;然后创建控制器 this.createControls();

createControls(){//创建控件对象
        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
        this.controls.update();// 更新控制器。必须在摄像机的变换发生任何手动改变后调用， 或如果.autoRotate或.enableDamping被设置时，在update循环里调用。
this.controls.addEventListener('change', this.animate);//监听鼠标、键盘事件
      },

`这样我们就可以通过鼠标控制物体渲染、缩放等

4.给物体添加旋转动画，让其自动转动

在上面init方法内添加 this.request = null; 然后创建动画this.animate()

animate() {// 动画
        this.request = requestAnimationFrame(this.animate);// 如果使用了监听 自动旋转动画不能同时存在
        this.controls.update();// 如果autoRotate或.enableDamping被启用，必须在动画循环里调用.update(),否则自动旋转无效
        this.renderer.render(this.scene, this.camera);
      },

同时把创建控制器时的监听事件注释掉，他们不能同时存在，如下操作

 // this.controls.addEventListener('change', this.animate);//监听鼠标、键盘事件

更多的方法属性，参考官方文档https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene