Threejs制作窗户透亮效果

简介: 这篇文章讲解了如何在Three.js中制作窗户的透亮效果,包括设置透明材质和光照以实现逼真的窗户渲染效果的技术细节。

应该经常看到这样的图片,昏暗的屋里,阳光通过窗户照射进来,将照射到的地方照亮,没有照到的地方依然昏暗,

Threejs提供了一种特殊的灯光用来实现上图中的效果叫RectAreaLight,他是一种平面光源,平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源。下面一起实践一下:

首先需要创建基础的场景,包括:场景,相机,渲染器等。这部分之前已经有很多,不再赘述了,然后我们需要在场景中放置一个box,用来测试灯光的效果,

    initBox(){
      let geometry = new THREE.BoxGeometry(10,10,10);//创建一个几何体
      let material = new THREE.MeshStandardMaterial ({color:'#FF0000'});//创建材质
      this.box = new THREE.Mesh(geometry, material);//创建网格模型
      this.box.position.set(0,0,0)
      this.scene.add(this.box);//添加到场景中
    },

然后创建RectAreaLight,为了更直观的查看灯光的位置,在添加上RectAreaLightHelper,这是一个专门描绘大小和形状的辅助工具。

    initRectAreaLight(){
      const rectLight = new THREE.RectAreaLight( 0xffffff, 1,  10, 10 );
      rectLight.position.set( 50, 50, 0 );
      rectLight.lookAt( 0, 0, 0 );
      this.scene.add( rectLight )
      const rectLightHelper = new RectAreaLightHelper( rectLight );
      this.scene.add( rectLightHelper );
    },

最终效果如下,上方的白色是窗户,下面的盒子是被照射到的,可以看到盒子面对窗户的方向是亮的,背对着的是黑色,和上面图效果有差距,但是原理是这样子。

相关文章
|
2月前
ThreeJs使用tweenjs动画库制作动画
这篇文章介绍了如何在Three.js中使用Tween.js动画库来简化动画制作流程,并演示了如何通过简单的代码实现动画效果。
100 1
ThreeJs使用tweenjs动画库制作动画
|
2月前
ThreeJs场景中添加视频
这篇文章详细说明了如何在Three.js场景中添加并播放视频,包括视频纹理的创建与应用,以及如何将视频流显示在3D模型的表面上。
47 2
ThreeJs场景中添加视频
|
2月前
Threejs制作海面效果
这篇文章详细介绍了利用Three.js制作逼真海面效果的过程,包括设置Water材质、调整光照及实现波动动画的步骤。
43 0
Threejs制作海面效果
|
2月前
|
编解码 前端开发 JavaScript
ThreeJs制作模型图片
这篇文章介绍了如何使用Three.js将一张图片转化为3D场景中的像素化模型,通过提取图片的像素颜色并将它们应用到3D立方体上,形成一种特殊的图像展示效果。
39 0
ThreeJs制作模型图片
|
2月前
Threejs使用CubeCamera实现环境映射
这篇文章详细介绍了如何在Three.js中使用CubeCamera来实现环境映射,包括创建CubeCamera、设置反射材质以及实时更新渲染结果的具体步骤。
77 3
|
2月前
Threejs制作骨骼模型
这篇文章详细介绍了在Three.js中创建骨骼动画的过程,包括骨骼节点的创建、权重设置以及控制骨骼关节实现动态效果的步骤,并通过一个具体的圆柱体模型演示了如何添加和控制骨骼动画。
33 2
|
2月前
Threejs制作大海效果
这篇文章详细介绍了使用Three.js制作大海效果的技术细节,包括创建水面模型、应用波纹纹理以及实现动态波浪效果的方法。
42 0
|
7月前
|
JavaScript 开发工具 git
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
Three.js封装了WebGL的底层细节,是一款运行在浏览器中的 3D 引擎,可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象,目前在Git上已经拥有90k+的star。
176 0
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
|
存储 前端开发 定位技术
brython | 笨办法写个连连看-3.地图制作
brython | 笨办法写个连连看-3.地图制作
147 4