随笔分类 - ThreeJs
three
摘要：点击查看代码 // 鼠标按下 mousedownFn = () => { this.isMouseTouching = true // 鼠标已经按下 } // 鼠标移动 mousemoveFn = (e) => { if (this.isMouseTouching) { // 只有按下时进入此逻辑代
阅读全文
摘要：点击查看代码 /** * 参数：模型文件路径，成功回调函数 * * 基于 three.js 加载器分别加载模型 * * 全部加载后通过回调函数传出打印 */ import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js' imp
阅读全文
摘要：概念：attribute 用于向顶点着色器，传输几何图形待处理的各种属性，例如：顶点坐标，UV 坐标等等 注意：attribute 只能用于顶点着色器中，值在运行时会从几何图形属性中取值 点击查看代码 function createBasic() { // 目标：着色器变量 - attribute
阅读全文
摘要：// 问题：只使用 vec4(position, 1.0) 设置顶点坐标出问题（世界坐标->设备坐标->屏幕坐标）显示太大 // 解决：转换过程中需要一些矩阵算法的参与 // 模型矩阵：用在位移，旋转，缩放时，本地坐标 -> 世界坐标 modelMatrix (内置变量) // 视图矩阵：世界坐标
阅读全文
摘要：1.应用阶段：CPU将决定递给GPU什么样的数据（例如：灯光、模型、物体，摄像机位置等等） 2.几何阶段：进行顶点数据和坐标数据进行处理 a.顶点着色器：对每个顶点进行计算处理 b.曲面细分着色器：详细计算更多顶点 c.几何着色器：对顶点进行增删改 几何阶段：进行顶点数据和坐标数据进行处理 d.投影
阅读全文
摘要：点击查看代码 function createBasic() { // 目标：了解顶点坐标绘制正方形 // 1. 准备 BufferGemotry 缓冲几何图形 // 2. 准备 32 位浮点数的数组，定义矩形的顶点位置 // 3. 准备 BufferAttribute 属性缓冲对象，保存几何图形的属
阅读全文
摘要：点击查看代码 const resizeObserver = ref(null); //进行初始化和监听窗口变化 onMounted(async () => { await nextTick(() => { initChart(); setOptions(options.value, opts.val
阅读全文
摘要：this.model.traverse(obj => { obj.castShadow = true })
阅读全文
摘要：世界坐标系：场景空间的中心点 模型坐标系：模型物体本身的中心点 // 注意：建模师给的模型文件，物体的坐标轴原点可能不再正中心 物体位移：参考父级物体的坐标系 旋转和缩放：参考自身坐标系
阅读全文
摘要：原生 DOM 还用原生的 DOM 点击事件，要注意开启 pointerEvents CSS3DRenderer 是一个新的渲染器，需要在渲染循环调用并适配 labelRenderer.domElement.style.pointerEvents = 'none' // 让标签触发鼠标交互事件 thr
阅读全文
摘要：
阅读全文
