Three.js - 入门（一）

最新推荐文章于 2024-07-19 11:16:54 发布

nie-ny

最新推荐文章于 2024-07-19 11:16:54 发布

阅读量1.1k

点赞数 2

分类专栏： three.js 学习文章标签：前端 three.js

本文链接：https://blog.csdn.net/yy729851376/article/details/124399342

版权

three.js 学习专栏收录该内容

30 篇文章 124 订阅

订阅专栏

什么是Three.js

想要了解Three.js就需要知道WebGL是什么。WebGL是一个只能画点、线和三角形的非常底层的系统。简单来说就是使用WebGL提供的api可以在画布的三维坐标中，绘制点、线、三角行。我们所看见的立体图形都是通过三角行组合而来的。

想要用WebGL来做一些实用的东西通常需要大量的代码，这就出现了对WebGL Api进行封装后的库Three.js。它封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能，让我们不需要在去关心WebGL的复杂原理。

基础概念

在学习Three.js之前我们需要详细了解它由那些部分组成。

渲染器(`Renderer`)

它是Three.js的主要对象，场景(Scene)和摄像机(Camera)都需要传入渲染器(Renderer)中，通过它将摄像机视椎体中的三维场景渲染成一个二维图片显示在画布上。

场景(`Scene`)

它就相当于一个大容器，我们需要展示的所有物体都要放入场景。如上图所示当把其对象放入场景后形成树状结构，就组合成场景图。在场景图中子对象的位置和方向总是相对于父对象而言的，比如我移动了父对象的位置，子对象也会一起移动。

摄像机(`Camera`)

它与其他对象不同的是，它不一定要在场景图中才能起作用，它可以和场景同级。相同的是，摄像机(Camera)作为其他对象的子对象，同样会继承它父对象的位置和朝向。Three.js内置几种摄像机：

PerspectiveCamera 透视相机，这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。
CubeCamera 立方相机，这一投影模式显示的景象是在一个立方范围内的。
OrthographicCamera 正交相机，在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。

几何体(`Geometry`)

就是球体、立方体、平面、狗、猫、人、树、建筑等物体的顶点信息。Three.js内置了许多基本几何体:

CubeGeometry 立方体
PlaneGeometry 平面
SphereGeometry 球体
CylinderGeometry 圆柱体
TorusGeometry 圆环面
TubeGeometry 管道缓冲几何体

材质(`Material`)

和几何体同时使用，表示几何体不同面的颜色，和光亮程度。Three.js内置了许多材质:

MeshBasicMaterial 基础网格材质，不受光照的影响。
MeshDistanceMaterial 通过点光源实现阴影的材质。
MeshNormalMaterial 一种把法向量映射到RGB颜色的材质。

AmbientLight 环境光，会均匀的照亮场景中的所有物体。
DirectionalLight 平行光，是沿着特定方向发射的光。
HemisphereLight 半球光，光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色。不可以投射阴影。
PointLight 点光源，从一个点向各个方向发射的光源。可以投射阴影。

开始使用

这里使用type="module"浏览器加载ES6模板，使用谷歌浏览器。
创建canvas元素，加载three.js。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>学习</title>
  </head>
  <body>
    <canvas id="c2d" class="c2d" width="1000" height="500"></canvas>
    <script type="module">
      // 官网地址
      import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/build/three.module.js'
    </script>
  </body>
</html>

创建渲染器，把canvas元素与渲染器关联。

  const canvas = document.querySelector('#c2d')
  // 渲染器
  const renderer = new THREE.WebGLRenderer({ canvas })

创建透视投影相机，并修改相机位置和指向。

  const fov = 40 // 视野范围
  const aspect = 2 // 相机默认值 画布的宽高比
  const near = 0.1 // 近平面
  const far = 1000 // 远平面
  // 透视投影相机
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  
  // 相机位置  正上方向下看
  camera.position.set(0, 50, 0)// 相机位置
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0) // 相机朝向

创建场景。

   // 创建场景
   const scene = new THREE.Scene()

创建光源，并加入场景。

  const color = 0xffffff
  const intensity = 3
  // 创建光源
  const light = new THREE.PointLight(color, intensity)
  // 光源 加入场景
  scene.add(light)

创建网格，并加入场景。

  // 球体
  const radius = 2 // 半径
  const widthSegments = 1 // 经度上的切片数
  const heightSegments = 1 // 纬度上的切片数
  // 创建球体
  const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments)
  // 材质 emissive 不被光影响的颜色
  // MeshPhongMaterial 一种用于具有镜面高光的光泽表面的材质。
  const sunMaterial = new THREE.MeshPhongMaterial({ color: 0x44aa88, emissive: 0xffff00 })
  // 网格
  const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial)
  sunMesh.position.x = 10
  scene.add(sunMesh)

场景和相机放入渲染器中，并使用requestAnimationFrame重复执行渲染函数形成动画。

  function render(time) {
    time *= 0.001

    sunMesh.rotation.y = time
    sunMesh.rotation.x = time

    // 加载渲染器
    renderer.render(scene, camera)

    // 开始动画
    requestAnimationFrame(render)
  }

  // 开始渲染
  requestAnimationFrame(render)