ThreeJS学习笔记一：场景、相机、渲染器、光源

原创

已于 2022-10-12 23:56:38 修改 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#学习

于 2022-10-12 23:49:50 首次发布

本文介绍Three.js中的核心概念：场景、相机、渲染器及光源，并通过实例演示如何构建基本的3D场景。

前言

在three中，场景、相机、渲染器是最核心的三个概念。我们通过相机拍摄场景，再通过渲染器把场景呈现在视图中。

一、Scene 场景

场景：放置物体、灯光和摄像机的地方。

我们把场景理解为我们现实生活中的空间，在三维世界中我们创建了一个空间，这个空间中什么也没有。我们需要放置物体来点缀我们的空间，也需要光源来照亮我们的空间。

二、Camera 相机

相机是用来拍摄我们想展示的三维空间的内容，在图形学中常用相机分两类：透视相机和正交相机。

透视相机是有近大远小的效果，更符合我们人眼的感官视觉效果。
正交相机则没有近大远小的效果，一般用于制图类软件中，如CAD软件。

三、WebGLRenderer 渲染器

渲染器则是决定使用什么方式渲染出想要的视图效果，他的入参就是相机和场景，渲染结果从本质上来讲就是一个canvas对象。渲染对象中包含设置canvas画布大小，canvas背景色等多种方法。

四、光源

1. 环境光

环境光是没有方向的光源，立方体的六个面都会受到光线的影响。如果我们只设置环境光，没有设置平行光，那么我们会发现物体还是没有棱角，这是因为物体的六个面都是一样的亮度。

2. 平行光

平行光可以想象为太阳光，太阳光从远处射向地球，因为太阳距离地球太远了，所以太阳光抵达地球时光线的夹角可以忽略不计，光线之间是平行的。当我们设置了平行光后，物体就有了棱角，这是因为物体经过太阳光的照射后产生了反射光，物体不同的面经过不同的入射角后反射的光线也不一致，就有了明暗的区别。

五、threeJS实现3D场景

1. 准备

// 安装项目
yarn create vite three-learn --template react
// 进入目录
cd three-learn
// 安装依赖
yarn
// 安装three，版本为0.136
yarn add three@0.136
// 运行项目
yarn dev

2. 第一个3D场景

我们先绘制出第一个3D场景，让大家更好的理解场景、相机和渲染器的工作流程。

import * as THREE from 'three';
import {
   
    useEffect } from 'react'
import './App.css'

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

    /** 相机设置 */
    const width = window.innerWidth; //窗口宽度
    const height = window.innerHeight; //窗口高度
    const k = width / height; //窗口宽高比
    const s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大

    //创建相机对象
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position