2.7k 字 2 分钟

官方地址： https://parceljs.org/getting_...

Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。

# 特性

img

  • 零配置： Parcel 不需要配置文件，它会自动识别和配置项目中的文件，简化了构建过程。
  • 快速： 使用多核处理器并行地构建项目，提高了构建速度。
  • 支持多种文件类型： Parcel 可以处理各种前端资源文件，无需手动配置 loader。
  • 在需要的时候自动使用 Babel、PostCSS 和 PostHTML 自动转换模块，甚至是 node_modules。
  • 内置支持模块热替换。
  • 友好的错误记录体验，语法突出显示的代码帧有助于查明问题。

2.7k 字 2 分钟

# gsap

GSAP （GreenSock Animation Platform）是一个用于创建 高性能、跨浏览器 的动画的 JavaScript库 。它提供了许多强大而灵活的 API，允许开发者创建各种复杂的动画效果。

3.1k 字 3 分钟

为什么 选择 GSAP

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

5.2k 字 5 分钟

以下内容是个整体功能的描述，不会对所有 api 进行说明讲解，主要是关键性内容描述。

# 前言

作为一个前端开发，不可避免地需要开发动画。如果自己临时写一个动画，还是比较容易出问题的，今天介绍一个很好用的动画库，功能十分强悍 ———— GSAP。

# 效果

说再多，也不如直接来效果来的直观。
如果能科学上网可以查看以下官网链接：

  1. GSAP 动画：greensock.com/showcase/
  2. GSAP ScrollTrigger（gsap 的插件）动画：greensock.com/st-demos/

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)//...