FanetheDivine

在three.js中 点和线的呈现与常规3d对象不同 不需要网格 而是由自己独特的对象 @react-three/drei已经提供封装好的点、线组件 线 点 也可以不生成组件 直接通过配置生成点 po

Helper 这是一个来自于@react-three/drei的实用工具 可以方便的使用three.js的helper对象 为光线网格等增加辅助线 阴影 阴影需要四处设置 启用阴影<Canvas sh

需求 项目里经常遇到一些嵌套递归的参数控制器 就是形如这样的组件 通常使用一个配置对象来进行描述 例如 type为group的映射为配置组 其余的则映射为 根据我的经验 这种控制器很容易在拓展和修改过

把这个文件用vite打包 结果如下 可以看到 只有通过import.env.VITE_VALUE直接引用环境变量的语句才能被替换为静态值'NONE' 而且只有引用静态值的语句会在编译时计算 而v-if

版本 vite@5.4.11 vite项目将styles.module.scss和vue组件的style标签打包为style标签插入html中 这些style标签统一具有data-vite-dev-i

场景Scene 容纳了一切3d资源 包括物体、光源、摄像机等 网格Mesh 三点确定一个平面 常用若干拼接起来的三角形描述物体的表面 这就是网格 一个网格就是three.js里的一个3d物体 mesh

gsap的能力 本质是数据插值库 给定起点、终点、duration和变化规则 gsap会自动计算中间态 理论上可以计算任意属性在任意维度的变化情况 gsap可以和pixi.js、three.js等配合

导入Web Component 在使用一个Web Component前必须先定义它,而定义过程实际上是调用浏览器环境中的customElements函数 在入口文件(main.js或者index.js

一开始是这样的布局 但是在缩放时显示异常 中间的间距常常过小或过大 在中间使用div模拟margin 这样可以确保间距受控 且不影响下方元素的交互过大 在中间使用div模拟margin 这样可以确保间