threejs 渲染循环动画

threejs项目开发中，我们需要一些运动效果，比如这里我们让模型围绕y轴进行旋转。

动态效果

threejs版本

"three": "^0.154.0",

实例演示地址

threejs 渲染循环动画

让模型旋转

我们可以通过rotateY让模型围绕y轴进行渲染

mesh1.rotateY(0.01)

循环动画

我们通过requestAnimationFrame来让模型进行旋转

requestAnimationFrame 是一个浏览器提供的 JavaScript 方法，用于优化动画的性能。它会在浏览器下一次重绘之前调用指定的函数，从而使动画在刷新率（通常为每秒 60 次）下更加流畅。

这里我们让模型旋转0.01然后拍一个照，然后再旋转在拍照，就形成了一个连续的动画效果。

// 渲染
const animate = function () {
    requestAnimationFrame(animate);
    mesh1.rotateY(0.01)
    renderer.render(scene, camera);
};

animate();

实例代码

<template>
  <div class="rendererDom" ref="rendererDom"/>
</template>

<script>
import {onMounted, onUnmounted, ref} from 'vue';
import * as THREE from 'three';

export default {
  setup() {
    const rendererDom = ref(null);

    onMounted(() => {
      // 创建场景
      const scene = new THREE.Scene();

      /**
       * 创建网格模型
       */
          // 立方体网格模型
      var geometry1 = new THREE.BoxGeometry(100, 100, 100);
      var material1 = new THREE.MeshLambertMaterial({
        color: 0x0000ff
      }); //材质对象Material
      var mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh
      scene.add(mesh1); //网格模型添加到场景中

// 创建光源
      const point = new THREE.PointLight(0xffffff);
      point.position.set(400, 200, 300);
      scene.add(point);

      const ambient = new THREE.AmbientLight(0x444444);
      scene.add(ambient);

      /**
       * 相机设置
       */
      var width = rendererDom.value.clientWidth; //窗口宽度
      var height = rendererDom.value.clientHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var near = 1
      var far = 1000
      var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      // var s = 90;//渲染范围更小，立方体占据屏幕cavnas画布比例更大，超出渲染范围的球体被剪裁掉
      //创建相机对象
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, near, far);
      camera.position.set(200, 300, 200); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(rendererDom.value.clientWidth, rendererDom.value.clientHeight);
      renderer.setClearColor(0xb9d3ff, 1);
      rendererDom.value.appendChild(renderer.domElement);

      // 渲染
      const animate = function () {
        requestAnimationFrame(animate);
        mesh1.rotateY(0.01)
        renderer.render(scene, camera);
      };

      animate();

      // 创建一个 ResizeObserver 实例并监听 rendererDom 的尺寸变化
      const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
          renderer.setSize(entry.contentRect.width, entry.contentRect.height);
          camera.aspect = entry.contentRect.width / entry.contentRect.height;
          camera.updateProjectionMatrix();
        }
      });
      resizeObserver.observe(rendererDom.value);

      onUnmounted(() => {
        if (rendererDom.value instanceof Element) {
          resizeObserver.unobserve(rendererDom.value);
        }
        rendererDom.value = null;
      });
    });

    return {rendererDom};
  },
};
</script>

<style lang="scss">
.rendererDom {
  width: 100%;
  height: 100%;
  position: fixed;
}
</style>

视频教程地址

今天学习视频教程《WebGL/Three.js前端高薪3D可视化》-大屏3D地图可视化-渲染循环和相机控件OrbitControls

地图Web3D可视化-WebGL/Three.js 课程介绍

实例代码下载

当前学习笔记演示实例代码

项目运行环境 vue3 vite js nodejs 14