threeJS 创建反光效果

最新推荐文章于 2025-03-17 11:15:51 发布
最新推荐文章于 2025-03-17 11:15:51 发布
阅读量4.8k 收藏 7
点赞数
分类专栏： threejs 文章标签： 反光效果
CC BY-NC-ND 4.0
本文链接：https://blog.csdn.net/qq_42683219/article/details/105882744
版权

参看博客Three.js 使用cubeCamera相机创建反光效果

效果图

在这里插入图片描述

总体步骤

① 创建场景
② 创建相机
③ 创建物体
④ 创建渲染器

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>Title</title>
    <style>
        html,body{
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="container">

</div>
<script type="module">

</script>
</body>
</html>

导入文件,创建全局变量和函数

 import * as THREE from "./js/three.module.js";
    import {OrbitControls} from "./js/OrbitControls.js";
    import Stats from './js/stats.module.js';
    let renderer,scene,camera,spotLight,status,cubeCamera;
action();
    function action() {
        onload();
        run();
    }
      function onload(){

     }
     function run()
     {
     }
     function onResize()
     {
     }

①创建场景

onload函数中

  let container=document.getElementById("container");//获取container
 scene=new THREE.Scene();//创建场景

②创建相机

onload函数中

 camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,10000);
 camera.position.set( 30, 30, 100 );

③创建物体

onload函数中

 let ambientLight=new THREE.AmbientLight();//添加环境光
        scene.add(ambientLight);
        let directionalLight=new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(0,10,10);
        scene.add(directionalLight);
        let skyCube=new THREE.CubeTextureLoader().setPath("./img/").load([  'px.jpg', 'nx.jpg',
            'py.jpg', 'ny.jpg',
            'pz.jpg', 'nz.jpg']);
        scene.background=skyCube;//添加环境贴图
        let materialLoader=new THREE.TextureLoader().load("./img/disturb.jpg");//加载贴图
        let cubeGeometry=new THREE.BoxBufferGeometry(2,2,2,20);//创建立方体
        let material=new THREE.MeshPhongMaterial({map:materialLoader});
        let cubeMesh=new THREE.Mesh(cubeGeometry,material);
        cubeMesh.position.set(-10,0,0);
        scene.add(cubeMesh);

        cubeCamera=new THREE.CubeCamera(0.1, 1000, 256);//使用THREE.CubeCamera可以为场景中的所要渲染的物体创建快照，并使用这些快照创建CubeMap对象。但是需要确保摄像机放置在THREE.Mesh你所想显示反射的位置上。
        //近 - 近裁剪距离。
        //远 - 裁剪距离
        //cubeResolution - 设置立方体边缘的长度。
        scene.add(cubeCamera);
        let geometry = new THREE.SphereBufferGeometry( 2, 100, 50 );
        let geoMaterial=new THREE.MeshBasicMaterial({envMap:cubeCamera.renderTarget.texture});
        let geoMesh=new THREE.Mesh(geometry,geoMaterial);
        scene.add(geoMesh);
        let torusMesh=new THREE.Mesh(new THREE.TorusGeometry(2, 1, 16, 100), material);
         torusMesh.position.set(10,0,0);
         scene.add(torusMesh);

④ 创建渲染器

onload函数中

renderer=new THREE.WebGLRenderer({antialias:true});
        renderer.setPixelRatio(window.devicePixelRatio);
        //renderer.setClearColor(0xEEEEEE);
        //renderer.autoClear = false;
        renderer.gammaInput=true;
        renderer.gammaOutput=true;//inear转gamma
        renderer.setSize(window.innerWidth,window.innerHeight);
        container.appendChild(renderer.domElement);

        status=new Stats();//创建频率显示
        container.appendChild(status.dom);//频率挂到左上角
        let contorl=new OrbitControls(camera,renderer.domElement);//添加鼠标滚动缩放，旋转对象
        window.addEventListener('resize',onResize,false);//浏览器大小改变监听

onResize函数中

 function onResize() {
        camera.aspect=window.innerWidth/window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth,window.innerHeight);
    }

run函数中

  function run() {
        requestAnimationFrame(run);
        cubeCamera.update(renderer,scene);
        renderer.render(scene,camera);
        status.update();
    }

