three.js 6 灯光

import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { RectAreaLightHelper } from "three/examples/jsm/helpers/RectAreaLightHelper";

/**
 * 3d light 灯光
 * https://threejs.org/docs/index.html#api/zh/lights/AmbientLight
 */
export class ThreeDoc6Light {
    constructor(canvasId) {
        this.work(canvasId);
    }

    work(canvasId) {
        // 创建 3d 场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x9e9e9e);

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        // 最后一步很重要，我们将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。这就是渲染器用来显示场景给我们看的<canvas>元素。
        document.body.appendChild(renderer.domElement);

        // AxesHelper  3个坐标轴的对象.
        this.addAxesHelper(scene);
        // BoxHelper  包围盒的辅助对象 - 添加十二面体，观察各种灯光效果
        this.addBoxHelper(scene);

        // 添加各种类型灯光
        // AmbientLight 环境光会均匀的照亮场景中的所有物体。
        // this.addAmbientLight(scene);
        // 环境光探针（AmbientLightProbe）
        // this.addAmbientLightProbe(scene);
        // 平行光（DirectionalLight）
        // this.addDirectionalLight(scene);
        // 半球光（HemisphereLight）
        // this.addHemisphereLight(scene);
        // 半球光探针 HemisphereLightProbe
        // this.addHemisphereLightProbe(scene);
        // 点光源（PointLight）
        // this.addPointLight(scene);
        // 平面光光源（RectAreaLight）
        this.addRectAreaLight(scene);
        // 聚光灯（SpotLight）
        this.addSpotLight(scene);


        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        // 设置相机位置
        camera.position.x = 10;
        camera.position.y = 10;
        camera.position.z = 10;
        // camera.lookAt(0, 0, 0);

        // 添加控制器
        let orb = new OrbitControls(camera, document.body);
        orb.addEventListener('change', function () {
            renderer.render(scene, camera);
        });

        renderer.render(scene, camera);
    }

    /**
     * AxesHelper
     * 用于简单模拟3个坐标轴的对象.
     * 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
     * AxesHelper( size : Number )
     * size -- (可选的) 表示代表轴的线段长度. 默认为 1.
     */
    addAxesHelper(scene) {
        const axesHelper = new THREE.AxesHelper(12);
        scene.add(axesHelper);
    }

    /**
     * BoxHelper
     * 用于图形化地展示对象世界轴心对齐的包围盒的辅助对象。The actual bounding box is handled with Box3, this is just a visual
     * helper for debugging. It can be automatically resized with the BoxHelper.update method when the object it's created
     * from is transformed. 注意:要想能正常运行,目标对象必须包含 BufferGeometry , 所以当目标对象是精灵 Sprites 时将不能正常运行.
     * BoxHelper( object : Object3D, color : Color )
     * object -- (可选的) 被展示世界轴心对齐的包围盒的对象.
     * color -- (可选的) 线框盒子的16进制颜色值. 默认为 0xffff00.
     */
    addBoxHelper(scene) {
        // 添加 十二面体
        const geometry = new THREE.DodecahedronGeometry(1, 0);
        const material = new THREE.MeshStandardMaterial({ color: 0x049EF4 });
        const dodecahedron = new THREE.Mesh(geometry, material);
        scene.add(dodecahedron);
        // 添加边缘辅助线
        let edges = new THREE.EdgesHelper(dodecahedron, 0x00ff00);
        scene.add(edges);

        const box = new THREE.BoxHelper(dodecahedron, 0xffff00);
        scene.add(box);
    }

    /**
     * AmbientLight
     * 环境光会均匀的照亮场景中的所有物体。
     * 环境光不能用来投射阴影，因为它没有方向。
     * AmbientLight( color : Integer, intensity : Float )
     * color - (参数可选）颜色的rgb数值。缺省值为 0xffffff。
     * intensity - (参数可选)光照的强度。缺省值为 1。
     */
    addAmbientLight(scene) {
        const light = new THREE.AmbientLight(0x404040, 100); // soft white light
        scene.add(light);
    }

    /**
     * 环境光探针（AmbientLightProbe）
     * 光照探针是一种在3D场景中添加光源的另一种方法。 AmbientLightProbe 是场景中单个环境光的光照估算数据。
     * 有关光照探针的更多信息，请转到 LightProbe 。
     * AmbientLightProbe( color : Color, intensity : Float )
     * color - （可选）一个表示颜色的 Color 的实例、字符串或数字。
     * intensity - （可选）光照探针强度的数值。默认值为1。
     *
     * 创建一个新的AmbientLightProbe。
     */
    addAmbientLightProbe(scene) {
        const light = new THREE.AmbientLight(0x404040, 100); // soft white light
        scene.add(light);
    }

