最佳编码阿柚-CSDN博客

原创 Three.js 快速入门教程 10 - 场景物体添加高亮效果

Three.js 提供了效果合成器，可以帮助我们实现多种后期效果，例如描边、发光、抗锯齿等等。本篇章以给场景物体添加高亮效果为例，讲解如何使用后期效果功能。

2024-05-18 17:01:44 368 1

原创 Three.js 快速入门教程 09 - 动画效果与过渡效果

在 3D 可视化项目中适当使用动画和过渡效果，可以让模型的状态切换更加自然，使用户界面更生动有趣，增强用户与应用程序的交互感。更进一步的，动画和过渡效果应用于讲故事或展示产品，可增强故事叙述的效果，吸引用户的注意力，例如场景漫游。本篇章将分别通过 Three.js 自带的关键帧动画，以及三方库 tween.js 来实现动画效果和过渡效果。

2024-05-18 15:57:32 1276

原创 Three.js 快速入门教程 07 - 场景物体添加标注

在开发 3D 可视化的项目中，往往会碰到要加场景中添加标注的需求。Three.js 内置了和两种渲染器，可以和方便的将可以将 HTML 元素与三维场景的内容相结合。

2024-05-17 09:00:00 751

原创 Three.js 快速入门教程 08 - 基于射线投射器的鼠标场景物体交互

在 Web 3D 项目中经常会碰到和鼠标交互相关的需求，例如用户可以通过鼠标来探索和操控场景中的对象，如旋转、放大缩小、拖动等操作，使用户更加沉浸于虚拟的三维环境中；点击一个对象后触发特定的事件、显示对象的详细信息等，增加场景的交互性和实用性；控制场景的导航，比如通过鼠标拖动实现场景的漫游和平移操作，这样用户可以更方便地探索和浏览场景中的对象。我们之前已经用 Three.js 内置的相机轨道控制器来添加鼠标交互，本篇章将介绍如何手动去实现自己的鼠标场景交互。

2024-05-17 09:00:00 270

原创 Three.js 快速入门教程 06 - 辅助工具

Three.js 内置了大量的辅助工具（Helper），它是一组用于辅助调试、调整和可视化场景中元素的工具。这些工具可用于展示、标记和操控场景中的对象、灯光、相机等，以帮助开发者更好地理解和调试场景。同时可以选择 stats.js 和 dat.gui 这样的第三方库，为 Three.js 开发提供辅助能力。

2024-05-16 09:00:00 387

原创 Three.js 快速入门教程 05 - 几何体材质网格模型

在第一篇教程中已经简要介绍过了几何体、材质和网格模型的含义与联系，即几何体用来表示三维物体的几何形状，材质用来表示物体的外观效果，网格模型则是将几何体和材质组合起来，作为 Three.js 的一个基本物体单位，可以被添加进场景里。对于一个 Three.js 项目来说，不仅可以通过加载模型文件的方式添加模型，还可以通过纯代码的方向添加模型，又或者是通过代码对模型文件的部分参数进行调整。本篇将详细讲解这部分的内容。

2024-05-16 09:00:00 506

原创 Three.js 快速入门教程 04 - 加载模型文件

在讲如何加载模型文件前，我们需要对 glTF 格式的三维模型文件有所了解glTF（gl 传输格式）是一种开放格式的规范（open format specification），用于更高效地传输、加载 3D 内容。该类文件以 JSON（.gltf）格式或二进制（.glb）格式提供，外部文件存储贴图（.jpg、.png）和额外的二进制数据（.bin）。一个 glTF 组件可传输一个或多个场景，包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机。

2024-05-15 22:22:27 684 1

原创 Three.js 快速入门教程 03 - 相机与灯光

透视投影相机是最常用的相机，它的本质就是模拟人眼所看到的景象，所以可以很直观的去理解它的特性在第一节教程中的例子已经用到了透视投影相机，下面将详细介绍它的构造器参数参数名含义fov相机视锥体垂直视野角度aspect相机视锥体长宽比near相机视锥体近端面far相机视锥体远端面结合图中我们可以看到，相机前方的虚线构成了一个锥体，我们称之为视锥体。只有在视锥体中之内物体，才会显示在画面中，因此这四个参数就是在调整视锥体的形状和大小，让画面显示出不同的内容。

2024-05-15 22:20:12 452

原创 Three.js 快速入门教程 02 - 与 Vue React 集成

在实际开发中，通常还是会基于前端框架去搭建项目，因此需要将 Three.js 与前端框架结合起来使用。好在 Three.js 是一个比较独立的功能，与外界 dom 交互较少，因此结合起来也是比较方便容易的，其核心思路就是通过前端框架标记出挂载容器的 dom 节点，再传递给 Three.js 的渲染器用于挂载渲染输出画面。

2024-05-14 22:40:32 740

原创 Three.js 快速入门教程 01 - 搭建第一个3D场景

Three.js 是一个用于创建和展示 3D 图形的 JavaScript 库。它基于 WebGL 技术，可以在现代的 Web 浏览器中实时渲染 3D 图形。它提供了丰富的功能和工具，使开发者能够轻松地创建各种类型的 3D 效果，包括模型加载、纹理映射、光照效果、动画效果等。它还支持用户交互，可以通过鼠标、键盘和触摸等方式进行操作。目前 3D 可视化被广泛应用于多个领域，包括科学研究、医学、工程设计、游戏开发等。

2024-05-14 22:29:05 1145

最佳编码阿柚的博客