有趣的知识点threejs

合集 - 有意思的(95)

1.使用递归的方式实现数组、对象的深拷贝2023-08-302.js获取url的参数2023-09-043.弹框组件el-tree+vue3必坑指南2023-09-044.在Vue 3中，与Vue 2相比，有一些改进和优化的diff算法。2023-09-055.浏览器解析html2023-09-056.浏览器渲染HTML2023-09-057.Object.entries()2023-09-058.vue实现虚拟dom转换成真是dom的原理2023-09-059.全局封装组件处理并发请求不连续的loading2023-09-0610.为什么vue数组下标修改监听不到2023-09-0711.vue里表单验证的v-model.number的坑2023-09-0812.有意思的css2023-09-0913.js原生语音转文字2023-09-0914.js手写一个call2023-10-1415.js手写一个apply2023-10-1416. 手写一个 bind 方法2023-10-1417.js寄生组合式继承2023-10-1418.react中的useState修改状态获取最新状态值2023-10-1519.函数柯里化js2023-10-2020.axios请求中断_下载中断和下载进度2023-10-2021.axios请求重试_核心原理2023-10-2022.axios请求重试_axios-retry插件2023-10-2023.虚拟列表-渲染 10 万条数据2023-10-2124.vue-office 组件2023-10-2125.threejs2023-10-2226.把原生 DOM 标签转换后加入到 3D 场景空间中显示2023-10-2427.three.js 物体要使用光线投射技术，计算是否点击位置与物体有交叉2023-10-2428.threejs基本函数2023-10-2529.二分查找算法2023-10-2630.js判断字符串是否连贯2023-10-2631.世界坐标系和模型坐标系2023-10-2832.设置车模型中每个小物体 castShadow = true2023-11-0433.Vue3 echarts 组件化使用 resizeObserver2023-11-0534.网页验证码的作用 *网页中几种常见验证码2023-11-0735.多个装饰器一起es6装饰器2023-11-0736.flex属性2023-11-0737.移动端兼容问题2023-11-0738.那什么是URL、URI、URN？2023-11-0739.threejs的坐标渲染和着色2023-11-1040.着色器2023-11-1041.基于 three.js 加载器分别加载模型2023-11-1042.echarts自适应大屏方案 亲测有用2023-11-1643.有趣的工具2023-11-1744.关于threejs中鼠标左右移动，左动看右边，右动看左边2023-11-17

45.有趣的知识点threejs2023-11-18

46.uniapp底层跨端原理2023-11-2247.防止XSS（跨站脚本攻击）漏洞2023-11-2248.启动vite和electron项目配置多个主进程2023-11-2349.margin-bottom:-1px无效的问题2023-11-2450.九宫格css2023-11-2451.css伪类选择器2023-11-2452.uniapp关于uni.getUserProfile的使用2023-11-3053.uniapp获取用户信息2023-12-0454.在项目中使用UEditor碰到的几个问题2023-12-0455.一维数组转二位数组2023-12-1056.使用此函数对数组进行分块，并在最后一组添加特定的值2023-12-1057.如果win报错无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本2023-12-1158.阅读时间缓存（快应用）2023-12-2859.uniapp中OnShow获取缓存2024-01-1060.之前使用抖音的担保支付，后俩转换成通用的交易方式2024-01-1161.width:100%与width:auto区别2024-01-1562.leetcode1047字符串反复去重（栈）2024-01-1563.由于<textarea>在某些平台上会创建一个原生控件，这可能会导致层级问题，尤其是在安卓设备上。在uni-app中，对于这种情况，通常推荐的解决方案是使用<cover-view>组件来覆盖原生组件，但是这种做法通常用于覆盖地图、视频等原生组件，而不是<textarea>2024-01-2164.记录一次uniapp使用scrollview2024-01-2265.微前端(矩阵项目)代码将单个文件合并到指定分支2024-01-2266.推荐一个炫酷爆炸例子2024-01-2467.思维导图推荐包2024-01-2468.自适应高度的过渡2024-01-2469.自定义滚动条边角2024-01-2870.实现下划线动画2024-01-2971.js不同类型比较2024-01-3172.css2024-02-0273.sse2024-02-1874.ECMAScript 语言规范每年都会进行一次更新，而备受期待的 ECMAScript 2024 将于 2024 年 6 月正式亮相。目前，ECMAScript 2024 的候选版本已经发布，为我们带来了一系列实用的新功能。2024-02-1975.前端scale负数表示翻转2024-02-1976.关于小说阅读前端翻页插件推荐turn.js2024-02-1977.数组扁平化2024-02-1978.Vue-Plugin-HiPrint2024-02-2079.好玩的vue组件2024-02-2080.DOMRect对象2024-02-2081.js中关于return和if条件处理2024-02-2082.关于文心一言不能打开F12开发者工具2024-02-2083.js文字处理两端展示中间省略号2024-02-2084.[popover, select] el-popover内有select的时候在选择后会自动关闭2024-02-2085.说一下flex的属性2024-02-2686.vue3中404路由匹配规则2024-02-2687.shape-outside2024-02-2788.createRange表示文档中的一个范围——用于js判断文字添加省略号情况2024-02-2889.uniapp+vue3 使用list触底+下拉2024-03-1190.diff算法vue2024-03-1291.动态修改manifest.json2024-03-1892.记录一下大小写导致的问题2024-03-2093.微信小程序关于小说类使用官方阅读器2024-03-2994.VS Code侧边栏的“资源管理器”丢了2024-04-1295.nestjs中服务引入控制器和模块的作用2024-08-04

收起

轨道控制器内部会取出摄像机初始位置坐变化