    /**
     * 平行光（DirectionalLight）
     * 平行光是沿着特定方向发射的光。这种光的表现像是无限远,从它发出的光线都是平行的。常常用平行光来模拟太阳光 的效果; 太阳足够远，
     * 因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。
     * 平行光可以投射阴影 - 跳转至 DirectionalLightShadow 查看更多细节。
     * DirectionalLight( color : Integer, intensity : Float )
     * color - (可选参数) 16进制表示光的颜色。 缺省值为 0xffffff (白色)。
     * intensity - (可选参数) 光照的强度。缺省值为1。
     *
     * 创建一个新的 DirectionalLight。
     */
    addDirectionalLight(scene) {
        // White directional light at half intensity shining from the top.
        const directionalLight = new THREE.DirectionalLight(0xffffff, 100);
        scene.add(directionalLight);
        /**
         * 它也可以设置target为场景中的其他对象(任意拥有 position 属性的对象), 示例如下:
         * const targetObject = new THREE.Object3D();
         * scene.add(targetObject);
         *
         * light.target = targetObject;
         * 完成上述操作后，平行光现在就可以追踪到目标对像了。
         */
    }

    /**
     * 半球光（HemisphereLight） - 喜欢这个光
     * 光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色。
     * 半球光不能投射阴影。
     *
     * HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )
     * skyColor - (可选参数) 天空中发出光线的颜色。 缺省值 0xffffff。
     * groundColor - (可选参数) 地面发出光线的颜色。 缺省值 0xffffff。
     * intensity - (可选参数) 光照强度。 缺省值 1。
     */
    addHemisphereLight(scene) {
        const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 100 );
        scene.add( light );
    }

    /**
     * 半球光探针HemisphereLightProbe
     * 光照探针是一种在3D场景中添加光源的另一种方法。 HemisphereLightProbe 是场景中单个半球光的光照估算数据。 有关光照探针的更多信息，
     * 请转到 LightProbe 。
     * HemisphereLightProbe( skyColor : Color, groundColor : Color, intensity : Float )
     * skyColor - （可选）一个表示颜色的 Color 的实例、字符串或数字。
     * groundColor - （可选）一个表示颜色的 Color 的实例、字符串或数字。
     * intensity - （可选）光照探针强度的数值。默认值为1。
     *
     * 创建一个新的 HemisphereLightProbe。
     */
    addHemisphereLightProbe(scene) {
        const light = new THREE.HemisphereLightProbe( 0xffffbb, 0x080820, 100 );
        scene.add( light );
    }

    /**
     * 点光源（PointLight）
     * 从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。
     * 该光源可以投射阴影 - 跳转至 PointLightShadow 查看更多细节。
     * PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )
     * color - (可选参数)) 十六进制光照颜色。 缺省值 0xffffff (白色)。
     * intensity - (可选参数) 光照强度。 缺省值 1。
     * distance - 这个距离表示从光源到光照强度为0的位置。 当设置为0时，光永远不会消失(距离无穷大)。缺省值 0.
     * decay - 沿着光照距离的衰退量。缺省值 1。 在 physically correct 模式中，decay = 2。
     *
     * 创建一个新的点光源（PointLight）。
     */
    addPointLight(scene) {
        const light = new THREE.PointLight( 0xff0000, 100, 0 );
        light.position.set( 0, 5, 0 );
        scene.add( light );
    }

    /**
     * 平面光光源（RectAreaLight） - 这个光源也不错！
     * 平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源。
     * 注意事项:
     * 不支持阴影。
     * 只支持 MeshStandardMaterial 和 MeshPhysicalMaterial 两种材质。
     * 你必须在你的场景中加入 RectAreaLightUniformsLib ，并调用init()。
     *
     * RectAreaLight( color : Integer, intensity : Float, width : Float, height : Float )
     * color - (可选参数) 十六进制数字表示的光照颜色。缺省值为 0xffffff (白色)
     * intensity - (可选参数) 光源强度／亮度 。缺省值为 1。
     * width - (可选参数) 光源宽度。缺省值为 10。
     * height - (可选参数) 光源高度。缺省值为 10。
     */
    addRectAreaLight(scene) {
        const width = 20;
        const height = 10;
        const intensity = 100;
        const rectLight = new THREE.RectAreaLight( 0xffffff, intensity,  width, height );
        rectLight.position.set( 5, 5, 0 );
        rectLight.lookAt( 0, 0, 0 );
        scene.add( rectLight );

        let rectLightHelper = new RectAreaLightHelper( rectLight );
        scene.add( rectLightHelper );
    }

    /**
     * 聚光灯（SpotLight）
     * 光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大。
     *
     * 该光源可以投射阴影 - 跳转至 SpotLightShadow 查看更多细节。
     * SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )
     * color - (可选参数) 十六进制光照颜色。 缺省值 0xffffff (白色)。
     * intensity - (可选参数) 光照强度。 缺省值 1。
     *
     * distance - 从光源发出光的最大距离，其强度根据光源的距离线性衰减。
     * angle - 光线散射角度，最大为Math.PI/2。
     * penumbra - 聚光锥的半影衰减百分比。在0和1之间的值。默认为0。
     * decay - 沿着光照距离的衰减量。
     *
     * 创建一个新的聚光灯。
     */
    addSpotLight(scene) {
        // white spotlight shining from the side, casting a shadow

        const spotLight = new THREE.SpotLight( 0xffffff );
        spotLight.position.set( 100, 1000, 100 );

        spotLight.castShadow = true;

        spotLight.shadow.mapSize.width = 1024;
        spotLight.shadow.mapSize.height = 1024;

        spotLight.shadow.camera.near = 500;
        spotLight.shadow.camera.far = 4000;
        spotLight.shadow.camera.fov = 30;

        scene.add( spotLight );
    }
}