总代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>Title</title>
    <style>
        html,body{
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="container">

</div>
<script type="module">
    import * as THREE from "./js/three.module.js";
    import {OrbitControls} from "./js/OrbitControls.js";
    //import { GUI } from './js/dat.gui.module.js';
    import Stats from './js/stats.module.js';
    let renderer,scene,camera,spotLight,status,cubeCamera;

    action();
    function action() {
        onload();
        run();
    }
    function onload() {
        let container=document.getElementById("container");//获取container
        scene=new THREE.Scene();//创建场景
        camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,10000);
        camera.position.set( 30, 30, 100 );

        let ambientLight=new THREE.AmbientLight();//添加环境光
        scene.add(ambientLight);
        let directionalLight=new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(0,10,10);
        scene.add(directionalLight);
        let skyCube=new THREE.CubeTextureLoader().setPath("./img/").load([  'px.jpg', 'nx.jpg',
            'py.jpg', 'ny.jpg',
            'pz.jpg', 'nz.jpg']);
        scene.background=skyCube;
        let materialLoader=new THREE.TextureLoader().load("./img/disturb.jpg");
        let cubeGeometry=new THREE.BoxBufferGeometry(2,2,2,20);
        let material=new THREE.MeshPhongMaterial({map:materialLoader});
        let cubeMesh=new THREE.Mesh(cubeGeometry,material);
        cubeMesh.position.set(-10,0,0);
        scene.add(cubeMesh);

        cubeCamera=new THREE.CubeCamera(0.1, 1000, 256);
        scene.add(cubeCamera);
        let geometry = new THREE.SphereBufferGeometry( 2, 100, 50 );
        let geoMaterial=new THREE.MeshBasicMaterial({envMap:cubeCamera.renderTarget.texture});
        let geoMesh=new THREE.Mesh(geometry,geoMaterial);
        scene.add(geoMesh);
        let torusMesh=new THREE.Mesh(new THREE.TorusGeometry(2, 1, 16, 100), material);
         torusMesh.position.set(10,0,0);
         scene.add(torusMesh);

        renderer=new THREE.WebGLRenderer({antialias:true});
        renderer.setPixelRatio(window.devicePixelRatio);
        //renderer.setClearColor(0xEEEEEE);
        //renderer.autoClear = false;
        renderer.gammaInput=true;
        renderer.gammaOutput=true;//inear转gamma
        renderer.setSize(window.innerWidth,window.innerHeight);
        container.appendChild(renderer.domElement);

        status=new Stats();//创建频率显示
        container.appendChild(status.dom);//频率挂到左上角
        let contorl=new OrbitControls(camera,renderer.domElement);//添加鼠标滚动缩放，旋转对象
        window.addEventListener('resize',onResize,false);//浏览器大小改变监听
    }
    function onResize() {
        camera.aspect=window.innerWidth/window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth,window.innerHeight);
    }

    function run() {
        requestAnimationFrame(run);
        cubeCamera.update(renderer,scene);
        renderer.render(scene,camera);
        status.update();
    }

