3.1k 字 3 分钟

为什么 选择 GSAP

  • GSAP 是一个老牌框架，但也在持续更新，兼容性很好
  • 与框架无关，比如 framer-motion ， react spring 只能用于 react ；这里有多个框架的 starter
  • 心智负担低，易于上手，它的核心理念就是以时间轴（ Timeline ）为维度的补间动画（ Tween ），在文章后面会聊一下，然后还有各种强大的插件，如 scrollTrigger
  • 经过时间的沉淀，在 react 中使用提供了简便的 react api，比如自带动画清理的 useGSAP

566 字 1 分钟

# 技术栈 技术栈 描述 官网 Vue3 渐进式 JavaScript 框架 cn.vuejs.org/ Vite 前端开发与构建工具 cn.vitejs.dev/ TypeScript 微软新推出的一种语言，是 JavaScript 的超集 www.tslang.cn/ Pinia 新一代状态管理工具 pinia.vuejs.org/ Vue Router Vue.js 的官方路由 router.vuejs.org/zh/ wangEditor Typescript 开发的 Web 富文本编辑器 www.wangeditor.com/ Echarts 一个基于...
6k 字 5 分钟

# THREE.WebGLRenderer 的参数设置

THREE.WebGLRenderer 对象的参数设置非常影响渲染效果

要想获得比较好的渲染效果，对 THREE.WebGLRenderer 可进行以下参数设置。

var renderer;
renderer = new THREE.WebGLRenderer({
      antialias:true
});
renderer.physicallyCorrectLights = true;
renderer.setPixelRatio( window.devicePixelRatio * 2);
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;
renderer.outputEncoding = THREE.sRGBEncoding;   
document.body.appendChild(renderer.domElement);

896 字 1 分钟

本文解释了 JavaScript 中 console.log 打印对象为 [objectObject] 的原因，并介绍了多种方法如 console.dir 、 JSON.stringify 、展开运算符等来详细查看和打印对象结构，以助于调试复杂对象。

这是打印输出代码

console.log("111111111111111111111"+this.basicInfo)

控制台打印显示

111111111111111111111[object Object]

原因

因为 console.log 在尝试转换对象为字符串时调用了对象的 toString() 方法。对于普通 JavaScript 对象， toString() 方法并没有做特殊处理，所以返回的是对象的通用字符串表示形式，即 [object Object] 。

401 字 1 分钟

刚学习聚光灯属性时发现没有光照效果，后来发现是聚光灯的 decay 属性影，初始必须添加这个属性才会有灯照效果： 代码： const spotLight = new three.SpotLight(0xffffff, 0.5)spotLight.position.set(5, 5, 5)spotLight.castShadow = true // 开启光照投射阴影// 设置阴影贴图模糊度spotLight.shadow.radius = 20// 设置阴影贴图的分辨率spotLight.shadow.mapSize.set(4096, 4096)//...
1.2k 字 1 分钟

​ 在 ThreeJS 中，纹理的 colorSpace 属性用于定义文里的颜色空间。

​ 颜色空间是一个用于描述颜色的数学模型，在现实生活中，人眼可以观察到无数种颜色，而颜色空间就是用来描述这些颜色的一个方法，不同的颜色空间可以表示不同的色值范围和精度的颜色。

2.7k 字 2 分钟

NSDT 工具推荐：

  • Three.js AI 纹理开发包
  • YOLO 合成数据生成器
  • GLTF/GLB 在线编辑
  • 3D 模型格式在线转换
  • 可编程 3D 场景编辑器
  • REVIT 导出 3D 模型插件
  • 3D 模型语义搜索引擎
  • Three.js 虚拟轴心开发包
  • 3D 模型在线减面
  • STL 模型在线切割

令人惊叹的 HDR 图像应该令人印象深刻。

当你想找到一些免费的 HDR 图片时，可以使用 HDR 相机自行拍摄，也可以从图片库网站下载一些免费的 HDR 图片。你可以在 Shutterstock 中找到数百张令人惊叹的 HDR 照片，价格约为 10 美元。

本文介绍 10 个最常用的可以免费获取 HDR 的网站。

1.6k 字 1 分钟

# 引子

最开始写页面的时候，对页面里面的 px 还是蛮好奇的，电脑上的分辨率好像正好跟页面渲染的宽度值对应，但手机里面却不是这样的，记得当时还去找了相关资料，好像知道是怎么回事。最近脑海里再次想起了这个问题，但已经不知道该如何表述，又没有相关的笔记，这个觉得有必要区分一下相关的概念。