Three.js
文章平均质量分 83
梦之归途
一步一个脚印,踏实前行。
展开
-
从零开始搭建开源智慧城市项目(七)场景导入到地图中。
上一节通过MeshLine添加了飞线飞点 这一节把整个场景导入到mapbox中。原创 2024-06-14 10:20:27 · 372 阅读 · 0 评论 -
从零开始搭建开源智慧城市项目(六)飞线,飞点。
上一节实现了天空盒、扩散墙、扩散圆,这一节来添加飞线,飞点。原创 2024-06-14 10:16:52 · 385 阅读 · 0 评论 -
从零开始搭建开源智慧城市项目(五)背景天空盒、扩散墙、扩散圆
上一节实现了颜色渐变效果和扩散扫光效果,这一节来添加背景天空盒、扩散墙、扩散圆。原创 2024-06-14 10:14:00 · 681 阅读 · 0 评论 -
从零开始搭建开源智慧城市项目(四)扩散扫光和颜色渐变
上一节实现了上升线效果,这一节继续修改上一节中的shader,添加颜色渐变效果和扩散扫光效果。原创 2024-06-14 10:08:07 · 308 阅读 · 0 评论 -
从零开始搭建开源智慧城市项目(三)上升线效果
上一节实现了添加建筑物线框,模型外墙和道路地面材质添加。这一节准备通过简单的shader实现上升线效果。原创 2024-06-14 10:02:11 · 903 阅读 · 0 评论 -
从零开始搭建开源智慧城市项目(二)模型线框和物理材质
上一章已经通过GLTFLoader把模型数据加载到场景,接下来我们对这些数据进行进一步处理。首先是把模型分类,整个模型可以分为三类,建筑(),道路(ROADS),地面(other),对不同的数据分别添加不同的材质。这是第一篇创建场景,接下几篇我会介绍添加自定义材质,后处理实现模型材质替换,辉光效果,流动线,扫描线,扩散效果等使其看起来炫酷一些,并争取通过多种方式实现以上效果,添加天空盒并解决天空盒和后处理冲突问题,还有什么比较炫酷的效果欢迎大家提意见。原创 2024-06-14 09:51:51 · 264 阅读 · 0 评论 -
从零开始搭建开源智慧城市项目(一)初始化场景
本篇文章是从零开始仿写一个智慧城市系列文章的第一篇,这一篇主要实现一下项目的初始化,添加一下Three场景的三大组件:场景(scene)、相机(camera)和渲染器(renderer),加一个控制器可以通关鼠标控制移动场景,把模型数据加载到场景里面。这是第一篇创建场景,接下几篇我会介绍添加自定义材质,后处理实现模型材质替换,辉光效果,流动线,扫描线,扩散效果等使其看起来炫酷一些,并争取通过多种方式实现以上效果,添加天空盒并解决天空盒和后处理冲突问题,还有什么比较炫酷的效果欢迎大家提意见。原创 2024-06-14 09:43:42 · 464 阅读 · 0 评论 -
vue 使用 threejs 实现实景看房效果 demo
关于这个 threejs 实现 VR 看房效果也超级简单,只需要提供一个思路的话就可以了其实,首先需要一个房间结构的贴图,这个贴图网上有,当然找个合适的也不好找,我找了一上午在别人的 demo 里面扣了一张出来,代码都是一样的,稍微说一下思路。一张全景图,超级简单,在绘制一个球的模型,把这个全景图贴到球上作为材质,然后把相机视角移动到球内,将球面翻转,让贴图在球内显示即可。原创 2024-06-13 16:18:02 · 258 阅读 · 0 评论 -
【Three.js】知识梳理二十四:浏览器窗口变动自适应
在 Three.js 项目中,为了确保渲染内容在窗口大小变化时能够正确自适应,我们需要监听window的resize事件,并更新相机和渲染器的参数。本文将展示如何实现这一功能。原创 2024-06-13 15:42:20 · 258 阅读 · 0 评论 -
【Three.js】知识梳理二十三:Three.js与其他WebGL库与框架对比
Three.js:以其易用性和丰富的生态系统成为了许多开发者的首选,适合快速构建和原型设计。适合需要广泛功能和快速开发的项目。Babylon.js:强调性能和全面的功能,适合需要高性能和复杂功能的应用,特别是游戏开发和AR/VR应用。PlayCanvas:提供了强大的在线编辑器和协作功能,非常适合团队开发大型项目,尤其是需要实时预览和调试的情况。PIXI.js:是2D开发的优秀选择,适合开发高性能的2D游戏和应用,并且可以与其他3D库结合使用。Cesium。原创 2024-06-13 15:40:17 · 576 阅读 · 0 评论 -
【Three.js】知识梳理二十二:相机视角的平滑过渡与点击模型视角切换
/ 保存当前相机的位置和朝向// 创建 tween 动画.to(targetPosition, 2000) // 动画持续时间为2000毫秒.easing(TWEEN.Easing.Quadratic.InOut) // 使用缓动函数}).start();原创 2024-06-13 15:33:23 · 192 阅读 · 0 评论 -
【Three.js】知识梳理二十一:Three.js性能优化和实践建议
Three.js 是一个功能强大的 3D 引擎,用于创建 WebGL 应用。尽管它功能强大,但在复杂的 3D 场景中保持高性能是一个挑战。本文将分享一些在使用 Three.js 时的性能优化提示,帮助你提高应用的运行效率。原创 2024-06-13 15:30:21 · 897 阅读 · 0 评论 -
【Three.js】知识梳理二十:Three.js后处理EffectComposer
后处理是指在渲染场景后对图像进行额外处理,以实现各种视觉效果,如模糊、景深、颜色校正等。Three.js的EffectComposer是一个用于处理后期效果的工具,它可以通过一系列的Pass(处理单元)来实现复杂的后处理效果。EffectComposer是一个附加组件,必须显式导入。构造函数renderer: 用于渲染场景的渲染器。: (可选)EffectComposer内部使用的预配置渲染目标。创建一个EffectComposer实例。添加渲染目标和一系列的Pass。原创 2024-06-13 15:21:19 · 676 阅读 · 0 评论 -
【Three.js】知识梳理十九:线性雾(Fog)、指数雾(FogExp2)和范围雾(RangeFog)
雾是3D图形中创建深度和氛围的重要工具。Three.js提供了多种类型的雾:线性雾(THREE.Fog),指数雾()和范围雾(RangeFog本文将探讨这三种类型的雾,通过代码示例进行的实践应用。雾模拟了大气的效果,使远处的物体看起来更模糊。它有助于创建深度感,并能增强场景的氛围。在Three.js中,只需几行代码即可轻松添加雾效果。原创 2024-06-13 15:17:05 · 742 阅读 · 0 评论 -
【Three.js】知识梳理十八:CSS2D/CSS3D渲染器
CSS2DRenderer 渲染器用于在 3D 场景中渲染纯 2D 的 HTML 元素。这些元素不会具有 3D 透视效果,但可以与 3D 对象一起移动和旋转,非常适合用于标签、注释等需要固定显示的内容。CSS3DRenderer 渲染器用于在 3D 场景中渲染具有 3D 透视效果的 HTML 元素。相比 CSS2DRenderer,它可以让 HTML 元素更好地融入 3D 场景,具有真实的空间感。原创 2024-06-13 14:36:56 · 737 阅读 · 0 评论 -
【Three.js】知识梳理十七:动画库
在Three.js 中,动画是创建互动和动态3D内容的关键组件。无论是为游戏、可视化工具,还是艺术项目添加动画效果,使用动画库都能极大地简化这个过程。本篇博客将梳理一些常用的动画库及其在Three.js 中的应用,帮助开发者更好地理解和使用这些工具。原创 2024-06-13 14:30:02 · 924 阅读 · 0 评论 -
【Three.js】知识梳理十六:图形界面工具(GUI)
dat.GUI 是一个轻量级的JavaScript库,专为调试和参数调整设计。它提供了一个简洁的界面,可以快速集成到Three.js项目中。},},},。原创 2024-06-13 10:35:05 · 637 阅读 · 0 评论 -
【Three.js】知识梳理十五:相机控制器Controls
在 3D 场景中,摄像机的控制尤为重要,因为它决定了用户如何观察和与场景互动。Three.js 提供了多种相机控制器,最常用的有和。适合用于查看和检查 3D 模型,提供了更自由的旋转方式,适合于飞行模拟和第一人称视角的应用,则提供了沉浸式的第一人称视角。在实际项目中,可以根据具体需求选择合适的控制器,并调整相关参数以达到最佳效果。本文将介绍这些相机控制器的基本用法及其特点。原创 2024-06-13 09:49:29 · 931 阅读 · 0 评论 -
【Three.js】知识梳理十四:LOD(Level of Detail)技术
LOD(Level of Detail)是指在三维图形处理中,根据物体距离观察者的远近,使用不同细节层次的模型来进行渲染。通过这种方式,可以在保证视觉效果的前提下,减少不必要的计算,提升渲染性能。原创 2024-06-13 09:45:41 · 332 阅读 · 0 评论 -
【Three.js】知识梳理十三:Three.js射线拾取(Raycaster)与轮廓高亮(OutlinePass)
射线拾取和轮廓高亮是Three.js中两项非常有用的技术,分别用于检测用户与3D对象的交互以及对选中的物体进行高亮显示。通过本文的介绍,你可以在自己的Three.js项目中实现这些功能,增强用户体验和交互效果。原创 2024-06-13 09:25:33 · 931 阅读 · 0 评论 -
【Three.js】知识梳理十二:Three.js PBR材质
本文将详细介绍Three.js中的PBR(Physically Based Rendering)材质,包括PBR的基本概念、适用场景、PBR材质的构建以及一些高级应用技巧。原创 2024-06-13 09:21:24 · 721 阅读 · 0 评论 -
【Three.js】知识梳理十一:Three.js高级纹理类型
在使用Three.js创建3D图形时,纹理扮演着重要的角色,它们可以增加模型的视觉效果,使模型看起来更加真实。本文将深入讨论几种高级纹理类型:法线贴图(Normal Maps),凹凸贴图(Displacement Maps),高光贴图(Specular Maps),环境贴图(Environment Maps)以及数据纹理(Data Textures)。原创 2024-06-12 14:21:22 · 704 阅读 · 0 评论 -
【Three.js】知识梳理十:Three.js纹理贴图
在Three.js中,纹理贴图是一种将二维图像贴到三维物体表面的技术,以增强物体的视觉表现。纹理贴图可以使物体表面更加真实、细腻,为场景增色不少。在Three.js中,纹理贴图的加载主要通过类实现。原创 2024-06-12 10:52:02 · 789 阅读 · 0 评论 -
【Three.js】知识梳理九:Three.js层级模型
Object3D是Three.js中所有3D对象的基类。它为我们提供了一个通用的结构,包括位置、旋转、缩放等变换属性,以及子对象的组织和管理功能。无论是网格(Mesh)、光源(Light)还是其他类型的对象,它们都继承自Object3D。原创 2024-06-12 10:40:12 · 228 阅读 · 0 评论 -
【Three.js】知识梳理八:Three.js常用辅助对象
AxesHelper 类用于在场景中创建一个坐标轴辅助对象,表示 X、Y 和 Z 轴。这对于确定场景中物体的方向和位置非常有用。原创 2024-06-12 10:09:34 · 742 阅读 · 0 评论 -
【Three.js】知识梳理七:Three.js外部三维模型加载
在加载外部三维模型时,可能会遇到一些错误,例如文件找不到、格式错误等。为了更好地处理这些错误,可以使用加载器的。加载大量或复杂的三维模型可能会导致性能问题。原创 2024-06-12 09:48:31 · 773 阅读 · 0 评论 -
【Three.js】知识梳理六:Three.js光源光照和阴影投影
在某些情况下,为了实现特定的阴影效果,可以考虑使用自定义阴影贴图。自定义阴影贴图可以让你更精确地控制阴影效果,但需要更高的技能水平和对 Three.js 的深入了解。原创 2024-06-12 09:45:57 · 975 阅读 · 1 评论 -
【Three.js】知识梳理五:Three.js相机Camera
Three.js 主要提供了两种类型的相机:正交相机(OrthographicCamera)和透视相机(PerspectiveCamera)。原创 2024-06-12 08:17:35 · 1231 阅读 · 1 评论 -
【Three.js】知识梳理四:Three.js材质Material
Three.js 提供了丰富的材质类型和纹理映射功能,帮助开发者创建出具有真实感和丰富细节的 3D 场景。从简单的基础材质到复杂的可编程着色器材质,你可以根据项目需求选择合适的材质类型。原创 2024-06-12 08:12:25 · 972 阅读 · 0 评论 -
【Three.js】知识梳理三:Three.js几何体Geometry
除了使用内置的几何体类型,您还可以通过组合顶点和面来创建自定义几何体。// 创建一个空的几何体对象// 定义三个顶点// 将顶点添加到几何体中// 创建一个面,使用顶点的索引定义// 将面添加到几何体中// 更新法线(这对于渲染和光照计算非常重要)// 创建一个材质// 创建一个网格对象// 添加到场景中。原创 2024-06-11 15:11:43 · 1176 阅读 · 0 评论 -
【Three.js】知识梳理二:Three.js引用和环境搭建
下载three.js文件包解压后,你可以看到如下目录(不同版本会略有差异)。对于开发者而言,大家经常接触的是文档docs和案例examples两个文件夹,平时查看文档,可以打开文档docs里面html文件,案例examples里面提供了海量threejs功能案例。└───build——src目录下各个代码模块打包后的结果│───three.js——开发的时候.html文件中要引入的threejs引擎库,和引入jquery一样,可以辅助浏览器调试。原创 2024-06-11 11:12:49 · 1138 阅读 · 1 评论 -
【Three.js】知识梳理一:Three.js概述和基础知识
Three.js还有许多高级功能和性能优化技巧等待你去探索。Three.js官方文档:官方文档是学习Three.js的最佳资源,其中详细介绍了各种类和方法的用途和用法。Three.js示例:Three.js官方提供了许多示例,涵盖了各种功能和技巧,是学习的宝库。加载器(Loader):Three.js支持加载多种3D模型格式,如OBJ、FBX、GLTF等。学习如何加载外部3D模型将让你能够为场景添加更丰富的内容。纹理(Texture):纹理贴图可以让你为物体添加更复杂的外观。原创 2024-06-11 11:06:51 · 813 阅读 · 0 评论 -
three.js简介
Build目录:主要的两个文件three.min.js,three.js。Docs目录:这里是three.js的帮助文档,里面是各个函数的api,可惜并没有详细的解释。试图用这些文档来学会three.js是不可能的。Editor目录:一个类似3D-max的简单编辑程序,它能创建一些三维物体。Examples目录:一些例子demo,可惜没有文档介绍。对图像学理解不深入的同学,学习成本非常高。Src目录:源代码目录,里面是所有源代码。Test目录:一些测试代码,基本没用。原创 2024-06-07 14:44:07 · 227 阅读 · 0 评论