简介

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

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

其核心代码如下：

<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地址：https://threejs.org/docs/index.html#examples/zh/controls/OrbitControls.enableZoom

  语法简介

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

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

  OrbitControls使用方法如下

  OrbitControls( object : Camera, domElement : HTMLDOMElement )
  

• object: （必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。

• domElement: 用于事件监听的HTML元素。

  代码示例

  import { OrbitControls } from "three/addons/controls/OrbitControls.js";
  // .....
  // 创建轨道控制器
  const controls = new OrbitControls( camera, renderer.domElement );
  

  

  事件

  OrbitControls有三个事件

change事件代码示例

属性

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

阻尼效果演示

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

// 添加阻尼
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);
}

自动旋转演示

// 开启自动旋转
controls.autoRotate = true;
// 设置自动旋转速度
controls.autoRotateSpeed = 5;