44：Three.js - 下

最新推荐文章于 2024-03-28 22:30:19 发布
最新推荐文章于 2024-03-28 22:30:19 发布
阅读量390 收藏 2
点赞数 1
分类专栏： javascript 文章标签： javascript json 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57017198/article/details/131802311
版权

一、环境贴图

  • 我们经常看到在一些网站当中会有全景(vr) 的效果，这里的效果使用threejs可以快速的实现。
    1. CubeTextureLoader加载立方体环境纹理
    2. RGBELoader环境纹理加载（推荐）

1. CubeTextureLoader加载立方体环境纹理

  • 使用CubeTextureLoader 等同于我们把我们的空间当中一个盒子，然后我们身处在盒子当中，然后给这个盒子的上下左右前后6个面都贴上对应的环境图片，从而呈现出一个全景的效果。threejs会帮我们计算和渲染好衔接的各个图片现阶段部分。

img

  1. 创建盒装环境纹理贴图

要使用的6张图片threejs官方的例子的目录下有提供，可以直接使用

图片名称中的 neg 是 negative (反面)的简写

pos 是 positive (正面)的简写

const cubeTexture = new THREE.CubeTextureLoader()
.setPath('../examples/textures/cube/Park2/') // setPath可以设置贴图的文件放置目录
.load([  // 加载6个面对应的贴图材料  顺序不能乱改
  'posx.jpg',
  'negx.jpg',
  'posy.jpg',
  'negy.jpg',
  'posz.jpg',
  'negz.jpg',
]);const cubeTexture = new THREE.CubeTextureLoader()
.setPath('../examples/textures/cube/Park2/') // setPath可以设置贴图的文件放置目录
.load([  // 加载6个面对应的贴图材料  顺序不能乱改
  'posx.jpg',
  'negx.jpg',
  'posy.jpg',
  'negy.jpg',
  'posz.jpg',
  'negz.jpg',
]);
  1. 将盒装环境贴图添加给场景
scene.background = cubeTexture;scene.background = cubeTexture;

2. RGBELoader环境纹理加载（推荐）

  • cubeTexture 的实现往往需要6张图片来完成，而使用RGBELoader这个扩展我们可以仅仅加载一个hdr文件就可以完成等同的功能，而且这类的素材会更容易获取。

  • 通过下面的网站可以获取到 hdris 纹理素材

    • https://polyhaven.com/hdris
  1. 先引入 RGBELoader 扩展库
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'
  1. 新建 加载器
const loader = new RGBELoader(); // 创建一个 RGBE加载器 目的是为了能够加载hdr文件const loader = new RGBELoader(); // 创建一个 RGBE加载器 目的是为了能够加载hdr文件
  1. 加载hdr文件然后修改场景的背景
loader.loadAsync('../assets/belfast_farmhouse_4k.hdr').then(texture=>{
  texture.mapping = THREE.EquirectangularReflectionMapping; // 将加载的材料给整体的背景进行贴合
  scene.background = texture
})loader.loadAsync('../assets/belfast_farmhouse_4k.hdr').then(texture=>{
  texture.mapping = THREE.EquirectangularReflectionMapping; // 将加载的材料给整体的背景进行贴合
  scene.background = texture
})

二、PBR材质

  • 在使用PBR材质之前我们创建的场景都称之为仿真场景。
  • 经过了14节课的学习我们在3d场景当中我们加载了一个仿真的环境场景，而我们的3D模型放置在这样的环境当中如果需要呈现更接近于现实的场景的话就得使用PBR材质，PBR材质的概念是我们通过threejs构建出更符合物理特性(反光，折射)的材料。
  • PBR 材质主要采用的是 MeshStandardMaterial 和 MeshPhysicalMaterial 来构建。我们通过使14节课的环境场景来学习PBR材质的使用
const geometry = new THREE.SphereGeometry( 1, 32, 16 ); const geometry = new THREE.SphereGeometry( 1, 32, 16 );

1. 金属材质

然后我们通过 MeshStandardMaterial 来构建一个PBR材质

metalness 金属度 取值范围 0-1 0 完全非金属 1完全的金属

