随笔分类 - three.js
webGL 库 学习记录
摘要：关键在这一段代码，之前切换模型，然后加载精灵标签都是通过定时器去延时加载，但是模型大小不一致的话，标签有时候会提前出现。 这里对mixer的监听，可以监听动画完成之后再做一些操作。完美解决~~~
阅读全文
摘要：材质深度 决定多个物体渲染层级【遮挡如何显示的问题】： materal.depthFunc (默认是THREE.LessEqualDpeth) material depthWrite material depthTest 材质混合 实例中的问题 默认类似于这种组合， 多个透明物体的渲染时候，thre
阅读全文
摘要：在threejs Editor中调好一些样式属性后， 可以直接选择导出具体的格式，或者导出成json【json 一般体积大很多，比glb】(场景，通过objectLoader 加载json！！！) 自发光属性和自发光贴图： .emissive .emissiveMap 【有时候模型导出后，使用thr
阅读全文
摘要：虹彩效应：肥皂泡，油滴，蝴蝶翅膀等薄膜的虹彩效应 MeshPhysicalMaterial({ color:, roughness: transmission: thinkness:0.1 薄膜效应，厚度需要小 iridescence:1 //彩虹效应， 和设置的折射率有关 iridescenceI
阅读全文
摘要：通透性_厚度_衰减 物理MeshPhysicalMaterial材质下： 参数： { transparent：true, transmission:1, // 透光率 0-1【1表示透光最强，0表示完全不透光】但是如果设置完全透光时， 物体有可能还是不会透明， 这是因为没有设置粗糙度roughnes
阅读全文
摘要：法向量（normal）【存在辅助器helpers VertexNormalsHelper.js】： 概念上来说就是垂直于某个平面的所有支线的一个向量。 功能上来表述，法向量用于光线反射， 比如有一束光照到平面上，存在法向量就可以计算出反射光的射出方向。 geometry.computedVertex
阅读全文
摘要：GLSL文件： import vertexGLSL from './shaders/test1-patterns/vertex.glsl?raw' uniform mat4 projectionMatrix; uniform mat4 viewMatrix; uniform mat4 modelMa
阅读全文
摘要：先看coding之前的效果： 这些在背面的标签的，转到一定角度，被模型遮挡后，理论上就不应该被看到。这才是比较符合实际的 coding之后（另一侧对称点就被隐藏）： 具体代码(j借助于光线投影)： // 绑定鼠标事件，当用户移动视角后触发() function bindRayShotEvent()
阅读全文
摘要：what is textures? UV: UV coordinate 决定了 材质在mesh上贴 、铺的方式和位置 // add texture // //第一种方式 // const image = new Image(); // const texture = new THREE.Textur
阅读全文
摘要：1 import * as THREE from 'three' 2 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' 3 import gsap from 'gsap' 4 import * a
阅读全文
摘要：geometry(ies) 几何体: BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Intege
阅读全文
摘要：ArrayCamera： 一般用于，展示益、一个场景存在多个物体，每个物体各自拥有自己的视角的这种场景。 CubeCamera：一次性创建六个方位的相机（类似于正方体六个面，立方全景图中所有方位） StereoCamera： 立体相机，创建于类似于VR场景的，实现相机视角跟随鼠标的效果 Orthog
阅读全文
摘要：import * as THREE from 'three' import gsap from 'gsap' // Canvas const canvas = document.querySelector('canvas.webgl') // Scene const scene = new THRE
阅读全文
摘要：mesh.position.length() : 获得mesh到当前场景中心的距离 mesh.position.distanceTo(camera.postion): 获得当前mesh到相机的距离，这里参数可以是任意 vector3 坐标 mesh.position.normalize(): 将me
阅读全文
摘要：controls.value.addEventListener('start',startEvent) controls.value.addEventListener('end', endEvent); 这样子给轨道控制器绑定事件后即可。
阅读全文
摘要：这是原型中的效果， 需要在模型上添加自定义标签，那么步骤大致就是： 点击模型，获取到对应位置的世界坐标，存入到数据库。这里我是单独有一个添加页面。 主页展示的时候，先查出这些点，然后通过css2dObject,生成自定义标签挂载到模型上。 关键问题是：点击模型的时候，获取对应的坐标。之前有记录过如何
阅读全文
摘要：前言： 如图，这里我把场景中所有的灯光去掉，按理说模型应该都是黑色的，然而事实是这个车模型的底盘确实白色的，还有右侧车门框架那里。 至于为什么我会这么操作就是因为，我无论怎么样打光，这个底盘总是显示不出来。 而且这个底盘的颜色会和容器背景的颜色一样，背景白色，车底盘里就白的刺眼，背景黑色就是黑色的。
阅读全文
摘要：threejs 笔记 03 —— 轨道控制器 - 掘金 (juejin.cn) 最近项目有个需求，就是控制模型的缩放的比例，之前步入误区，百度寻找解决方案 【three.js所：无法设置最大和最小缩放级别 - VoidCC】 这里给的方法是在鼠标滚轮事件中去修改相机的fov， 我尝试了，结果无论是给
阅读全文
摘要：1. 代码中编写帧动画并且调用 async function keyframeAni(object) { const times = [0, 2]; //关键帧时间数组，单位'秒' const rorateValues = [0, -Math.PI * 2]; //需要转动的角度 const dur
阅读全文
摘要：回顾：如何添加css2dObject 标签（其中loadLabel 为标签添加）：【重要-threeJS 渲染性能上的优化方案】 加载读取渲染压缩包中的模型 - 努力不搬砖的iori - 博客园 (cnblogs.com) 现在有车型切换，并且点击切换的需求， 故记录一下。 首先网上的方法：(16条
阅读全文
