Three.js阴影

这篇具有很好参考价值的文章主要介绍了Three.js阴影。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

Three.js入门

Three.js光源

Three.js阴影

Three.js纹理贴图

使用灯光后,场景中就会产生阴影。物体的背面确实在黑暗中,这称为核心阴影(core shadow)。我们缺少的是落下的阴影(drop shadow),即对象在其他对象上创建阴影。本文主要探索是落下的阴影(drop shadow)的相关内容。

Three.js阴影,three.js,three.js

支持阴影的光源类型

前面的文章我们有介绍过,只有部分光源支持阴影:

  • 平行光(DirectionalLight)
  • 点光源(PointLight)
  • 聚光灯(SpotLight)

它们对应的阴影在three.js中也有对应的实现类:

  • 平行光阴影(DirectionalLightShadow)
  • 点光源阴影(PointLightShadow)
  • 聚光灯阴影(SpotLightShadow)
阴影的代码实现

在入门系列中有介绍阴影的基本代码实现,这里再简单叙述一遍。主要分为四个步骤:

  1. 告诉渲染器显示阴影贴图;
    renderer.shadowMap.enabled = true;
    
  2. 对需要投影的物体设置castShadowtrue
    sphere.castShadow = true; 
    
  3. 对需要接收投影的物体设置receiveShadowtrue
    plane.receiveShadow = true; 
    
  4. 最后,对可以产生阴影的光源设置castShadowtrue
    light.castShadow = true;
    

至此,我们应该就可以在接收投影的物体上看到阴影了!

阴影的实现原理

每次渲染时,three.js 将为每个支持阴影的光源都会做一次渲染。

  • 光源具有一个相机,以这个相机为视角进行渲染;
  • 光源的渲染结果被作为纹理存储起来,也就是 阴影贴图(shadow map);
  • 阴影贴图将被用于所有需要接受阴影的材质(material),并投影到几何体(geometry)上。

    有些材质不接受光照,所以材质也会影响阴影的显示。

Three.js阴影,three.js,three.js

阴影的优化和调整
阴影贴图大小
directionalLight.shadow.mapSize.width = 1024;
directionalLight.shadow.mapSize.height = 1024;
  • 阴影贴图越大约清晰,但是越消耗资源;
  • 512和1024大小对比图,就可以看出来对比效果是1024更清晰(运行效果更明显)。
    Three.js阴影,three.js,three.js
相机设置
幅度

我们先来看一个阴影不完整的现象:

Three.js阴影,three.js,three.js

正交相机OrthographicCamera

平行光源用的是正交相机进行渲染:

export class DirectionalLight extends Light<DirectionalLightShadow> {
    shadow: DirectionalLightShadow;
}

export class DirectionalLightShadow extends LightShadow<OrthographicCamera> {
    camera: OrthographicCamera;
}
  1. 用相机辅助线看一下光线的阴影的相机视角:
const cameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
scene.add(cameraHelper);

Three.js阴影,three.js,three.js
球体超过了阴影的相机视角的上边缘。

  1. 扩大相机的上边缘
directionalLight.shadow.camera.top = 8; // 这个值不是固定的,视场景不同

Three.js阴影,three.js,three.js

far

和相机的渲染一致,设置相机的far,可以控制是否显示阴影。

directionalLight.shadow.camera.far = 100;

Three.js阴影,three.js,three.js

Blur 模糊

我们可以使用 radius 属性控制阴影模糊:

directionalLight.shadow.radius = 20

Three.js阴影,three.js,three.js

阴影的边缘会有模糊的效果。

阴影的类型

Three.js中,ShadowMapType枚举定义了几种阴影映射的类型:

  • BasicShadowMap:基本阴影映射类型,使用简单的阴影投影算法生成阴影。这是默认的阴影映射类型。

性能优秀但是质量不好(默认)

  • PCFShadowMap:使用 Percentage-Closer Filtering (PCF)技术生成阴影,以获得更平滑的阴影边缘效果。

性能稍差但是拥有光滑的边缘

  • PCFSoftShadowMap:使用软阴影技术生成阴影,通过多次采样和模糊处理来产生更柔和的阴影效果。

性能稍差但是拥有更 soft 的边缘

  • VSMShadowMap:使用Variance Shadow Mapping (VSM)技术生成阴影,以获得更高质量的阴影效果和更柔和的阴影边缘。

性能稍差,更多限制,有着意想不到的效果

代码实现:

renderer.shadowMap.type = THREE.BasicShadowMap;

我项目中使用,倒是看不出来有啥大的区别。文章来源地址https://www.toymoban.com/news/detail-634148.html