camera.position.z = 0.1

调整立方体沿着 z 轴做 -1 缩小（镜面翻转）

cube.scale.set(1, 1, -1)

在什么条件下让标签触发鼠标交互事件

原生dom pointerEvents = ‘all’
渲染器配置 none

three.js 物体使用光射投影

Raycaster

纹理图片开启高光颜色

texture.colorSpace = THREE.SRGBColorSpace

自定义属性

userData

透明度贴图：可以根据图片综合计算某个像素点是否透明

透明度/透明度贴图，需要设置材质的 transparent：true 才可以支持透明度
const material = new THREE.MeshBasicMaterial({ 
    map: texture,
    // alphaMap: alphaTexture, 
    // transparent: true, 
    // opacity: 0.1, 
    aoMap: aoTexture // 2. 设置环境遮挡贴图
  })

  const mesh = new THREE.Mesh(geometry, material)
  
  // 扩展：给目标物体设置第二组 UV 坐标（影响贴图像素点转换对应映射过程）
  // 当 aoMap 直接无效果的时候，设置第二组 UV 坐标来影响贴图贴过来时的明暗效果
  mesh.geometry.setAttribute('uv2', new THREE.BufferAttribute(mesh.geometry.attributes.uv.array, 2))

粗糙度 光泽度（金属度） 设置

 roughness: 1, // 粗糙度设置（0 光滑， 1 粗糙）
 roughnessMap: roughnessTexture, // 同时设置时，上个属性建议为 1
 metalness: 1, // 金属度（光反射的光泽程度，1 是最高）
 metalnessMap: metalnessTexture // 金属度贴图
  displacementMap: displacementTexture, // 位移贴图
    displacementScale: 0.2, // 位移范围（0-1）
	normalMap: normalTexture // 法线贴图（影响光照）
	环境贴图采用 CubeTextureLoader 构造函数实现，设置 6 张图，代表 6 个方向顺序设置
	物理材质——清漆度（仅限MeshPhysicalMaterial）
		 envMap: cubeTexture,
    roughness: 0,
    metalness: 1,
    // 1. 设置清漆度（0 - 1）
    clearcoat: 1,
    // 2. 设置清漆度的粗糙度
    clearcoatRoughness: 0

建模师建好的模型物体，可以通过 three.js 提供的加载器，加载到网页中显示此物体和操作

.gltf 文件（类似 JSON 格式内容）

.glb 文件（二进制流数据存储）

.fbx 文件...
model.traverse遍历模型每一个小模型
 // 如果有轨道控制器，并在渲染循环调用过 update 方法，使用 target 属性影响观察点
controls.target = new THREE.Vector3(0.47, 0.99, 0.06)

光

环境光：基础光源，均匀照亮场景中所有受光照影响的材质物体
没有方向，不能投射阴影，只能照亮物体，但是没有光斑
金属度 1，粗糙度 0，无环境贴图时，放射颜色为黑色，物体自身为黑色并不是灯光的问题
点光源：从一个点向各个方向发射的光源。模拟灯泡发出的光。有方向可投射阴影和光斑
平行光：沿着特定方向发射的光线。模拟太阳光，太阳足够远，因为我们认为太阳光是平行的。
聚光灯：从一个点沿一个方向射出，距离越远，光锥尺寸越大，模拟手电筒/舞台聚光灯

阴影

// 1. 渲染器开启阴影支持（性能消耗高）
// 2. 灯光产生阴影
// 3. 物体产生阴影
// 4. 平面接收阴影
renderer.shadowMap.enabled = true // 开启阴影渲染支持
mesh.castShadow = true // 物体产生阴影（参与阴影计算）
 spotLight.castShadow = true // 灯光产生阴影
plane.receiveShadow = true //平面接收阴影
directionalLight.target = sphere // 光追随

聚光灯阴影配置
this.nowSpotLight.shadow.mapSize.set(4096, 4096) // 阴影贴图大小宽高

gsap 补间动画

function initAnimation() {
  // 2. 使用 gsap.to() 做一个补间动画
  // 参数1：标签选择器/DOM对象/物体对象
  // 参数2：动画相关配置项
  const aniObj = gsap.to(sphere.position, {
    // 3. 根据文档调整相关效果
    x: 5, // 对参数 1 目标对象做什么属性的变化
    duration: 3, // 动画持续时间
    delay: 2, // 延迟 2 秒后在做当前动画
    repeat: -1, // 无限次反复运动
    yoyo: true, // 回到原点过程也有一个动画
    ease: "expo.out", // 设置缓冲效果（参考： https://greensock.com/docs/v3/Eases）调整使用的内置字符串模式
    onStart() {
      console.log('开始动画')
    },
    onUpdate() {
      console.log('动画更新')
      helper.update() // 让平行光辅助对象可以实时更新角度和射线
    },
    onComplete() {
      console.log('动画结束')
    }
  })

CSS3D/2D 区别

 // 与：2D 物体 px 像素单位还可以生效，而不是平移到三维空间中的单位
 // 区别：
// CSS3D：始终不面向摄像机，场景缩放时跟随着变大/变小，不被模型遮挡，通过 DOM 事件点击
// CSS2D：始终面向摄像机，  场景缩放时不跟随变化，     不被模型遮挡，通过 DOM 事件点击
// 精灵体：始终面向摄像机，  场景缩放时跟随着变大/变小，被模型遮挡，  通过光射投影交互
// 平面体：始终不面向摄像机，场景缩放时跟随着变大/变小，被模型遮挡，  通过光射投影交互

通过名字找到小物体

getObjectByName

玻璃

 THREE.FrontSide // 前面渲染