threejs主体流程以及基本概念

前言

好多次想学习 threejs ，总是半途而废，今天下定决定从头开始学习，掌握 threejs 的基础功能。

主体功能流程

如上图所示，主体流程主要分为创建场景、配置场景、创建模型对象以及渲染 几个部分，下面分模块介绍。

1. 创建场景

场景为物体、光等元素的容器，light 、mesh 、group 等都可以放入场景中。

let scene = new THREE.Scene();

2. 配置场景

• 相机
  相当于我们人的眼镜，设置相机的位置以及目标点，相当于指定人所在的空间位置以及目光朝向。

  • 相机分类
    • 正交相机： 几何引擎中常用
    • 透视相机： 类人眼

• 灯光： 光照设置有一定的难度，初学时可以忽略，不进行设置。

let camera = new THREE.PerspectiveCamera(45, width/height, 1, 2000);
camera.position.set(0