【Three.js】创建一个三维场景

目录

前言

Three.js环境搭建

安装

导入

创建一个场景

准备一个dom容器

创建场景、相机和渲染器

创建立方体

渲染场景

创建轨道控制器

完整代码

---

前言

Three.js是一个用于创建WebGL渲染的JavaScript库。WebGL（Web Graphics Library）是一种用于在Web浏览器中进行硬件加速的图形渲染的JavaScript API。它允许开发者利用计算机的GPU（图形处理单元）来执行图形渲染，从而实现高性能的3D图形和图形效果。它本身是一个相对底层的API，需要处理许多繁琐的任务，如着色器编写、缓冲区管理等。Three.js封装了底层的WebGL功能，用于简化和抽象WebGL的使用。

Three.js引入了一系列概念和对象，如场景、相机、几何体、材质等，以更高层次的抽象来表示3D图形。创建一个三维场景必要的三个对象：场景scene、渲染器renderer、相机camera。

Three.js环境搭建

项目创建方式：Vite

Vue 版本：3.x

代码编辑器：Visual Studio Code

包管理工具：npm

安装

npm install three

导入

方式一：全部导入

import * as THREE from 'three'

const scene = new THREE.Scene()

方式二：按需导入

import { Scene } from 'three'

const scene = new Scene()

创建一个场景

准备一个dom容器

创建场景、相机和渲染器

  const threeContainer = document.getElementById('three')
  // 创建场景
  const scene = new THREE.Scene()
  // 创建相机  参数：角度，屏幕宽高比，近距，远距
  const camera = new THREE.PerspectiveCamera( 75, threeContainer.offsetWidth / threeContainer.offsetHeight, 0.1, 1000 )
  // 设置相机位置
  camera.position.set(0, 0, 10)
  // 将相机添加到场景中
  scene.add(camera)
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer({
    antialias: true //开启抗锯齿
  })
  // 设置渲染的尺寸和大小
  renderer.setSize(threeContainer.offsetWidth, threeContainer.offsetHeight)
  // 将webgl渲染的canvas内容添加到DOM容器
  threeContainer.appendChild(renderer.domElement)

创建立方体

  const cubeGeometry = new THREE.BoxGeometry(1, 1, 1) //几何体对象
  const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 }) //材质
  const cube = new THREE.Mesh(cubeGeometry, cubeMaterial) //根据几何体和材质创建物体
  // 将几何体添加到场景当中
  scene.add(cube)

渲染场景

我们使用requestAnimationFrame让渲染器对场景进行循环渲染，每次屏幕刷新时会对场景进行绘制的循环。

  function animate() {
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
  }
  animate()

创建轨道控制器

轨道控制器可以让物体360°旋转。

//引入
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const controls = new OrbitControls(camera, renderer.domElement)
// 更新控制器  必须在摄像机的变换发生任何手动改变后调用
controls.update()

完整代码