ThreeJs新手入门不完全教学指南快速入门篇（一）

这周利用闲暇时间学习了ThreeJs的一些基础入门知识。由于知识点繁多，借着这篇文章特来复习与巩固，也顺便分享给有需要的小伙伴~

由于内容较多，故分成几篇文章循序渐进，从浅到深方便大家理解，希望大家能多敲多写巩固记忆。

基础篇结束后将会迎来实战教学，还请各位多多点赞收藏关注~

好了，话不多说，我们开始

安装

首先建个工程项目，为了方便这里我用vue+vite的架子。然后安装我们的ThreeJs

js 复制代码

pnpm add three --save

引入

js 复制代码

import * as THREE from 'three'

创建第一个3D模型

创建我们第一个3D模型，首先需要添加ThreeJS必须得三个元素：scene、camera、render

js 复制代码

const width = window.innerWidth;
const height = window.innerHeight;

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(45, width / height, 0.25, 2000);
camera.position.set(100, 100, 100);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0x444444, 1);

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

document.body.appendChild(renderer.domElement);

此时我们一个基本的threejs画布就有了，我们可以在上面添加一些东西。比如一个方块

js 复制代码

const geometry = new THREE.BoxGeometry(10, 10, 10);

const material = new THREE.MeshBasicMaterial({
  color: 0xff0000
});

const mesh = new THREE.Mesh(geometry, material);
camera.lookAt(mesh.position);
scene.add(mesh)

我们创建了一个长宽高都是10的box几何体，添加一个基础材质，设置它的颜色属性。创建一个网格模型，并将上面两项作为它的参数。最后在场景中添加这个网格模型

添加环境光、坐标辅助

js 复制代码

const ambient = new THREE.AmbientLight();
scene.add(ambient);

const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);

以及相机控件，来帮助缩放、平移观察模型

js 复制代码

new OrbitControls(camera, renderer.domElement);

此时页面效果

坐标轴中的红绿蓝分别对应xyz轴线，mesh对象的模型坐标就是坐标原点。

当我们改变浏览器窗口大小时，画布大小未曾变化，这里我们监听window的resize事件

js 复制代码

window.onresize = function () {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
};

重新设置渲染器的尺寸以及相机的aspect属性，当相机的设置发生变化时需要调用updateProjectionMatrix进行更新。

接下来我们针对上面出现的几个概念进行详细的说明

几何体

在上面我们创建了一个矩形几何体，常见的还有以下

长方体---BoxGeometry
圆柱体---CylinderGeometry
球体---SphereGeometry
圆锥---ConeGeometry
矩形平面---PlaneGeometry
圆平面---CircleGeometry

我们批量添加进行测试

js 复制代码

  type GeometryType =
    | 'BoxGeometry'
    | 'CylinderGeometry'
    | 'SphereGeometry'
    | 'ConeGeometry'
    | 'PlaneGeometry'
    | 'CircleGeometry';

  const geometryList = [
    {
      type: 'BoxGeometry',
      args: [10, 10, 10]
    },
    {
      type: 'CylinderGeometry',
      args: [10, 10, 10]
    },
    {
      type: 'SphereGeometry',
      args: [10]
    },
    {
      type: 'ConeGeometry',
      args: [10, 10]
    },
    {
      type: 'PlaneGeometry',
      args: [10, 5]
    },
    {
      type: 'CircleGeometry',
      args: [10]
    }
  ];
  const material = new THREE.MeshBasicMaterial({
    color: 0xff0000
  });

  geometryList.forEach((item, index) => {
    const geometry = new THREE[item.type as GeometryType](...item.args);
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.x = index * 20;
    scene.add(mesh);
  });

模型材质

常用的几个模型材质如下

基础网格材质---MeshBasicMaterial
漫反射网格材质---MeshLambertMaterial3
高光网格材质---MeshPhongMaterial
标准网格材质---MeshStandardMaterial
物理网格材质---MeshPhysicalMaterial

以上继承父类Material

js 复制代码

const material = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  transparent: true, // 开启透明
  opacity: .3, // 透明度
  map: Texture,// 纹理贴图
  envMap: Texture // 环境贴图
  ...
});

更多配置大家可以自己动手尝试下不同的效果

相机

相机一般分为正投影相机与透视投影相机。区别就是透视投影相机遵循远小近大的原理，而正投影相机则不会。

透视投影相机

js 复制代码

PerspectiveCamera( fov, aspect, near, far )

fov：相机的可视角度，角度越大，可视范围也就越大
aspect：水平方向与竖直方向宽高比，一般是画布的宽高比
near：近裁截面距离
far：远裁截面距离，与near构成可视范围高度

正投影相机

js 复制代码

OrthographicCamera( left, right, top, bottom, near, far )

left, right, top, bottom对应渲染空间的上下左右范围 near、far与透视投影相机效果类似

结语

好了，第一篇就先说到这里，还请关注后续更新

ThreeJs新手入门不完全教学指南 快速入门篇（一）

安装

创建第一个3D模型

几何体

模型材质

相机

透视投影相机

正投影相机

结语

ThreeJs新手入门不完全教学指南快速入门篇（一）