</script>
</body>
</html>
浅聊 Three.js 屏幕空间反射SSR-SSRShader
qq_21476953的博客
07-18 554
通过确保 viewReflectRayZ <= vZ，可以保证光线在行进过程中深度值是连续变化的，从而提高插值的精度，避免因不连续的深度值变化而产生的伪影。在进行光线行进时，我们希望光线从起点出发，经过所有可能的深度值，直到目标位置。viewReflectRayZ 是矫正后的深度值，它应该始终小于或等于 vZ，以确保光线距离起点从近到远进行插值和计算。如果 viewReflectRayZ 大于 vZ, 这种情况可能导致光线跳过当前像素，直接到达更远的像素，产生穿透问题。渲染管线中的相机和屏幕示意图。
Three.js - 通过 Reflector.js 创建镜面反射
ithanmang
09-07 4930
类似境面反射可以使用CubeCamera但是CubeCamera更适用于创建物体自身对环境的反射，但是如果想要创建一面镜子的话使用CubeCamera会难调试所反射物体的位置，而且镜面中的物体不会随着控制器的缩放而变动。 使用Reflector.js可以很容易的创建一面镜子，并且镜子中的对象会依据发光体的缩放而缩放，而且可以调试镜子的发光色，类似墨镜的效果。 1、示例 示例 http://...
THREE.JS 使用CUBECAMERA相机创建反光效果
aoxuestudy的专栏
07-27 590
THREE.JS 使用CUBECAMERA相机创建反光效果 先看下效果 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Threejs使用CubeCamera创建反光效果</title> <style type="text/css"> html, body {
学习threejs，使用MeshLambertMaterial漫反射材质
最新发布
我哎GIS博客
03-17 1411
本文详细介绍如何基于threejs在三维场景中使用MeshLambertMaterial漫反射材质，亲测可用。希望能帮助到您。一起学习，加油！加油！
Three.js 镜面反射Reflector 为MeshStandardMaterial增加Reflector能力
宏斌的博客
01-15 1597
根据源码进行修改为 MeshStandardMaterial实现反射。区别：官方的案例更像一个镜子 没有纹理等属性 也没有透明度修改。
THREEJS物体反射效果
hcdu
04-04 2404
但是设置为false时，另外可能有些精度的场景会出现叠加图层闪烁z-buffer这种问题，处理办法是，创建相机【PerspectiveCamera】尽量缩小场景可见范围，根据自己场景的调整相机的【near/far】，我这个0.1/10是模型本来就长度不到3，这个根据自己条件调整。object是一个数组，可以先声明一个数组，把要做反射的物体添加到数组里，然后在SSRPass的selects里添加。处理方式和上一个问题雷同，把camera的near【近切面】设置大一点即可，根据自身场景调整，不多赘述。
【threejs教程10】threejs添加镜面反射
c_wengy的博客
04-24 1805
本文将引导你通过Three.js框架实现一个简单的镜面反射效果。我们将创建两个具有镜面反射效果的立方体，并让它们反射不同的环境。
学习threejs，设置envMap环境贴图创建反光效果，天空贴图
11-27
在Three.js中设置envMap环境贴图以创建反光效果是一个涉及图像准备、3D材质配置和性能考量的综合性任务。通过精心的设计和优化，可以实现令人印象深刻的3D视觉效果，特别是增强场景中对象表面的反射特性，为用户提供...
学习threejs，使用CubeCamera相机创建反光效果，贴图
11-28
以上步骤概括了使用Three.js和CubeCamera创建反光效果的基本流程。需要注意的是，为了保证良好的性能，通常需要合理控制环境贴图的更新频率，并注意在移动相机或修改场景中的对象时，更新相应的环境贴图以反映最新的...
Three.js - 使用 CubeCamera 创建反光效果
ithanmang
09-06 2838
使用环境贴图可以创建虚假的反光效果，但是是静态的，并且不能实现镜面反射的效果，镜面所反射的物体是动态的，可以通过THREE.CubeCamera来实现镜面反射的效果。 1、示例 示例 http://ithanmang.com/threeJs/home/201809/20180906/01-envMap-cubeCamera-texture.html 效果 可以看到，不仅可以反射环...
three.js用THREE.CubeCamera和环境贴图创建反光效果
Bruce_wjh的博客
09-12 4616
在文章：three.js贴图之CubeTextureLoader全景贴图中已经讲过全景贴图的应用，本文将进一步扩展全景贴图的功能，结合THREE.CubeCamera功能，创建出一个具有反光效果的场景，首先来看看看看THREE.CubeCamera的用法： let cubeCamera = new THREE.CubeCamera(0.1, 10000, 128);//实例化一个cubeCam...
threejs中3D模型使用透明发光材质
05-02
本项目探讨的主题是“threejs中3D模型使用透明发光材质”，这是一个关于如何为3D模型添加独特视觉效果的技术。透明发光材质在3D场景中常用于模拟玻璃、半透明塑料或其他具有透光特性的物体，它能赋予模型一种仿佛从...
reflection:在three.js 中进行反射实验。 Git克隆和凉亭安装
07-12
Boilerplate-threejs Threejs 项目的简单样板。 克隆和凉亭安装。
JavaScript实现的灯光反射效果
07-10
JavaScript灯光反射效果，这个效果通过JS实现了灯光反射效果，很酷吧。 建议开发童鞋使用统一开发环境UDE来进行查看、调试、开发哦~~其属于MM应用引擎的应用开发部署工具，它是基于云计算基础架构，依托中国移动IDC资源池基础业务的互联网应用开发运行托管平台，为Web和移动应用开发者提供应用开发、测试、跨平台编译（Android/iOS）、应用发布和云端托管一站式服务，帮助开发者快速构建和维护应用。
threejs 反射的实现
qq_40390815的博客
04-12 603
threejs实现反射 新建渲染目标：WebGLRenderTarget。通过EffectComposer混合后期处理。
三维场景中创建镜面反射效果(three.js实战9)
点燃火柴的博客
07-02 4524
创建镜面效果1. demo效果2. 实现要点2.1 创建三维模型2.2 创建镜面2.3 场景动画更新3. demo代码 1. demo效果 2. 实现要点 2.1 创建三维模型 demo中涉及到的模型包括：一个胶囊体，一个甜圈圈，一个多面体小球，和五个面的墙面，上一篇文章专门讲述胶囊体和甜圈圈的创建，此处不再细说，多面体小球也非常简单，直接使用IcosahedronGeometry几何体创建即可 function createSmallSphere() { const geometry = new
three.js使用CubeCamera创建反光效果，动态环境贴图实现，立方体全景贴图(vue中使用three.js83)
点燃火柴的博客
06-05 4008
使用CubeCamera创建反光效果1.demo效果2. 实现要点2.1 创建立方体相机CubeCamera2.2 使用动态环境贴图材质2.3 render中更新立方体相机2.4 创建场景的全景贴图2.5 创建场景中的模型3. demo代码 1.demo效果 2. 实现要点 2.1 创建立方体相机CubeCamera 创建立方体的语法如下 const cubeCamera = new THREE.CubeCamera( near, far, cubeRenderTarget) 参数说明 near
threejs 用cubeCamera实现地面反射效果
AndyQu的博客
09-17 2205
threejs 用cubeCamera实现地面反射效果
Three.js - 设置折射贴图比率 refractionRatio 加环境贴图实现反射效果
ithanmang
09-07 3493
通过给物体设置环境贴图envMap可以实现虚假的反射效果，通过设置CubeCamera可以实现动态的反光，设置材质的refractionRatio 属性可以实现透明反射的效果。 1、示例 示例 http://ithanmang.com/threeJs/home/201809/20180907/03-refraction-texture.html 效果 2、实现步骤 2.1、refr...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kinghiee

爸爸们求打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值