roughness 材质表面的粗糙程度 0 完全光滑 1完全漫反射(极度不平整)

envMap 环境材料 ，取值为一个环境贴图，表示物体的表面的内容会结合当前的所在的周边环境(倒影反射等)

envMapIntensity: 材料跟环境的结合程度 1 完全贴合

const  material = new THREE.MeshStandardMaterial({
  metalness: 1.0, // 金属度
  roughness: 0, // 粗糙程度 1 表示漫反射 0完全光滑(镜面效果更明显)
  envMap: cubeTexture,  //给材料也设置一个指定的环境贴图
  envMapIntensity: 1 
})const  material = new THREE.MeshStandardMaterial({
  metalness: 1.0, // 金属度
  roughness: 0, // 粗糙程度 1 表示漫反射 0完全光滑(镜面效果更明显)
  envMap: cubeTexture,  //给材料也设置一个指定的环境贴图
  envMapIntensity: 1 
})

跟以往一样新建 网格模型并添加到场景当中

const ball = new THREE.Mesh( geometry, material ); 
scene.add( ball );const ball = new THREE.Mesh( geometry, material ); 
scene.add( ball );

img

2. 玻璃材质

能跟我们环境相关的材质处理金属以外，最常见的就还有玻璃。 我们使用MeshPhysicalMaterial来实现玻璃材质的效果。

对比金属材质，玻璃的效果需要多设置以下的两个属性

transmission 透光率

ior：折射率 不同的材质的折射率有所不同 ，可参考https://baike.baidu.com/item/%E5%B8%B8%E7%94%A8%E6%8A%98%E5%B0%84%E7%8E%87%E8%A1%A8/663686?fr=aladdin

const glassMaterial = new  THREE.MeshPhysicalMaterial({
  transmission:1, // 设置材质的透光率
  ior: 1.5, // 材质的折射率 0 - 2.33
  metalness: 0,
  roughness: 0.1,
  envMap: cubeTexture,
  envMapIntensity: 1 // 环境贴图对于Mesh表面的影响程度
})
const ball2 = new THREE.Mesh(geometry,glassMaterial);
ball2.position.x = 3;
scene.add( ball2 );const glassMaterial = new  THREE.MeshPhysicalMaterial({
  transmission:1, // 设置材质的透光率
  ior: 1.5, // 材质的折射率 0 - 2.33
  metalness: 0,
  roughness: 0.1,
  envMap: cubeTexture,
  envMapIntensity: 1 // 环境贴图对于Mesh表面的影响程度
})
const ball2 = new THREE.Mesh(geometry,glassMaterial);
ball2.position.x = 3;
scene.add( ball2 );

三、光和阴影

  • 在学了环境贴图和几何体之后我们对于3d世界的效果要求就会越来越高，所以我们对于有光线的场景当中的阴影也会有一定的要求，这样做出的3d场景会更加的真实。
  1. 给渲染器开启阴影配置
// 开启渲染器的阴影渲染
renderer.shadowMap.enabled = true;// 开启渲染器的阴影渲染
renderer.shadowMap.enabled = true;
  1. 新建一个地板模型，我们会让光线照射几何体然后在地板上呈现出光影的效果
// 添加一个地板
const floorGeogemtry =  new THREE.PlaneGeometry(30,30);
const material = new THREE.MeshLambertMaterial({
   color: 0xffffff
})
const floor = new THREE.Mesh(floorGeogemtry, material )
floor.rotateX(-Math.PI/2); // 平放// 添加一个地板
const floorGeogemtry =  new THREE.PlaneGeometry(30,30);
const material = new THREE.MeshLambertMaterial({
   color: 0xffffff
})
const floor = new THREE.Mesh(floorGeogemtry, material )
floor.rotateX(-Math.PI/2); // 平放
  1. 阴影最终是落在地板上，所以地板模型需要开启接收阴影生成的配置
floor.receiveShadow = true;floor.receiveShadow = true;
  1. 创建一个几何体，几何的位置要在平板之上
const ballGeomerty = new THREE.SphereGeometry(1,30,16);
const ball =  new THREE.Mesh( ballGeomerty , material);
ball.position.y  = 2;const ballGeomerty = new THREE.SphereGeometry(1,30,16);
const ball =  new THREE.Mesh( ballGeomerty , material);
ball.position.y  = 2;
  1. 因为阴影是通过几何体生成的，所以需要给几何体设置阴影属性配置
ball.castShadow = true;ball.castShadow = true;
  1. 开始添加光源。最常见的能形成阴影的三种光源是

    • PointLight 点光源，由一个点开始沿着这个点的各个方向发散的光 ( 灯泡发出的光 )

    • DirectionalLight 平行光，只沿着一个方向照射不会发散的光源 ( 一般用来模拟太阳直射 )

    • SpotLightHelper 聚光源，有一个点沿着一个方向带有一定发散角度的光 （ 舞台的聚光灯）

img

// 点光源
const pointLight = new THREE.PointLight( 0xffffff, 1 );
pointLight.position.set(50, 50, 50); 
scene.add( pointLight ); 
pointLight.castShadow = true;
// 默认的阴影效果有时候会比较差 我们可以通过修改阴影贴图的大小来让它的效果进行优化
// 通过修改阴影贴图的大小来优化 ( 默认是512*512 )
pointLight.shadow.mapSize.width = 1024;
pointLight.shadow.mapSize.height = 1024;
// 可以给阴影设置一个边缘模糊
pointLight.shadow.radius = 3;

// ---

// 平行光源一般是用来模拟大自然当中的 阳光直射的效果
const directLight=new THREE.DirectionalLight( 0xffffff, 0.5 );
// 光源的位置
directLight.position.set(50, 50, 50);
// 对于光线我们也要开启 castShadow 才能产生阴影效果
directLight.castShadow = true;
scene.add( directLight );

// ---

// 聚合光源
const spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set(50, 50, 50);
spotLight.castShadow = true;
scene.add( spotLight );// 点光源
const pointLight = new THREE.PointLight( 0xffffff, 1 );
pointLight.position.set(50, 50, 50); 
scene.add( pointLight ); 
pointLight.castShadow = true;
// 默认的阴影效果有时候会比较差 我们可以通过修改阴影贴图的大小来让它的效果进行优化
// 通过修改阴影贴图的大小来优化 ( 默认是512*512 )
pointLight.shadow.mapSize.width = 1024;
pointLight.shadow.mapSize.height = 1024;
// 可以给阴影设置一个边缘模糊
pointLight.shadow.radius = 3;

// ---

// 平行光源一般是用来模拟大自然当中的 阳光直射的效果
const directLight=new THREE.DirectionalLight( 0xffffff, 0.5 );
// 光源的位置
directLight.position.set(50, 50, 50);
// 对于光线我们也要开启 castShadow 才能产生阴影效果
directLight.castShadow = true;
scene.add( directLight );

// ---

// 聚合光源
const spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set(50, 50, 50);
spotLight.castShadow = true;
scene.add( spotLight );
    • 注意：光源对象也要开启阴影属性：directLight.castShadow = true;
  1. 通过GUI去调试不同的位置的光源的效果
// 记得要先引入GUI：import { GUI } from 'jsm/libs/lil-gui.module.min.js';
const gui = new GUI();
gui.add(lightPos,'x',30,80).name('光源的x').onChange(val=>pointLight.position.x=val)
gui.add(lightPos,'y',30,80).name('光源的y').onChange(val=>pointLight.position.y=val)
gui.add(lightPos,'z',30,80).name('光源的z').onChange(val=>pointLight.position.z=val)// 记得要先引入GUI：import { GUI } from 'jsm/libs/lil-gui.module.min.js';
const gui = new GUI();
gui.add(lightPos,'x',30,80).name('光源的x').onChange(val=>pointLight.position.x=val)
gui.add(lightPos,'y',30,80).name('光源的y').onChange(val=>pointLight.position.y=val)
gui.add(lightPos,'z',30,80).name('光源的z').onChange(val=>pointLight.position.z=val)
  1. 通过光线辅助器，观察光线位置
// 平行光源辅助器
scene.add( new THREE.DirectionalLightHelper(directLight,5) )
// 点光源辅助器
scene.add( new THREE.PointLightHelper(pointLight,5))
// 聚合光源辅助器
scene.add( new THREE.SpotLightHelper(spotLight) )// 平行光源辅助器
scene.add( new THREE.DirectionalLightHelper(directLight,5) )
// 点光源辅助器
scene.add( new THREE.PointLightHelper(pointLight,5))
// 聚合光源辅助器
scene.add( new THREE.SpotLightHelper(spotLight) )

四、作业：

  1. 3D户型图

img

  • 装修必备家具

potLightHelper(spotLight) )// 平行光源辅助器
scene.add( new THREE.DirectionalLightHelper(directLight,5) )
// 点光源辅助器
scene.add( new THREE.PointLightHelper(pointLight,5))
// 聚合光源辅助器
scene.add( new THREE.SpotLightHelper(spotLight) )


# 四、作业：

1. 3D户型图

[外链图片转存中...(img-dfXxevNt-1689732421438)]

- 装修必备家具

# 

------

# 终---
爱在你心中
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
three.js-r133.zip
06-16
three.js-r133
three.js基础案例day10——CubeTextureLoader
qq_46056472的博客
12-13 685
这个案例主要是使用CubeTextureLoader加载六张图片，并将其用作场景的背景。在场景中又创建很多小球，将加载的图片用作小球的环境贴图并给小球添加动画。
three.js通过CubeTexture加载环境贴图，和RGBELoader加载器加载hdr环境贴图
jieyucx的博客
06-26 5565
RGBELoader是一个three.js中的纹理加载器，它可以加载HDR格式的纹理。HDR格式有更高的精度和更广的颜色范围，能够更好地表现真实的光照和阴影等细节。导入RGBELoader模块：import {创建RGBELoader实例：加载HDR纹理：});加载器使用的第一个参数是纹理的路径，第二个参数是加载成功后的回调函数。在回调函数中可以获取加载成功后的texture对象并进行相关操作。第三个参数是加载进度的回调函数，第四个参数是加载失败的回调函数。
three.js 纹理贴图进阶
前端菜菜DayDayUp的博客
03-14 1528
three.js 纹理贴图进阶
Three.js 笔记
cky_123的博客
06-26 1530
three.js笔记
three.js贴图之CubeTextureLoader全景贴图
热门推荐
Bruce_wjh的博客
09-09 1万+
学习交流欢迎加群：789723098，博主会将一些demo整理共享 有时候我们在创建地图街景或者地点全景图的时候，会经常用到THREE.CubeTextureLoader来对场景Scene的背景进行贴图，使之成为一个天空盒，只不过这个天空盒不能看见其外面的情景，无论怎么缩放，始终都在全景内，这是为什么呢？原因很简单，我们是对Scene的背景颜色进行贴图；笔者从官方文档中查到其应用的方法如下： ...
Three.js-设置环境纹理及加载hdr环境贴图
damadashen的博客
07-09 1万+
Three中环境纹理（全景）的设置，CubeTextureLoader-加载立方体环境纹理、RGBELoader-HDR环境纹理加载
Three.js-webgl物联网粮仓3D可视化
03-12
项目案例使用threejs+vue+js实现粮仓三维可视化管理，加载粮仓3d场景，实现粮仓信息查询，标注，粮仓剖切，天气模拟功能，免安装即可运行，代码结构清晰，根据需求下载
Learn-Three.js-Third-Edition:学习Three.js第三版，由Packt发行
05-28
使用Three.js，无需学习WebGL，就可以使用JavaScript以直观的方式创建精美的3D图形。 通过这本书，您将学习如何利用WebGL和现代浏览器的全部潜能，直接在浏览器中创建和制作精美的3D场景并为其设置动画。 它从Three...
three.js-dev-examples-models.zip
08-26
three.js-dev-examples-models.zip
three.js-displacement-map:使用three.js的置换贴图的基本示例
07-03
三.js-位移图 使用的置换贴图的基本。 演示在这里运行：
vue + threejs 实现场景环境贴图，模型高光显示效果
CodingNoob
05-19 2591
<template> <div class="modelsBox"> <div class="modelsBox_wrapper"></div> <div class="opara-pannel"> <div> </div> <div> 三维坐标点信息 <!-- <p>{{point3d}}&lt...
threejs导入RGBELoader加载hdr出现错误
ZHU18670324781的博客
11-22 412
显示RGBEloader加载失败。
three.js 中的纹理类型
yinge0508的博客
02-24 901
1，Canvas 纹理：CanvasTexture 从 Canvas 元素中创建纹理贴图，它几乎与其基类Texture相同，但它直接将needsUpdate（需要更新）设置为了true。 2, 视频纹理： VideoTexture 创建一个使用视频来作为贴图的纹理对象；他和其基类 Texture 几乎是相同的，除了他总是将needsUpdate 设置为 true, 以便使得贴图能在视频播放时进行更新，自动创建mipmaps 也会被禁用； 代码示例 // assuming you have crea
Three.js材质效果
u014291990的博客
11-29 3989
Three.js材质效果 本文是Three.js电子书的1.5节 前面案例中几何体对应网格模型材质只是设置了一个颜色，实际渲染的时候往往会设置其他的参数，比如实现玻璃效果要设置材质透明度，一些光亮的表面要添加高光效果。 半透明效果 更改场景中的球体材质对象构造函数THREE.MeshLambertMaterial()的参数，添加opacity和transparent属性，opacity的值是0~1...
threeJS材质，添加透明材质、材质不拉伸、玻璃材质
c_qianxia5040的博客
04-12 2254
添加透明材质，比如玻璃， transparent: true,
three.js物理网格材质(玻璃)
最新发布
u014291990的博客
03-28 638
并不是所有的3D建模软件都支持设置物理材质，即便支持物理材质，也不意味着你导出的gltf模型，能包含该软件，设置的物理材质属性，比如金属度、粗糙度、透射度…除了物理材质，也有很多建模软件，自带的材质效果，是无法自动导出到threejs的。建议：能否导出美术建模软件设置的材质效果，一切以实际测试为准。不同软件，同一个软件不同版本，都会有差异。
【ThreeJS基础教程-材质纹理篇】3.3 立方纹理(天空盒)，基础网格材质StandardMaterial进阶
qq_42760477的博客
01-17 1343
【ThreeJS基础教程-材质纹理篇】3.3 立方纹理(天空盒)，基础网格材质StandardMaterial进阶
Three.js--》模型材质与纹理的使用
ztK63LrD的博客
05-04 2335
例如，材质可以定义一个几何体看起来像金属还是木板，是否透明，什么颜色等，然后添加到Mesh中才可以添加到场景中进行渲染。本章，将会带领大家熟悉Three.js中API提供的所有材质，你也会学会运用这些材质，制作精美的三维物体。环境贴图就类似于将一个几何体的全身都贴上图片，让其彷佛置身在当前的空间当中，当然这里的图片你可以采用真实的类似商业街道或者乡野田园等等。当然我们可以采用一些贴图网站提供给我们的素材，对某一几何体进行相关细节特征的编写，在这就不再过多赘述，后期项目中会逐一讲解，
Can't resolve 'three' in 'D:\three.js\three.js-mode\src\components'
06-03
这个错误通常是由于 Three.js 模块无法被正确加载所引起的。你可以尝试以下几个解决方法： 1. 确保已经正确安装了 Three.js 模块。你可以使用 npm 命令安装 Three.js 模块：`npm install three --save`。然后在你的组件中引入 Three.js：`import * as THREE from 'three'`。 2. 确保你的 webpack 配置正确设置了路径别名。在 webpack 的配置文件中，添加以下代码：`alias: { 'three': path.resolve(__dirname, 'node_modules/three/build/three.module.js') }`。这将确保 Three.js 模块被正确引入。 3. 如果你使用的是 Vue CLI 3.x，你可以尝试将 Three.js 添加到 `vue.config.js` 文件中的 `transpileDependencies` 选项中。在 `vue.config.js` 中添加以下代码： ```javascript module.exports = { transpileDependencies: [ 'three' ] } ``` 这将确保 Three.js 模块被正确编译。 如果以上方法都无法解决问题，你可以尝试卸载并重新安装 Three.js 模块，或者在 GitHub 上查找相关的解决方案。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值