发光属性.emissive

这节课给大家介绍一个threejs材质的发光属性.emissive。

知识回顾：材质颜色color与光源

在前面基础课程给大家介绍过，材质的颜色属性color,可以设置物体颜色,然后通过光照控制控制颜色明暗。

const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshLambertMaterial({
    color: 0x00ffff,
});
const mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh); 

const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight.position.set(100, 60, 50);
scene.add(directionalLight);

改变光照强度可以看到颜色明暗的变化

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.2);

对于受光照影响的材质，如果不设置光源，材质颜色属性color和颜色贴图map颜色值就是一片漆黑，也看不到。

发光属性emissive

threejs材质的发光属性emissive，和.color一样也可以用来控制物体的渲染颜色。但是区别在于发光属性emissive设置颜色值。

const material = new THREE.MeshLambertMaterial({
    // emissive:0x00ff00//发射绿光
    emissive:0xff0000//发射红光
});

发光强度.emissiveIntensity

直接设置emissive的颜色值，可以改变rgb某个颜色值的发光明暗

const material = new THREE.MeshLambertMaterial({
    // emissive:0xff0000//发射更亮的红光
    emissive:0x440000//发射更暗的红光
});

也可以通过发光强度属性.emissiveIntensity整体调节emissive。

const material = new THREE.MeshLambertMaterial({
    emissive:0xff0000,//发射红光
    emissiveIntensity:0.2//发光强度 默认值1.0
});

.emissive和.color共同影响颜色

当有光源时候，.emissive和.color会共同影响到渲染结果，相当于在.color基础上叠加一个发光颜色效果。

你可以对比在有光源情况下，一个受光照影响材质，设置emissive颜色和不设置差异(.emissive默认是黑色)。

const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshLambertMaterial({
    color:0xff0000,
    emissive:0x440000
});
const mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh); 

const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight.position.set(100, 60, 50);
scene.add(directionalLight);

.color黑色，设置.emissive

有光源时候，你把color设置为黑色，这时候你设置.emissive产生颜色，不会受到color影响。

const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshLambertMaterial({
    color:0x000000,
    emissive:0x440000
});
const mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh); 

const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight.position.set(100, 60, 50);
scene.add(directionalLight);