Three.js - RectAreaLight 光源

最新推荐文章于 2024-09-21 16:00:00 发布

「已注销」

最新推荐文章于 2024-09-21 16:00:00 发布

阅读量1.2k

点赞数 1

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/81354326

版权

本文介绍了Three.js中的RectAreaLight光源，它用于模拟明亮的窗户或条形照明。光源不支持阴影，需配合特定库实现反光效果。内容包括构造函数的参数解析和创建光源及绑定网格的示例代码。

摘要由CSDN通过智能技术生成

RectAreaLight是矩形面光源，光源类似一个平面，整个面会均匀的发光，这种光源可以用来模拟明亮的窗户，和发光的条状照明灯。
示例：https://ithanmang.gitee.io/threejs/home/201808/20180801/02-RectAreaLight.html

1、示例：

使用矩形面光源，需要注意以下事项

RectAreaLight光源不支持阴影效果。
仅仅MeshStandardMaterial和MeshPhysicalMaterial会被支持。
必须包含RectAreaLightUniformsLibjs 库文件，到场景中，否则不会产生反光效果。

<!--注意：使用RectAreaLight 必须包含这个js库文件-->
<script src="../../libs/examples/js/lights/RectAreaLightUniformsLib.js"></script>

2、构造函数

RectAreaLight( color : Integer, intensity : Float, width : Float, height : Float )

2.1、参数

color - (可选) 光的颜色. 默认是 0xffffff (white).
intensity - (可选) 光的强度或者亮度. 默认为1.
width - (可选) 光面的宽度，默认为10.
height - (可选) 光面的高度，默认为10.

3、示例代码

示例中创建了一个矩形面光源

// 实例化矩形面光源，10 * 10 光源强度为1
rectLight = new THREE.RectAreaLight(0xffffff, 1, 10, 10);
rectLight.position.set(5, 6, 0);
scene.add(rectLight);

并且创建了一个矩形网格对象，将矩形面光源与矩形网格绑定

// 创建矩形网格，便于操作和测试
rectLightMesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(), new THREE.MeshBasicMaterial());
rectLightMesh.scale.x = rectLight.width;
rectLightMesh.scale.y = rectLight.height;
// 将矩形面光源与 plane 绑定
rectLight.add(rectLightMesh);

创建矩形面光源的背面

let rectLightMeshBack = new THREE.Mesh(new THREE.PlaneBufferGeometry(), new THREE.MeshBasicMaterial({
   color: 0x808080}));

 // 绕 y 轴旋转180度，形成与面光源的背面效果
 rectLightMeshBack.rotation.y = Math.PI;
 rectLightMesh.add(rectLightMeshBack);

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RectAreaLight 矩形平面光源</title>
    <style>
        body {
   
            margin: 0;
            overflow: hidden; /*溢出隐藏*/
        }
    </style>
    <script src="../../libs/build/three.min.js"></script>
    <script src="../../libs/examples/js/controls/OrbitControls.js"></script>
    <script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
    <script src="../../libs/examples/js/libs/stats.min.js"></script>
    <script src="../../libs/examples/js/Detector.js"></script>

    <!--注意：使用RectAreaLight 必须包含这个js库文件-->
    <script src="../../libs/examples/js/lights/RectAreaLightUniformsLib.js"></script>
</head>
<body>
<script>

    let stats = initStats();
    let scene, camera, renderer, rectLight, rectLightMesh, controls, guiControls;
    let floor;
    let origin = new THREE.Vector3(0, 0, 0);

    // 场景
    function initScene() {
   

        scene = new THREE.Scene();

    }

    // 相机
    function initCamera() {
   

        camera = new THREE.PerspectiveCamera(45, window