three.js用THREE.CubeCamera和环境贴图创建反光效果

最新推荐文章于 2024-06-06 14:06:22 发布

置顶

coder_路远

最新推荐文章于 2024-06-06 14:06:22 发布

阅读量4.4k

点赞数 3

分类专栏： Three.js入门 Three.js开发文章标签： THREE.CubeCamera THREE.CubeTextureLoader()

本文链接：https://blog.csdn.net/qq_37338983/article/details/82659082

版权

在文章：three.js贴图之CubeTextureLoader全景贴图中已经讲过全景贴图的应用，本文将进一步扩展全景贴图的功能，结合THREE.CubeCamera功能，创建出一个具有反光效果的场景，首先来看看看看THREE.CubeCamera的用法：

let cubeCamera = new THREE.CubeCamera(0.1, 10000, 128);//实例化一个cubeCamera
scene.add(cubeCamera);//将其添加到场景中
let dynamicEnvMaterial = new THREE.MeshBasicMaterial({
    envMap: cubeCamera.renderTarget, side: THREE.DoubleSide
}); //新建一个动态环境材料，envMap为环境贴图，设置为cubeCamera的渲染目标
cubeCamera.updateCubeMap(renderer, scene);//更新渲染立方体贴图

THREE.CubeCamera(near, far, cubeResolution)总共接收三个参数，前两个参数表示最近距离和最远距离，和THREE.PerspectiveCamera中的near和far一个道理，最后一个参数按字面理解为立方体分辨率，通俗的理解为物体对场景反光的清晰度，即越大越清晰，可以取128、256、512、1080等；本文实现一个球将周围场景反光，类似于镜子，你可以在球的表面上看到周围场景的镜像。demo实现效果如下图：

demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>场景反光</title>
    <s

最低0.47元/天解锁文章

coder_路远

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
three.js用THREE.CubeCamera和环境贴图创建反光效果

在文章：three.js贴图之CubeTextureLoader全景贴图中已经讲过全景贴图的应用，本文将进一步扩展全景贴图的功能，结合THREE.CubeCamera功能，创建出一个具有反光效果的场景，首先来看看看看THREE.CubeCamera的用法：let cubeCamera = new THREE.CubeCamera(0.1, 10000, 128);//实例化一个cubeCam...
复制链接

扫一扫

专栏目录