020-各种灯光和helper（2）

该系类文章主要用于记录学习three.js的过程，包括做的一些demo，笔记，以及个人思考；主要学习的课程是 神光的小册《three.js通关秘籍》，感兴趣的可以购买学习，质量还是可以的

HemisphereLight 半球光

说明

一般传入两个颜色的光，两个光从两个方向照射过来，会融合，是两种颜色的结合的结果；会有渐变效果；
一般用来模拟室外效果，比如填空比较亮，地面比较暗，两种光线相互影响

用法和使用

const light = new THREE.HemisphereLight( 
    new THREE.Color('orange'), 
    new THREE.Color('green'), 
    1 
);

RectAreaLight 矩形平面光

说明

它是从一个面发出来的光，类似于台球室台球桌上方的矩形灯，或则简单的灯管

用法和使用

const light = new THREE.RectAreaLight( new THREE.Color('red'), 20,  100, 100 );
light.position.set(400, 500, 300);
light.lookAt(0, 0, 0);

GridHelper 网格坐标辅助对象

说明

GridHelper 是一个网格坐标辅助对象，可以显示网格坐标,在XZ轴上铺上一层网格

用法和使用

const gridHelper = new THREE.GridHelper(
    1000, 
    10,
    new THREE.Color('green'),
    new THREE.Color('pink')
);
scene.add(gridHelper);

CameraHelper 相机辅助对象

说明

主要用于可视化椎体

用法使用

const camera2 = new THREE.PerspectiveCamera(20, 16 / 9, 100, 300);
const cameraHelper = new THREE.CameraHelper(camera2);
scene.add(cameraHelper);

ArrowHelper 箭头辅助对象

说明

主要用于标识方向，可以用ArrowHelper画个箭头

用法使用

const origin = new THREE.Vector3( 0, 0, 0 );
const dir = new THREE.Vector3( 1, 2, 0 );
dir.normalize();
const arrowHelper = new THREE.ArrowHelper( dir, origin, 500, new THREE.Color('yellow') );
scene.add( arrowHelper );

PolarGridHelper 极坐标格辅助对象

说明

主要用于标识角度

用法使用

const helper = new THREE.PolarGridHelper( 500, 10, 5, 64 );
scene.add( helper );