到了这里,关于Three.js阴影的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • three.js(四):react + three.js

    绘制多个立方体 1.搭建react+ts 项目 react+ts 的用法可参考此链接: https://react-typescript-cheatsheet.netlify.app/docs/basic/setup 2.安装three依赖 3.安装路由 react-router-v6 的用法可参考此链接:https://juejin.cn/post/7088526716049555492 4.用路由组件包裹APP。 index.tsx 5.构建项目页面 src/view/Basics.tsx src/

    2024年02月11日
    浏览(55)
  • three.js(三):three.js的渲染结构

    概述 three.js 封装了场景、灯光、阴影、材质、纹理和三维算法,不必在直接用WebGL 开发项目,但有的时候会间接用到WebGL,比如自定义着色器。 three.js 在渲染三维场景时,需要创建很多对象,并将它们关联在一起。 下图便是一个基本的three.js 渲染结构 Renderer 渲染器 Renderer

    2024年02月11日
    浏览(43)
  • three.js(二):webpack + three.js + ts

    webpack 依旧是主流的模块打包工具; ts和three.js 是绝配,three.js本身就是用ts写的,ts可以为three 项目提前做好规则约束,使项目的开发更加顺畅。 1.创建一个目录,初始化 npm 2.调整 package.json 文件 确保安装包是 private(私有的) ,并且移除 main 入口。这可以防止意外发布你的代码

    2024年02月11日
    浏览(38)
  • Three.js--》探索Three.js:学习和就业的完整指南

    目录 three.js的学习建议 WebGL前端工程师工作待遇相关问题 本篇文章主要给大家介绍一下如何学习Web3D可视化,具体说就是怎么学习WebGL、Three.js、3D建模等。 three.js的学习建议 在过去互联网是人联网的时代,开发人和人之间的联系的Web应用,对于3D可视化需求不强烈。在物联网

    2024年02月06日
    浏览(37)
  • three.js(一):认识three.js并创建第一个3D应用

    1-three.js 是什么? three.js是用JavaScript编写的WebGL第三方库; three.js 提供了非常多的3D显示和编辑功能; 具体而言,three.js 是一款运行在浏览器中的 3D 引擎,可以用three.js 创建各种三维场景,并对其进行编辑; 在three.js 的官网上看到许多精彩的演示和文档 three.js 官网:https://thre

    2024年02月11日
    浏览(98)
  • 【Three.js】Three.js中的纹理—图像应用和属性调整

      Three.js是一种强大的JavaScript库,用于创建基于Web的交互式3D图形和动画。在Three.js中,纹理是一项重要的功能,它允许我们将图像应用到几何体对象上,并通过调整纹理的属性来实现更丰富的视觉效果。 本文将介绍Three.js中的纹理功能,并演示如何将图片作为纹理应用到几何

    2024年02月15日
    浏览(55)
  • three.js从入门到精通系列教程003 - three.js透视相机(PerspectiveCamera)

    透视相机(PerspectiveCamera) 它是用来模拟人眼所看到的景象,它也是3D场景的渲染中使用得最普遍的投影模式。呈现的效果,类似眼睛看东西,近大远小 源码下载地址: three.js从入门到精通系列教程002 - three.js透视相机(PerspectiveCamera)

    2024年01月19日
    浏览(55)
  • three.js从入门到精通系列教程002 - three.js正交相机OrthographicCamera

    正投影相机-OrthographicCamera,通过正投影相机渲染出来的物体的尺寸都一样,不会因为观察距离的远近而出现近大远小的情况 源码下载地址 three.js从入门到精通系列教程002 - three.js正交相机OrthographicCamera

    2024年01月20日
    浏览(48)
  • Three.js基础入门介绍——Three.js学习三【借助控制器操作相机】

    在Three.js基础入门介绍——Three.js学习二【极简入门】中介绍了如何搭建Three.js开发环境并实现一个包含旋转立方体的场景示例,以此为前提,本篇将引进一个控制器的概念并使用”轨道控制器”(OrbitControls)来达到从不同方向展示场景内容的效果。 Three.js的控制器 three.js的核

    2024年02月04日
    浏览(66)
  • Three.js3D可视化介绍,以及本地搭建three.js官网

    一、什么是Three.js three.js官网 :https://threejs.org/ Three.js 是一个基于 WebGL 的 JavaScript 3D 图形库,它可以轻松地在浏览器中 创建3D场景和动画 。同时,它支持外部模型和纹理的导入,让开发者可以更加便捷地创建出震撼的 3D场景 。 Three.js 的应用场景非常广泛,主要包括以下几个

    2024年02月09日
    浏览(80)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包