3.5k 字 3 分钟

简介

在three.js中动画也是很重要的一环。在使用软件创建模型时，一般都会创建模型的骨骼动画用于在开发中使用。下面我们加载.fbx格式的文件模型（它除了包含几何、材质信息，可以存储骨骼动画等数据）来实现动画。

AnimationMixer

  • 动画混合器是用于场景中特定对象的动画的播放器。当场景中的多个对象独立动画时，每个对象都可以使用同一个动画混合器。
  • 参数：rootObject 混合器播放的动画所属的对象。就是包含动画模型的场景对象。
  • 常用参数和属性：
  1. .time 全局的混合器时间。
  2. .clipAction(AnimationClip) 返回所传入的剪辑参数的AnimationAction对象。AnimationAction用来调度存储在AnimationClip中的动画。
  • AnimationClip 动画剪辑，是一个可重用的关键帧轨道集，它代表动画。
  1. .getRoot() 返回混合器的根对象。
  2. .update() 推进混合器时间并更新动画。在渲染函数中调用更新动画。
4k 字 4 分钟

THREE.Clock

时间对象用于跟踪时间，用于计算每一帧的渲染时间或者是从开始渲染到现在的时间。

构造函数

var clock = new THREE.Clock();

实例化时间对象还可以接收一个布尔类型的参数，用于设置实例化完成后启动时间对象计时，默认为开启。

方法

.start()

此方法用于启动时间对象开始计时，将所有的信息重置。

.stop()

停止时间对象的计时。

.getElapsedTime()

此方法返回自时间对象开启以后到现在的时间。

.getDelta()

此方法返回上次调用到这次调用此方法的间隔时间，用于计算渲染间隔。

1.1k 字 1 分钟

补间动画（Tween Animation）是一种常用的动画效果实现方法，用于在两个或多个状态之间平滑过渡。在Three.js中，可以使用补间动画库（Tween）来创建和控制补间动画。

补间动画通过定义起始状态和目标状态，并指定过渡时间和缓动函数，在指定的时间内自动计算并更新中间状态，从而实现平滑的动画效果，并且可以对对象的属性进行补间动画，比如位置、旋转、缩放等。

4.2k 字 4 分钟

纹理贴图（Textures）字面意思就是給几何体对象贴上不同的纹理图！好比于我们每天选择穿不同的衣服，我们穿不同的衣服带来的感官会有很大变化！同理几何体不同贴图的视觉效果也会有千差万别。纹理贴图是 Three.js一个很重要的内容，掌握了纹理贴图可以让3d效果产生质的飞跃。

贴图的重要性

如果没有纹理贴图，我们看到的3d物体将会是很糟糕的！例如下面这个最基础贴图例子。

img

335 字 1 分钟

一个基于 Three.js 库实现的 3D 高斯点云渲染器，专注于实时辐射场渲染技术。这项技术能够从 2D 图像生成 3D 场景。

图片

原项目采用 CUDA 并需要在本地机器上原生运行，但GaussianSplats3D 的目标是构建一个可通过网络访问的查看器。它使得 3D 场景能够以点云类似的形式存储，用户可以在网页上实时查看、导航并与之互动。

特色功能

  • 完全基于Three.js

  • 现代ES模块结构

  • 内置查看器

  • 多格式支持

  • ……

170 字 1 分钟

height 指的是元素本身的高度，不包括padding、border、margin，如下图所示： innerHeight 包括元素自身的高度+padding部分，如图所示： outerHeight高度为：元素自身高度 + padding + border ； 如果参数为true时，高度为：元素自身高度 + padding + border +margin，如下图所示
3.9k 字 4 分钟

我本来今天想写一篇文章跟大家介绍一下 React Native for Windows + macOS。之前没有用过，所以这两天花时间调研了一下，也写了一些基础的 Demo，不过由于下午的 Vue Conf 中，我惊讶的发现了一个非常棒的东西，想迫不及待的分享给大家，他就是 Vue Vine，一个更为彻底拥抱函数式的新开发方式。

1.6k 字 1 分钟

作为一名前端切图仔，在日常工作中，我们不可避免地需要开发各种管理系统。每次启动新项目并搭建框架都费时费力，这严重影响了我们的摸鱼时间。

为了解决这个问题，今天我为大家分享 8 个基于 Vue3 + Vite + TypeScript + Naive UI 的开箱即用的中后台模板，帮助大家提高开发效率，轻松享受摸鱼时光！

858 字 1 分钟

ECMAScript提案 Top-level await 由 Myles Borins 提出，它可以让你在模块的最高层中使用 await 操作符。在这之前，你只能通过在 async 函数或 async generators 中使用 await 操作符。Top-level await 是个新特性，打包不支持此特性。

所以在js文件中直接写await，在打包时会报错：

Top-level await is not available in the configured target environment, “edge88”, “es2019”, “firefox78”, “safari13.1”)