置顶文章

1.8k 2 分钟

还记得所有 AI 教程必提的「奥卡姆剃刀原则」吗?即:如无必要,勿增实体。这条原则也被收藏,还有一些不太常见的费茨法则、盖尔定律、康威定律等,都被一一收入囊中。

精选分类

文章列表

6.6k 6 分钟

在 Three.js 中,动画是创建互动和动态 3D 内容的关键组件。无论是为游戏、可视化工具,还是艺术项目添加动画效果,使用动画库都能极大地简化这个过程。本篇博客将梳理一些常用的动画库及其在 Three.js 中的应用,帮助开发者更好地理解和使用这些工具。

790 1 分钟

# 前言

通过 stats.js 库可以查看 three.js 当前的渲染性能,具体说就是计算 three.js 的渲染帧率 (FPS), 所谓渲染帧率 (FPS),简单说就是 three.js 每秒钟完成的渲染次数,一般渲染达到每秒钟 60 次为最佳状态。

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

3.9k 4 分钟

# THREE.Clock

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

# 构造函数

var clock = new THREE.Clock();

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

# 方法

# .start()

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

# .stop()

停止时间对象的计时。

# .getElapsedTime()

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

# .getDelta()

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

1.1k 1 分钟

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

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

343 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.7k 3 分钟

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