3.3k 字 3 分钟

# 简介

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

# AnimationMixer

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

4.2k 字 4 分钟

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

# 贴图的重要性

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

img

1.8k 字 2 分钟

# Three.js 文档本地部署 Three.js 是一个开源的 JavaScript 3D 图形库，用于在 Web 浏览器中创建和渲染各种 3D 场景、动画和效果。它是基于 WebGL 技术的封装，简化了使用 WebGL 的复杂性，使开发者可以更轻松地创建交互式的 3D 网页应用。 # 一、Three.js 文件包目录介绍 从官网下载 three.js-master 压缩包，解压后目录如下： build：目录下各个代码模块打包后的结果。 three.module.js：开发的时候 .html 文件中要引入的 threejs 引擎库，和引入 jquery...
1.1k 字 1 分钟

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

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

343 字 1 分钟

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

图片

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

# 特色功能

  • 完全基于 Three.js

  • 现代 ES 模块结构

  • 内置查看器

  • 多格式支持

  • ......

3.9k 字 4 分钟

# THREE.Clock

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

# 构造函数

var clock = new THREE.Clock();

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

# 方法

# .start()

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

# .stop()

停止时间对象的计时。

# .getElapsedTime()

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

# .getDelta()

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

201 字 1 分钟

最近在 IIS 中部署自己的 threejs 项目时，发现服务能访问，但是报了一个 404，但是部署在别的服务器中没有问题。问题如下： http://localhost:9001/lanbo/assets/exr/royal_esplanade_1k.exr 404 (Not Found) 研究发现，缺少允许的 MIME 类型。 在 MIME 类型中，设置 exr 类型为 application/vnd.openexr , 重启服务即可。
170 字 1 分钟

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

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