可视化开发
关注
分享
扫一扫
文章平均质量分 92
欢迎来到我们的可视化开发专栏！在这里，我们将深入探讨现代可视化技术的核心组成部分，包括 Three.js、Cesium 和建模技术。无论你是刚刚入门的开发者，还是经验丰富的专家，我们都致力于为你提供实用的知识和技巧，帮助你在可视化领域取得突破。
亦世凡华、
个人：csdn内容合伙人、阿里云专家博主、51CTO博主；目标：深耕技术，追求代码之美，享受编程人生；当下：珍惜时间，奋发学习；未来：渴望成为一名真正的全栈大佬，并为此一直努力，矢志不渝！
展开
-
Three.js--》探秘虚拟现实VR展厅的视觉盛宴
今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。原创 2024-04-21 01:26:20 · 2783 阅读 · 22 评论 -
Three.js--》穿越虚拟门槛打造的3D登录界面
今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。原创 2024-04-15 22:21:52 · 1643 阅读 · 8 评论 -
Cesium.js--》探秘Cesium背后的3D模型魔力—加载纽约模型
今天简单实现一个Cesium.js的小Demo，加强自己对Cesium知识的掌握与学习，先简单对这个开源库进行一个简单的介绍吧！Cesium 是一个开源的地理空间可视化引擎，用于创建基于 Web 的三维地球应用程序。它允许开发人员在网页上呈现高度可视化的地球数据，包括地形、卫星影像、建筑物、地理信息系统 (GIS) 数据等。其提供了强大的 JavaScript 库和 API，使开发人员可以轻松地构建交互式、高性能的地球应用。我爱说实话原创 2024-04-13 22:46:08 · 1410 阅读 · 22 评论 -
Three.js--》实现2D转3D的元素周期表
今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。原创 2024-04-09 15:24:18 · 2440 阅读 · 27 评论 -
Three.js--》探寻Cannon.js构建震撼的3D物理交互体验（二）
我们用three.js可以绘制出各种酷炫的画面，但是当我们想要一个更加真实的物理效果的话，这个时候我们就需要一个物理的库，接下来我们就讲解一下今天要学习的canon，它可以给我们提供一个更加真实的物理效果，像物体的张力、摩擦力、拉伸、反弹等等各种真实的物理效果。该库都能够有一个非常好的模拟。原创 2024-03-06 22:32:16 · 2101 阅读 · 21 评论 -
Three.js--》探寻Cannon.js构建震撼的3D物理交互体验（一）
我们用three.js可以绘制出各种酷炫的画面，但是当我们想要一个更加真实的物理效果的话，这个时候我们就需要一个物理的库，接下来我们就讲解一下今天要学习的canon，它可以给我们提供一个更加真实的物理效果，像物体的张力、摩擦力、拉伸、反弹等等各种真实的物理效果。该库都能够有一个非常好的模拟。原创 2024-03-04 22:13:54 · 2710 阅读 · 23 评论 -
Blender--》点线面操作及其面操作的详解
接下来我会在three.js专栏中分享关于3D建模知识的文章，如果学习three朋友并且想了解和学习3D建模，欢迎关注本专栏，关于这款3D建模软件blender的安装，我在前面的文章已经讲解过了，如果不了解的朋友可以去考考古：建模软件如何加载外部3D模型？ok接下来就让我们正式的进入到3D建模的世界吧！！！原创 2023-11-11 00:51:39 · 2264 阅读 · 28 评论 -
Blender--》页面布局及基本操作讲解
当我们第一次打开blender的时候，页面会弹出一个下面这样的欢迎界面，我们点击常规就可以了刚进入页面的时候，在3D可视区域有一个默认的正方体，其大致的主页面介绍如下：那么我们如何完成旋转、缩放、平移视图这些基本操作呢？旋转视图：在屏幕上有一个导航器，我们可以点击一个坐标轴然后按住鼠标左键就可进行视图旋转快捷键：按住中键进行旋转平移视图： 导航器下面的几个操作菜单，鼠标左键按住移动视图即可进行平移操作快捷键：Shift + 按住中键进行平移缩放视图。原创 2023-09-03 22:52:58 · 2217 阅读 · 40 评论 -
Three.js--》实现沉浸式交互故事体验
今天简单实现一个three.js的3D故事小游戏，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。原创 2023-08-17 22:28:24 · 710 阅读 · 22 评论 -
Three.js--》实现3D汽车展厅效果展示
今天简单实现一个three.js的3D汽车模型展厅，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。原创 2023-06-17 13:13:23 · 4328 阅读 · 30 评论 -
Three.js--》实现图片转3D效果展示
今天简单实现一个three.js的图片转3D效果展示，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。原创 2023-06-03 01:24:05 · 4731 阅读 · 28 评论 -
Three.js--》实现3d踢球模型展示
今天简单实现一个three.js的3D踢球，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。原创 2023-06-02 23:23:57 · 1001 阅读 · 19 评论 -
Three.js--》实现3d字体模型展示
今天简单实现一个three.js的字体模型，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。原创 2023-06-01 18:42:45 · 2335 阅读 · 30 评论 -
Three.js--》实现3d地月模型展示
今天简单实现一个three.js的地月模型，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。原创 2023-05-30 21:38:00 · 2231 阅读 · 27 评论 -
Three.js--》实现3d地球模型展示
今天简单实现一个three.js的3D地球模型，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。原创 2023-05-27 17:17:17 · 5074 阅读 · 34 评论 -
Three.js--》实现3d官网模型展示
今天简单实现一个three.js的3d官网模型，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。原创 2023-05-26 22:45:41 · 4151 阅读 · 23 评论 -
Three.js--》探索Three.js：学习和就业的完整指南
本篇文章主要给大家介绍一下如何学习Web3D可视化，具体说就是怎么学习WebGL、Three.js、3D建模等。原创 2023-05-26 16:53:29 · 1578 阅读 · 11 评论 -
Three.js--》建模软件如何加载外部3D模型？
3D美术常用的三维建模软件，比如Blender(轻量开源)、3damx、C4D、maya等等，特殊行业项目可能涉及到行业软件，比如机械相关（SW、UG）等，建筑相关（草图大师、revit）。3D建模与程序的分工流程是3D美术：使用三维建模软件绘制3D模型，导出gltf等常见格式程序员：加载解析三维软件导出的三维模型比如使用Blender三维建模软件导出gltf格式模型，然后再通过threejs加载三维模型程序员学习3D建模的好处：了解3D相关概念，想比较代码，建模软件给人的感觉更加形象容易理解。原创 2023-05-26 01:06:54 · 3421 阅读 · 21 评论 -
Three.js--》实现3d球形机器人模型展示
今天简单实现一个three.js的球形机器人模型，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。原创 2023-05-25 22:46:48 · 1337 阅读 · 13 评论 -
Three.js--》实现3d圣诞贺卡展示模型
今天简单实现一个three.js的3d圣诞贺卡模型，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。原创 2023-05-25 16:22:12 · 1891 阅读 · 30 评论 -
Three.js--》实现3d汽车模型展览搭建
今天简单实现一个three.js的3d汽车展览模型，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。原创 2023-05-24 14:13:14 · 4513 阅读 · 41 评论 -
Three.js--》实现3d水晶小熊模型搭建
今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。原创 2023-05-22 17:26:10 · 2122 阅读 · 33 评论 -
Three.js--》实现3d小岛模型搭建
今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。原创 2023-05-16 15:22:17 · 1964 阅读 · 25 评论 -
Three.js--》模型材质与纹理的使用
例如，材质可以定义一个几何体看起来像金属还是木板，是否透明，什么颜色等，然后添加到Mesh中才可以添加到场景中进行渲染。本章，将会带领大家熟悉Three.js中API提供的所有材质，你也会学会运用这些材质，制作精美的三维物体。环境贴图就类似于将一个几何体的全身都贴上图片，让其彷佛置身在当前的空间当中，当然这里的图片你可以采用真实的类似商业街道或者乡野田园等等。当然我们可以采用一些贴图网站提供给我们的素材，对某一几何体进行相关细节特征的编写，在这就不再过多赘述，后期项目中会逐一讲解，原创 2023-05-04 23:55:18 · 2795 阅读 · 33 评论 -
Three.js--》几何体顶点知识讲解
通过JS类型化数组创建一组xyz坐标数据用来表示几何体的顶点坐标。// 创建一个空的几何体顶对象// 添加顶点数据const vertices = new Float32Array([ // 数组里面编写顶点坐标数据0,0,0, // 顶点1坐标50,0,0, // 顶点2坐标0,100,0, // 顶点3坐标0,0,10, // 顶点4坐标0,0,100, // 顶点5坐标50,0,10 // 顶点6坐标])通过three.js的属性缓冲区对象表示threejs几何体顶点数据。原创 2023-05-03 18:33:54 · 1578 阅读 · 20 评论 -
Three.js--》Gui.js库的使用讲解
这个我百度了一下，好像之前three版本使用的是dat.gui库，而我现在下载是three.js使用的是另一个lil.gui库，这是两个不同的GUI库，虽然它们的作用相似，但是它们的用法和API有所不同，目前我下载的three.js库使用的就是lil.gui库，就姑且以它举例说明吧。其他参数：可以是一个或多个，数据类型也可以不同，gui会自动根据参数形式，自动生成对应的交互界面，参数3和参数4分别是一个数字，交互界面是一个鼠标可以拖动的拖动条，可以在一个区间改变属性的值。原创 2023-05-02 19:59:30 · 3562 阅读 · 15 评论 -
Three.js--》Gsap动画库基本使用与原理
GSAP的全名是GreenSock Animation Platform，是一个从flash时代一直发展到今天的专业动画库，今天将其与three.js进行结合，看看能够创作出怎样的效果，首先我们先要理解动画渲染循环的原理：three.js可以借助HTML5的API请求动画帧。通过stats.js库可以查看three.js当前的渲染性能，具体说就是计算three.js的渲染帧率(FPS)，所谓渲染帧率(FPS)，简单说就是three.js每秒钟完成的渲染次数，一般渲染达到每秒钟60次为最佳状态。原创 2023-05-01 20:18:12 · 2239 阅读 · 18 评论 -
Three.js--》理解光源对物体产生影响的重要性
上篇文章作为three.js入门篇讲解了许多内容但是没有深入了解其原理以及实现方法，仅仅只是展示了实现的内容及代码，本篇文章将深入讲解实现效果其背后用到的知识与原理。原创 2023-04-26 18:32:59 · 1445 阅读 · 27 评论 -
Three.js--》前端开发者掌握3d技术不再是梦，初识threejs
对于网站而言，web 3d 技术应用，实现了企业网站的三维呈现，让企业形象更加直观更立体的展现给客户，打破传统平面展示模式，而传统的3d技术shader直接让前端开发者去挑战的话其实是有难度的，因为其和前端真的就是两种不一样的东西，由此适配前端开发者使用3d技术的three.js应运而生，让前端开发者掌握3d技术不再是梦原创 2023-04-25 22:30:36 · 4417 阅读 · 31 评论