ThreeJs

ThreeJs中文文档

三维引擎主要包括：

• 独立的三维坐标系统。
• 几何图形和材质贴图。
• 光照和摄像机。

ThreeJs三要素

场景Scene(容器)、相机Camera(观察)、渲染器Renderer(组合Scene和Camera)

一、场景：一切要素都在场景里面，场景相当于“世界”，包括各种物质和物理变化。

前端坐标系.jpg

三维坐标系指向.png

二、相机：相机相当于人眼，有相机才可以看见场景里面的一切物体和光源。常用的是正交相机机和透视摄相机。

正交相机原理图.png

1. 正交相机： 正交相机是一个矩形可视区域，物体只有在这个区域内才是可见的，无论物体距离相机是远是近，物体都会被渲染成一个大小。一般应用场景是2.5d游戏。

透视相机原理示意图.png

2. 透视相机： 透视相机是最常用的相机类型，模拟人眼的视觉，实现近大远小（透视）的效果。Fov表示的是视角，Fov越大，表示眼睛睁得越大，离得越远，看得更多。如果是需要模拟现实，基本都是用这个透视相机。

三、渲染器： 用于将场景的内容渲染在画布上，渲染器会创建一个画布canvas。

import * as THREE from 'three';

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

/* 
    一. 创建场景
    二. 创建相机
    三. 创建渲染器
    四、创建一个物体并添加到场景上
*/


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

// 二. 创建相机
const camera = new THREE.PerspectiveCamera(45, windowWidth / windowHeight, 0.1, 1000);
camera.position.z = 5; // 如果不设置的话，默认相机和物体在一起的
camera.lookAt(0, 0, 0); // 看向的方向，这里是看向中心

// 三. 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(windowWidth, windowHeight); // 给canvas画布设置宽高属性
/* 
    renderer.domElement可以拿到canvas
    往body元素添加canvas
*/
document.body.appendChild(renderer.domElement);

// 四、创建一个物体并添加到场景上
const cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial()
);
scene.add(cube); // 场景可以添加多个物体

function animate() {
    requestAnimationFrame(animate);
    // 设置物体选装动画
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera); // 渲染器将场景和相机结合起来
}

animate();

透视相机PerspectiveCamera

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number)

• fov - 摄像机视锥体垂直视野角度
• aspect -摄像机视锥你长宽比（可以直接影响渲染图形的形状）
• near - 摄像机视锥体近端面

• far - 摄像机视锥体远端面

  

  015透视相机示意图.png
  

  013物体和相机初始位置重叠.png
  

  015透视相机示意图.png

注意：

• 相机和物体的初始位置都是(0, 0, 0)，此时位置是重叠的，所以物体的位置没有绘制出来。此时可以通过移动相机或者物体的位置，来实现物体的渲染，需要将物体移动到近切面和远切面之间的区域。
• 物体只能在近切面和远切面之间的区域进行渲染，在这个区域之外，物体是无法渲染出来的。

可能会用到的公式

三角函数.jpg