Three.js - 设置折射贴图比率 refractionRatio 加环境贴图实现反射效果

最新推荐文章于 2024-09-17 20:53:25 发布

原创

最新推荐文章于 2024-09-17 20:53:25 发布 · 3.5k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍了如何在Three.js中通过设置环境贴图和折射率refractionRatio来实现物体的动态反射效果。详细步骤包括设置折射率、环境贴图映射以及材质的反射属性。提供了一个示例链接展示实际效果。

通过给物体设置环境贴图envMap可以实现虚假的反射效果，通过设置CubeCamera可以实现动态的反光，设置材质的refractionRatio 属性可以实现透明反射的效果。

1、示例

示例
http://ithanmang.com/threeJs/home/201809/20180907/03-refraction-texture.html
效果
这里写图片描述

2、实现步骤

2.1、`refractionRatio`

refractionRatio：是物体对环境贴图的折射率，值越接近0的话，对贴图的反射越强烈，越接近1则月接近透明状态，需要配合THREE.CubeRefractionMapping和THREE.EquirectangularRefractionMapping一起使用。

2.2、设置环境贴图和映射方式

var cubeTexture = new THREE.CubeTextureLoader().setPath('../../textures/cube/Bridge2/')
            .load(
                [
                    'posx.jpg',
                    'negx.jpg',
                    'posy.jpg',
                    'negy.jpg',
                    'posz.jpg',
                    'negz.jpg'
                ]
            );
cubeTexture.mapping = THREE.CubeRefractionMapping;
scene.background = cubeTexture;

2.3、设置材质的映射率

envMap: cubeTexture, 
refractionRatio:0.98, 
reflectivity:0.9

首先，需要设置环境贴图，然后设置设置率，设置贴图的反射率

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>
    <script src="../../libs/build/three-r93.js"></script>
    <script src="../../libs/examples/js/Detector.js"></script>
    <script src=