简介

本系列教程需要具备threejs的基础入门知识，了场景、几何体、相机等基础概念。

使用threejs的基础知识，可以很快的开发一个3D页面。

其核心代码如下：

xml 复制代码

<template>
  <div class="wrap" ref="threeContainer"></div>
</template>

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

const threeContainer = ref(null);

// 1、创建3D场景对象Scene
const scene = new THREE.Scene();
// 添加网格地面
const gridHelper = new THREE.GridHelper(200, 10);
scene.add(gridHelper);

// 2、创建几何体Geometry模型
const geometry = new THREE.BoxGeometry(20, 20, 20);
const material = new THREE.MeshBasicMaterial({
  color: "blue",
});
const mesh = new THREE.Mesh(geometry, material);
// 设置模型mesh的xyz坐标
mesh.position.set(0, 40, 0);
scene.add(mesh);

// 3、使用虚拟相机观察模型
const camera = new THREE.PerspectiveCamera();
camera.position.set(0, 50, 200);
camera.lookAt(0, 0, 20); //坐标原点

// 4、渲染3D场景到DOM上
const width = 800; //宽度
const height = 500; //高度
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
// 动画
renderer.setAnimationLoop(animation);
function animation() {
  mesh.rotation.x += 0.05;
  mesh.rotation.y += 0.05;
  renderer.render(scene, camera);
}

onMounted(() => {
  threeContainer.value.appendChild(renderer.domElement);
});
</script>

<style scoped></style>

什么是轨道控制器

Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。

简单拉来说，使用轨道控制器可以让我们的3D场景具备如下功能：

使用鼠标左键旋转物体改变观察视角
使用鼠标滚轮缩放视图
使用右键平移视

OrbitControls API

官方API地址：threejs.org/docs/index....

语法简介

要使用轨道控制器，必须显示的导入该组件

javascript 复制代码

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

OrbitControls使用方法如下

less 复制代码

OrbitControls( object : Camera, domElement : HTMLDOMElement )

object: （必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。
domElement: 用于事件监听的HTML元素。

代码示例

javascript 复制代码

import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// .....

// 创建轨道控制器
const controls = new OrbitControls( camera, renderer.domElement );

事件

OrbitControls有三个事件

事件名	触发机制
change	当摄像机被组件改变时触发。
start	初始化交互时触发。
end	当交互结束时触发。

change事件代码示例

属性

OrbitControls属性很多，我们展示一些常用属性

属性类型	属性名	类型	属性含义
自动旋转	.autoRotate	Boolean	将其设为true，以自动围绕目标旋转。请注意，如果它被启用，你必须在你的动画循环里调用.update()。
.autoRotateSpeed	Float	当.autoRotate为true时，围绕目标旋转的速度将有多快，默认值为2.0，相当于在60fps时每旋转一周需要30秒。
阻尼设置	.dampingFactor	Float	当.enableDamping设置为true的时候，阻尼惯性有多大。 Default is 0.05.
.enableDamping	Boolean	将其设置为true以启用阻尼（惯性）
启用	.enabled	Boolean	当设置为false时，控制器将不会响应用户的操作。默认值为true。
摄像机设置	.enablePan	Boolean	启用或禁用摄像机平移，默认为true。
.enableRotate	Boolean	启用或禁用摄像机水平或垂直旋转。默认值为true。
.enableZoom	Boolean	启用或禁用摄像机的缩放。

阻尼效果演示

阻尼就是阻力的意思，如果没有阻力，根据牛顿定律，运动的物体将一直保持匀速直线运动。这意味着，如果开启了阻尼效果，旋转物体后，由于惯性，场景会继续运动。阻尼越小，物体运动的时间越久。

ini 复制代码

// 添加阻尼
controls.enableDamping = true;
controls.dampingFactor = 0.01;
// 必须调用.update()
function animation() {
  mesh.rotation.x += 0.05;
  mesh.rotation.y += 0.05;
+ controls.update();
  renderer.render(scene, camera);
}

自动旋转演示