Three.js - 通过 Reflector.js 创建镜面反射

最新推荐文章于 2024-04-24 13:44:20 发布

「已注销」

最新推荐文章于 2024-04-24 13:44:20 发布

阅读量4.7k

点赞数 2

分类专栏： threejs

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

版权

本文介绍了如何使用Three.js的Reflector.js插件创建镜面反射效果，详细阐述了从引入js文件到创建镜子形状，配置参数，最后将镜子加入场景的步骤。示例代码展示了一个矩形平面镜子的实现，该镜子能根据光源缩放并可调整反射颜色，提供了一种易于调试的镜面效果。

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

类似境面反射可以使用CubeCamera但是CubeCamera更适用于创建物体自身对环境的反射，但是如果想要创建一面镜子的话使用CubeCamera会难调试所反射物体的位置，而且镜面中的物体不会随着控制器的缩放而变动。
使用Reflector.js可以很容易的创建一面镜子，并且镜子中的对象会依据发光体的缩放而缩放，而且可以调试镜子的发光色，类似墨镜的效果。

1、示例

示例
https://ithanmang.gitee.io/threejs/home/201809/20180907/02-reflector-mirror.html
效果
这里写图片描述

2、使用步骤

2.1、引入js文件

和创建镜头炫光 Lensflare一样需要单独引入

<!-- 导入 Reflector.js -->
<script src="../../libs/examples/js/objects/Reflector.js"></script>

2.2、创建镜子形状

 var planeGeometry = new THREE.PlaneBufferGeometry(10, 10);

此处创建了一个矩形的平面

2.3、配置镜子参数

var options = {
   

     clipBias: 0.03,
     textureWidth: window.innerWidth * window.devicePixelRatio,
     textureHeight: window.innerHeight * window.devicePixelRatio,
     color: 0x889999,
     recursion: 1

 };

2.4、创建镜子并加入场景

var mirror = new THREE.Reflector(planeGeometry, options);
scene.add(mirror);

3、示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="../../../three.png">
    <title>通过 Reflector 创建反光镜</title>
    <style>
        body {
    
            margin: 0;
            overflow: hidden; /* 溢出隐藏 */
        }

        #loading {
    
            position: fixed;
            top: 50%;
            left: 50%;
            color: #FFFFFF;
            font-size: 20px;
            margin-top: -30px;
            margin-left: -40px;
        }
    </style>