ThreeJS设置灯光

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

开启渲染器的灯光

在场景中添加灯光之前，我们将需要在打开物理上照明，比如需要启用渲染器的.physicallyCorrectLights设置，代码如下：

import { WebGLRenderer } from 'https://unpkg.com/three@0.127.0/build/three.module.js'; function createRenderer() {   
    const renderer = new WebGLRenderer();   // 需要开启渲染器的照明
    renderer.physicallyCorrectLights = true;  
    return renderer;
} 
export { createRenderer };

常见的四种光类型

添加到场景中的灯光

第一步：一般设置灯光发在主场景里面。 第二步：引入关于灯光类型，创建一个DirectionalLight，表示平光源，该构造函数采用两个参数，分别是颜色和光强度。 第三步：采用定位灯，比如：light.position，调整处理位置，向左，向上和我们移动，为light.position.set(10,10,10)。

import { DirectionalLight } from 'https://unpkg.com/three@0.127.0/build/three.module.js'; function createLights() {     
    // 创建平光源，构造函数采用两个参数     
    const light = new DirectionalLight('white', 8);     
    // 把灯向右，向上，向我们这边移     
    light.position.set(10, 10, 10);    
    return light; 
} 
export { createLights }

把灯光引入到主场景组件

设置灯光并新建好灯光组件之后，还需要把灯光添加到场景中。把新的模块及组件添加到主场景组件中。

import { createLights } from './components/lights.js';

一次调用中添加了灯光和网格的scene.add，必须要用逗号来分隔。

const light = createLights();     
scene.add(cube, light);

材质的用处

说到两个材质的用处，分别是MeshBasicMaterial和MeshStandardMaterial。

(1)MeshBasicMaterial就是最基本的可用素材，但是它根本不会对灯光的反应，也就是说这种材质会忽略场景中的任何灯光。

(2)MeshStandardMaterial就是高质量、通用、物理精确的素材，一般能对灯光的反应，因此一般材质首选MeshStandardMaterial的材料。

改变立方体组件

改变材质、改变颜色及规范风格、旋转立方体。

(1)改变材质改为MeshStandardMaterial

(2)color：purple

(3)旋转立方体：rotation

// 创建一个立方体   
const geometry = new BoxBufferGeometry(2, 2, 2);   
// 材质颜色为紫色   
const material = new MeshStandardMaterial({ color: 'purple' }); 
const cube = new Mesh(geometry, material);   
cube.rotation.set(-0.5, -0.1, 0.8);   
return cube;

练习题

(1)改变材质的颜色

针对材质的代码并改变材质的颜色，例如：

// 材质颜色   
const material = new MeshStandardMaterial({ color: 'darkturquoise' });

效果图：

(2)改变灯光的颜色

改变光源类型的颜色，我选purple(紫色)，例如：

const light = new DirectionalLight('purple', 8);

另外cube.js，改变材质的颜色为chartreuse(青绿色)

const material = new MeshStandardMaterial({ color: 'chartreuse' });

效果图：

材质颜色(青绿色)+灯光颜色(紫色)=棕色

(3)移动灯光的位置

改变灯光的位置light.position.set()，例如：

light.position.set(10, 10, 10);

原效果图：

改变灯光的位置light.position.set()，例如：

//把灯光位置向右的值为30 
light.position.set(30, 0, 0);

效果图：

(1)测试三种光源类型：

(1.1)PointLight(点光源)

修改光源类型为PointLight，加上新增设置对应的光源辅助工具，另外添加为createLightsHelps()新方法。

import { DirectionalLight, PointLight, PointLightHelper } from 'https://unpkg.com/three@0.127.0/build/three.module.js'; 
const light = new PointLight('white', 15); 
function createLights() {     
    // 创建平光源    
    // const light = new DirectionalLight('purple', 8);     
    // 把灯向右的值为30     
    light.position.set(5, 0, 10);     
    return light; 
} 
function createLightsHelps() {     
    // 辅助工具大小     
    const sphereSize = 1;    
    // 创建点光源辅助工具     
    const pointLightHelper = new PointLightHelper(light, sphereSize);     
    return pointLightHelper; 
} 
export { createLights, createLightsHelps };

另外，把光源辅助添加到scene.add()里面。

const cube = createCube();
const light = createLights();
const lightHelp = createLightHelps();
sceen.add(cube,light,lightHelp)

效果图：

(2)测试各种材质

我查询threeJS官方文档的材质，一共有18种材质。

我选2种不同的材质来测试即可：

(2.1)PointsMaterial（点材质）

修改点材质及点模型的对象，如下：

import {   
BoxBufferGeometry,
Mesh,
Points,
MeshStandardMaterial,
MeshPhongMaterial,
PointsMaterial 
} from 'https://unpkg.com/three@0.127.0/build/three.module.js'; 
function createCube() {   
    // 创建一个立方体   
    const geometry = new BoxBufferGeometry(2, 2, 2);   
    // 点对象   
    const material = new PointsMaterial({     
        color: 'chartreuse',
        size: 1   
    });  
    // 模型对象   
    const cube = new Points(geometry, material);
    cube.rotation.set(-0.5, -0.1, 0.8);
    return cube;
} 
export { createCube };

效果图：

(2.2)LineBasicMaterial（线材质）

修改线材质及线模型的对象，部分代码如下：

function createCube() {  
    // 创建一个立方体   
    const geometry = new BoxBufferGeometry(2, 2, 2);  
    // 材质颜色   
    const material = new LineBasicMaterial({ color: 'chartreuse',});   
    // 模型对象   
    const cube = new Line(geometry, material);
    cube.rotation.set(-0.5, -0.1, 0.8);   
    return cube; 
}

效果图：