书架

书架

=一个知识书库=

Three.js之动画混合器AnimationMixer

Three.js之动画混合器AnimationMixer

## 简介 在`three.js`中动画也是很重要的一环。在使用软件创建模型时,一般都会创建模型的骨骼动画用于在开发中使用。下面我们加载`.fbx`格式的文件模型(它除了包含几何、材质信息,可以存储骨骼动画等数据)来实现动画。 ## [`AnimationMixer`](https://threejs.org/docs/index.html#api/zh/animation/AnimationMixer) - 动画混合器是用于场景中特定对象的动画的播放器。当场景中的多个对象独立动画时,每个对象都可以使用同一个动画混合器。 - 参数:`rootObject` 混合器播放的动画
more...
Three.js之动画库

Three.js之动画库

在Three.js 中,动画是创建互动和动态3D内容的关键组件。无论是为游戏、可视化工具,还是艺术项目添加动画效果,使用动画库都能极大地简化这个过程。本篇博客将梳理一些常用的动画库及其在Three.js 中的应用,帮助开发者更好地理解和使用这些工具。 <!--more--> ## 1. Tween.js Tween.js是一个简单但功能强大的动画库,专为在JavaScript中实现平滑动画而设计。它主要用于在指定时间内逐步改变对象的属性值。 **基本使用方法**: ```js // 创建一个初始状态的对象 var position = { x: 0, y: 0
more...
Three.js之核心对象

Three.js之核心对象

## THREE.Clock 时间对象用于跟踪时间,用于计算每一帧的渲染时间或者是从开始渲染到现在的时间。 ### 构造函数 ```javascript var clock = new THREE.Clock(); ``` 实例化时间对象还可以接收一个布尔类型的参数,用于设置实例化完成后启动时间对象计时,默认为开启。 ### 方法 #### .start() 此方法用于启动时间对象开始计时,将所有的信息重置。 #### .stop() 停止时间对象的计时。 #### .getElapsedTime() 此方法返回自时间对象开
more...
Three.js之核心Viewer封装记录

Three.js之核心Viewer封装记录

> 基于Viewer库封装的一些记录 <!--more--> 基础封装初始化包括以下: ### 一、ThreeJS-ES6库引入 引入部分除了ThreeJS核心库的东西外,还有标签渲染器,用于后期在场景中添加标签,还有控制器何和帧率显示器。 ```javascript import { Cache, WebGLRenderer, ACESFilmicToneMapping, PCFSoftShadowMap, sRGBEncoding, PerspectiveCamera, Scene, Color } from
more...
Three.js之模型加载与播放模型动画

Three.js之模型加载与播放模型动画

​ 目前,3D模型的格式有成千上万种可供选择,但每一种格式都具有不同的目的、用途以及复杂性。 虽然three.js已经提供了多种导入工具, 但是选择正确的文件格式以及工作流程将可以节省很多时间,以及避免遭受很多挫折。某些格式难以使用,或者实时体验效率低下,或者目前尚未得到完全支持。 <!--more--> ## ThreeJS支持的模型格式 ​ 推荐使用glTF(gl传输格式)。.GLB和.GLTF是这种格式的这两种不同版本, 都可以被很好地支持。由于glTF这种格式是专注于在程序运行时呈现三维物体的,所以它的传输效率非常高,且加载速度非常快。 功能方面则包括了网
more...