ThreeJS 入门如何渲染出第一个3D图形

ThreeJS 入门如何渲染出第一个3D图形

什么是ThreeJS？

Three.js 是一个用于在Web浏览器上创建和显示交互式 3D 图形的 JavaScript 库。简化了在 Web 上创建基于 WebGL 的 3D 图形的过程。WebGL 是一种在 Web 浏览器中实现硬件加速的 3D 图形渲染的技术。Three.js 通过封装复杂的WebGL API，提供了一个更简单的接口，使得我们能够轻松地在浏览器中创建 3D 场景、模型、动画和交互效果。

渲染一个 3D 图形需要哪些步骤？

要渲染第一个 3D 图形，需要以下几个步骤：

• 创建场景 scene，使用 THREE.Scene 进行创建。
• 创建相机 camera，使用 THREE.PerspectiveCamera 进行创建。
• 创建渲染对象（以立方体为例），并添加到场景 scene 中。
• 创建渲染器 renderer，并进行场景渲染，使用 THREE.WebGLRenderer 进行创建。调用渲染器 render 函数将场景 scene 和相机 camera 作为参数进行渲染。

// 插入一个跳转地址，方便查看完整代码

创建场景

在 Three.js 中，使用 THREE.Scene 来创建 scene（场景），scene包含了所有 3D 对象、光源和相机的容器。它是构建和组织 3D 场景的基础。

场景（THREE.Scene）类代表了一个虚拟的 3D 空间，其中可以包含各种对象，例如几何体、模型、灯光等。通过将对象添加到场景中，可以在渲染过程中将它们呈现到屏幕上。

创建一个简单的场景：

import * as THREE from 'three';
const scene = new THREE.Scene();

实例化后的 scene 对象提供一些列的API来对其中的 3D 对象进行管理，如： scene.add(object: Object3D) 、scene.remove(object: Object3D) ,