第190期：threejs最简单的例子[立方体]

封面图

这部分的目的是简单介绍threejs的开发流程，从创建场景、设置相机、添加几何体到将几何体渲染到节界面上。同时引出几个在开发过程中容易忽略的概念，在后面的小节中将做详细的介绍。

创建立方体

虽然这个例子看起来很古老，是入门threejs必须看的例子，但是大部分文章对这个例子讲解的并非十分详细，只是简单的说明了如何在场景中添加一个物体这么一个过程，但是其中有几个值得去深入思考的问题，下面我们一起来学习一下。

按照threejs开发的基本流程，我们先创建场景、相机、渲染器，然后用渲染器将相机和场景渲染到界面中，代码如下：

xml 复制代码

<template>
  <div id="cube-container" ref="cubeContainer"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as THREE from 'three'
// console.log('THREE', THREE)
let cubeContainer = ref()
console.log('cubeContainer', cubeContainer)
// 创建场景
const scene = new THREE.Scene()
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
// 创建渲染器
const renderer = new THREE.WebGLRenderer()
onMounted(() => {
  if (cubeContainer.value) {
    renderer.setSize(cubeContainer.value.clientWidth, cubeContainer.value.clientHeight)
    renderer.render(scene, camera)
    cubeContainer.value.appendChild(renderer.domElement)
  }
})
</script>

<style scoped>
#cube-container {
  width: 100%;
  height: 100%;
}
</style>

此时，我们观察页面，会发现页面上一片漆黑。

这是因为虽然我们创建了场景、相机和渲染器，但是我们并没有向场景中添加物体，所以接下来我们在代码中加入下面的代码：

csharp 复制代码

// 创建几何体
const geom = new THREE.BoxGeometry(5, 5, 5)
// 创建材质 这里使用的是基础材质
const mater = new THREE.MeshBasicMaterial({
  color: new THREE.Color('blue')
})
// 创建立方体
const cube = new THREE.Mesh(geom, mater)
// 将立方体添加到场景中
scene.add(cube)

这里我们创建了一个长、宽、高单位为5的立方体，一个颜色为蓝色的基础材质对象，并通过Mesh网格对象将它们两个联系起来，最终通过scene.add()方法将这个立方体添加到了场景之中。

我们再次查看页面，发现页面仍热是一片漆黑。明明我们已经向场景中添加了一个蓝色的立方体，为什么我们却看不到它呢？是相机的问题。

相机好比人的眼睛

在现实生活中，假设在理想条件下，光线充足、物体摆放的位置正确，我们的视力都正常的情况下，只要物体出现在我们的视野范围内，我们就可以看到这个物体，除非我们是闭着眼睛。

同理，threejs中的相机就好比是一双眼睛，我们这里使用的是透视相机PerspectiveCamera，它的构造函数有四个参数：

fov，( field of view )视野。相机的视野有多宽，以度为单位。
aspect, ****纵横比。场景的宽度与高度的比率。
near , 近裁剪平面。任何比这更靠近相机的东西都是不可见的。
far , 远裁剪平面。任何比这更远离相机的东西都是不可见的。

ini 复制代码

// 示例
const fov = 35; //  Field of View
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1; // 近裁剪平面
const far = 100; // 远裁剪平面
const camera = new PerspectiveCamera(fov, aspect, near, far);

睁开眼睛才能看到东西

在现实生活中，虽然有各种各样的漂亮的物体，但是如果我们把眼睛闭起来，就算把好东西放到我们眼前，我们仍旧无法看到它到底是个什么东西。

在threejs 中也一样，场景中添加的物体默认都在原点的位置，我们可以将相机和立方体的位置信息打印出来：

yaml 复制代码

// 相机.position _Vector3 {x: 0, y: 0, z: 0}
// 立方体.position _Vector3 {x: 0, y: 0, z: 0}

会发现他们都出现在原点的位置，就好比一个物体放在我们眼前，我们却闭着眼睛，看不到这个物体就变得理所了。

我们改变一下相机的位置，加入以下代码：

scss 复制代码

// 设置相机位置
camera.position.set(0, 10, 10)
// 设置镜头方向
camera.lookAt(0, 0, 0)

然后再次查看页面，立方体就正确的展示到页面中了。

小结

这一节主要通过创建简单的立方体来熟悉threejs基本的开发流程。

我们通过创建场景、相机、几何体、材质对象、网格对象通过场景的add方法将网格对象添加到场景中，并通过渲染器的render方法将场景和相机渲染到界面上。

我们用人的眼睛和相机做了简单的比较，并且发现相机和物体的初始位置都在原点处。到目前为止，我们已经可以将物体正确的展示到界面上，但是其中还有很多问题需要思考，接下来让我们一起来发现和解决这些问题吧。