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

Posted on by hackdl

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) , scene.traverse(callback: Function) 。还提供对 scene 进行设置和操作的 API 本文暂时未使用到 scene 中其他的API，后续单独写篇文章进行介绍。

创建相机

在 Three.js 中，camera（相机）是用于定义场景中的视角和观察位置的对象。相机确定了渲染器如何将场景中的 3D 对象投影到屏幕上，决定了观察者在场景中看到的内容。使用相机来控制观察者在场景中的位置和视角。在 openGL 中相机的位置固定在（0,0,0）位置，所有的相机移动实际都是对场景中的所有对象进行矩阵变换。
Three.js 提供了多种类型的相机，常用的是透视相机（THREE.PerspectiveCamera）和正交相机（THREE.OrthographicCamera）。

  • 透视相机（THREE.PerspectiveCamera）使用透视投影，模拟了人眼的视觉效果。它具有视场角（FOV）、纵横比、近剪裁面和远剪裁面等属性。视场角决定了场景在相机前方可见的范围，纵横比定义了视图的宽高比，近剪裁面和远剪裁面则定义了相机的可见范围。
  • 正交相机（THREE.OrthographicCamera）使用正交投影，产生了一个没有透视效果的平行投影。它具有左、右、上、下、近、远等属性，用于定义可见区域的范围。

本文使用透视相机创建一个实例：

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

参数主要如下，THREE.PerspectiveCamera(fov, aspect, near, far)

  • fov: 视场角，表示相机的视角张度，单位是度。
  • aspect: 纵横比，表示渲染区域的宽高比。
  • near： 近剪裁面的距离，表示相机能够看到的最近距离，在近剪裁面之前的3D对象会被裁剪掉。
  • far： 远剪裁面，表示相机能够看到的最远距离。在此之后的对象也会被裁剪掉。

不用担心，后续会专门写篇文章进行详细介绍两相机之间的区别，什么是近剪裁面、远剪裁面以及其距离怎么算的。

创建渲染对象（立方体为）

创建一个正立方体：

// 创建绿色的立方体

// 创建立方体几何体
const geometry = new THREE.BoxGeometry(1,1,1);
// 实例化基础的材质，颜色设置为绿色， rgb 每两个十六进制单位分别表示一个基础元色。
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 生成一个立方体网格对象，传入几何体对象和颜色材质对象
const cube = new THREE.Mesh(geometry, material);
// 将立方体网格对象添加到场景中
scene.add(cube);

这里涉及到三个新的基类分别是 THREE.BoxGeometry 、 THREE.MeshBasicMaterial 、 THREE.Mesh

  • THREE.BoxGeometry 立方几何体，用于创建长方体或者立方体。 ThreeJS 提供 8 种 Shape 类用于创建基本几何体和自定义形状。还提供一些可以扩展的基类，我们可以在这个基类的基础上进行其他封装。openGL 提供的图元实际很基础（点，线，线环，线带，三角形，三角扇，三角带，四边形），ThreeJS 进行的大量封装使得我们更好进行形状生成。（^_^）以后再开篇进行详细介绍。
  • MeshBasicMaterial 基础材质，不受光照影响，只显示颜色。ThreeJS 一共提供了 7 种常用材质对象以及特殊的几种材质比如：粒子材质等。
  • Mesh 网格对象，用于将几何体与材质结合起来。ThreeJS 提供 6 种网格对象支持不同的使用场景。

创建渲染器将 scene 渲染出来

创建一个 WebGLRenderer 渲染器渲染scene：

// 创建一个 webgl 渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的 size
renderer.setSize(window.innerWidth, window.innerHeight);
// 绑定输出位置
document.body.appendChild(renderer.domElement);
// 将 scene 渲染出来
renderer.render(scene, camera);

渲染器是 ThreeJS 的核心组件，将 scene 场景中的三维对象渲染到屏幕上。ThreeJS 提供了三类常用的渲染器 WebGLRenderer 、 CanvasRenderer、SVGRenderer。预计未来可能会支持 WebGPURenderer 现在 Chrome 已经支持 WebGPU 了并且性能比 Webgl 更好一些（反正隔壁 babyIcon 已经支持了^v^）。
渲染器主要行为大体如下:

  • 创建渲染上下文
  • 设置渲染参数
  • 渲染 scene
  • 输出渲染结果到载体（通常都是canvas）

至此已经能渲染一个立方体了，接下来补充一丢丢代码让立方体渲染起来。

  const rotateBox = () => {
    // 创建 scene 场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    // 设置相机的z位置为5 ，位置：（0，0，5)
    camera.position.z = 5;

    // 创建绿色立方体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ffa1 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 让立方体渲染起来
    function animate() {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    }

    animate();
  };

完整代码（我在 react 中运行），方便对每篇文章的 demo 进行管理以及ui交互。代码也可以复制到到 HTML 中执行额外添加一行 threejs库的引入即可：

import React, { useEffect } from 'react';
import * as THREE from 'three';

export default function OneDay() {

  const rotateBox = () => {
    // 创建 scene 场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    // 设置相机的z位置为5 ，位置：（0，0，5)
    camera.position.z = 5;

    // 创建绿色立方体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ffa1 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 让立方体渲染起来
    function animate() {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    }

    animate();
  };
  
  useEffect(() => {
    rotateBox();
  }, []);

  return 

}

立个 flag 后续持续学习更新 threejs 系列文章（每周一篇），欢迎大家关注监督 ^-^

本文由mdnice多平台发布

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 网页防止复制、防止下载、防止右键的js

网页防止复制、防止下载、防止右键的js 标签的设置: 防止复制的js: function disableselect(e){ return false} function reEnable(){return true } file://if IE4+ docu…

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: