首页 > 其他分享 >3.js - MeshPhysicalMaterial - 虹彩效果

3.js - MeshPhysicalMaterial - 虹彩效果

时间:2024-07-01 09:27:53浏览次数:19  
标签:虹彩 const gui material THREE js MeshPhysicalMaterial new

效果图
在这里插入图片描述


// @ts-nocheck
// 引入three.js
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 导入tween
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'
// 导入hdr加载器(专门加载hdr的)
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
// 导入gltf加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

//#region
const scence = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(2, 2, 5) // 设置相机位置
camera.lookAt(0, 0, 0)

const renderer = new THREE.WebGLRenderer({
  antialias: true // 开启抗锯齿
})
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
//#endregion

//#region
// 添加世界坐标辅助器,红色-X轴; 绿色-Y轴; 蓝色-Z轴
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)

const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
// controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05

// 每一帧根据控制器更新画面
function animate() {
  // 如果,需要控制器带有阻尼效果,或者自动旋转等效果,就需要加入`controls.update()`
  controls.update()
  // `requestAnimationFrame`:在屏幕渲染下一帧画面时,触发回调函数来执行画面的渲染
  requestAnimationFrame(animate)
  // 渲染
  renderer.render(scence, camera)
  // 更新tween
  TWEEN.update()
}
animate()
//#endregion

// --------------------------------------------------------------
// --------------------------------------------------------------

// 设置贴图
const rgbeLoader = new RGBELoader()
rgbeLoader.load('/public/assets/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', envMap => {
  // 设置球形贴图,否则,环境贴图就像一个背景图片似的
  // envMap.mapping = THREE.EquirectangularReflectionMapping // 反射
  envMap.mapping = THREE.EquirectangularRefractionMapping // 折射
  // 给场景添加环境贴图
  scence.background = envMap
  scence.environment = envMap
})

let iridescenceThicknessMap = new THREE.TextureLoader().load('../public/assets/texture/brick/brick_diffuse.jpg')
// 创建球
const geometry = new THREE.SphereGeometry(1, 32, 32)
const material = new THREE.MeshPhysicalMaterial({
  color: 0xffffff,
  roughness: 0.05,

  // 透明度:范围:0~1(完全透明),表示光线穿过物体的程度
  transmission: 1,

  reflectivity: 1, // 反射

  // 厚度:物体有了厚度,才会有折射效果
  thickness: 0.1,

  // 虹彩效果:范围:0~1,表示虹彩的强度(虹彩是一种颜色随观察角度变化而变化的效应)
  iridescence: 1,

  // 虹彩折射率:与虹彩效果`iridescence`一起使用,以定义虹彩的视觉效果
  iridescenceIOR: 1.3,

  /*
    虹彩厚度范围:这是一个数组,定义虹彩效果在物体内部或表面上的厚度范围。
                 在这个例子中,虹彩效果可能在物体的100到400单位厚度范围内最为明显。
  */
  iridescenceThicknessRange: [100, 400],

  iridescenceThicknessMap: iridescenceThicknessMap
})
const sphere = new THREE.Mesh(geometry, material)
scence.add(sphere)

const gui = new GUI()
gui.add(material, 'iridescence', 0, 1).name('虹彩色')
// gui.add(material, 'reflectivity', 0, 1).name('反射率')
gui.add(material, 'iridescenceIOR', 0, 3).name('虹彩折射率')

let iridescenceThickness = {
  min: 100,
  max: 400
}
gui
  .add(iridescenceThickness, 'min', 0, 100)
  .name('虹彩色最小厚度')
  .onChange(() => {
    material.iridescenceThicknessRange[0] = iridescenceThickness.min
  })
gui
  .add(iridescenceThickness, 'max', 0, 1000)
  .name('虹彩的最大厚度')
  .onChange(() => {
    material.iridescenceThicknessRange[1] = iridescenceThickness.max
  })


标签:虹彩,const,gui,material,THREE,js,MeshPhysicalMaterial,new
From: https://blog.csdn.net/pig_ning/article/details/140092213

相关文章

  • 337.特色品牌西餐厅瀑布流响应式网页 大学生期末大作业 Web前端网页制作 html+css+js
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有Web前端网页制作的各行各业的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这......
  • [JS] 数据类型与特殊值的判断方法
    由于JS是弱类型语言,判断一个变量的数据类型是一个很常见的需求。下面介绍一些常用的判断方法:typeof操作符typeof可以用来判断除了``null的基本数据类型和function,其它引用数据类型都会返回object`。console.log(typeof"Hello");//"string"console.log(typeof42);//"num......
  • 【JavaScript脚本宇宙】打造完美用户体验:必备JS图形库指南
    探索顶尖JavaScript图形库:从jsPlumb到mxGraph前言在现代的Web开发中,交互式图形和数据可视化库成为了不可或缺的工具。这些库不仅提供了丰富的功能,还大大简化了开发人员的工作流程。本文将介绍和比较六个流行的JavaScript图形和数据可视化库:jsPlumb、GoJS、draw2d、Cytosca......
  • 对前端js高级面向对象的理解? 如何理解前端js中的内置对象、 对象原型、原型链?
    对象前言对象是一个包含相关数据和方法的集合(通常由一些变量和函数组成,我们称之为对象里面的属性和方法)对象是javascript中的一个重要的概念,甚至有“JavaScript中万物皆是对象”的说法。首先看面向对象 面向对象编程将一个系统抽象为许多对象的集合,每一个对象代表了这个系......
  • Vite 打包如何允许存在commonjs
    首先安装依赖:npminstall@rollup/plugin-commonjs如图所示,添加plugin插件 示例代码:import{resolve}from'path';import{defineConfig}from'vite';importvuefrom'@vitejs/plugin-vue';importvueJsxfrom'@vitejs/plugin-vue-jsx&......
  • 033基于SSM+Jsp的多用户博客个人网站
    开发语言:Java框架:ssm技术:JSPJDK版本:JDK1.8服务器:tomcat7数据库:mysql5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:Maven3.3.9系统展示管理员登录管理员功能界面博文类型管理界面管理员管理我的收藏留言板管理客服聊天管理学生功......
  • 032基于SSM+Jsp的多人命题系统
    开发语言:Java框架:ssm技术:JSPJDK版本:JDK1.8服务器:tomcat7数据库:mysql5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:Maven3.3.9系统展示管理员登录学生管理教师信息命题信息系统管理教师注册教师前台个人中心公告信息试题信息......
  • 基于JSP和MySQL的小说阅读网站系统
    开头语:你好,我是计算机专业的猫哥,如果你对小说阅读网站感兴趣,欢迎联系我。开发语言:JSP数据库:MySQL技术:JSP+Java工具:MySql数据库,Java开发工具系统展示首页管理员功能模块读者后台功能模块作者后台功能模块摘要随着网络的发展,小说阅读行业迅速壮大,小说阅读网......
  • 基于JSP的体育竞赛成绩管理系统
    开头语:你好呀,我是计算机学长猫哥!如果有相关需求,文末可以找到我的联系方式。开发语言:JSP数据库:MySQL技术:JSP+Java工具:MyEclipse,Tomcat,MySQL系统展示首页管理员功能模块运动员功能模块裁判员功能模块摘要体育竞赛成绩管理系统的开发旨在适应网络市场的发......
  • 【前端网页游戏开发】Vue3+PixiJS开发2D闯关打怪游戏,开发时长为6天,成功推出v1.0正式版
    更新内容增加了地图切换功能,扩展了游戏的游玩长度,进入每一关时,击杀10只怪物就会提示通关成功,进入下一关,点击按钮后会恢复玩家的血量,然后重新生成怪物,如果玩家死亡,就会回到提示回到主界面点击后游戏最后增加了BOSS,在玩家进入第四关时会出现BOSS角色,血量为20,玩家伤害为攻击......