超详细的threeJS教程(一)

1.安装并引入three.js

http://www.webgl3d.cn/pages/b9504a/
无论是Vue + three.js 还是 React+three.js ，直接通过npm命令安装即可。

//安装three.js
npm i three --save
//引入three.js
import * as THREE from 'three'

2.三大场景

<!--容器-->
  <div id="three-dom" ref="screenDom"></div>

虚拟场景 （scene）+ 虚拟相机(Camera) + 渲染器(Renderer)

2.1场景

//几何体：创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(100, 100, 100); 
//材质:创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({
    color: 0xff0000,//0xff0000设置材质颜色为红色
}); 
// 网格模型:两个参数分别为几何体geometry、材质material
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//设置网格模型在三维空间中的位置坐标，默认是坐标原点
mesh.position.set(0,10,0);
// 把网格模型mesh添加到三维场景scene中。
scene.add(mesh); 

2.2相机

//新建相机的api--PerspectiveCamera
// fov :视野角度  aspect:宽高比   near:近裁截面  far:远裁截面
PerspectiveCamera( fov, aspect, near, far )
// 例子 --- 30:视觉角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
// 视觉角度越大，看到的内容越小，反之越大
// 画布宽高比尽量和屏幕宽高比一致
// 
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);

四个参数fov, aspect, near, far构成一个四棱台3D空间，被称为视锥体，只有视锥体之内的物体，才会渲染出,注意near和far的值，以为相机和物体的位置关系

2.3渲染器

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
// 定义输出画布的尺寸(单位:像素px)
const width = 800; //宽度
const height = 500; //高度
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
renderer.render(scene, camera); //执行渲染操作
//将canvas画布renderer.domElement添加到Dom中
screenDom.value.appendChild(renderer.domElement)

3.光源

给物体添加什么颜色/种类的光，光的强度和是否衰减。 控制模型表面的明暗。

// 加光线
  const lightColor = 0xffffff
  const intensity = 1//强度
  //点光源
  //const pointLight = new THREE.PointLight(0xffffff, 1.0);
  //平行光（颜色，强度）
  const light = new THREE.DirectionalLight(lightColor, intensity)
  //光源位置
  light.position.set(-1, 2, 4)
  scene.add(light)

4.坐标系

ThreeJS 采用的右手坐标系，openGL 采用的是右手坐标系，WebGL 是openGL的JS版本也是右手坐标系。而 Direct3D 使用的坐标系则是左手坐标系。右手坐标系和 3D 笛卡尔坐标系是一样的。