首先明确最终web三维智慧城市的形态，在最近的项目中，我们接触到了一个县级城市的web三维城市可视化。
首选肯定是Three.js 官方文档了，这是学习和使用Three.js 这一基于 WebGL 的 JavaScript 3D 图形库的重要资源。包含了各种功能的描述解读，还有很多示例和教程。
技术在进步，如果半年不学习新技术，那么我就落后了。本教程将带你进入一个全新的技术世界，它叫做WebGL。
而会议中最令我眼前一新的当然是 轮子哥 Rich-Harris 带来的 Svelte Cubed 了。
-----------------------------------本文非技术文章，着急开发的小伙伴请绕道-----------------------------------------
解决方法: 官方提供了射线捕获的接口 raycaster.intersectObjects, 但是只能识别自建的Mesh模型, 对于导入的模型则无法捕获, 主要是因为导入的模型最外层包了一层, 没有把自己内部的Mesh暴露出来 所以我们需要在模型导入后, 在onProgress回调中对其进行递归获取子Mesh, 将所有Mesh存在一个全局数组中. 在鼠标事件触发时, 将全局数组提供给raycaster.intersectObjects, 即可识别 1. 递归函数
作为整天和 UI 打交道的前端工程师，是否想在他（她）生日的时候用代码送上一份惊喜呢？
最关键的一个样式是text-shadow，他的签名是这样的：text-shadow: h-shadow v-shadow blur color;，其中第一个参数h-shadow是水平方向的偏移量，正数是向右偏移，负数是向左偏移；第二个参数v-shadow是垂直方向偏移量，正数是向下偏移，负数是向上偏移；第三个参数blur是模糊大小，值越大越模糊，该值可以不写，默认是0，表示不模糊；第四个参数color是颜色，同样可以不写，默认是当前字体的颜色。
浮雕模型，简单地说就是在木板上刻字时所形成的效果，如果把字的部分都剔除掉，就得到一个凹浮雕模型，如果把字以外的部分都剔除掉，就得到一个凸浮雕模型。本文分别对利用Three.js在Web环境中生成凹浮雕模型时的几种策略进行讲解。
前阵子我不是删了一些技术文么，为此还发了一篇公告（《如果你发现我的文章404了，别慌》），小伙伴们不太理解为啥，甚至产生了误会。其实是因为我当时也不方便明说，不过现在可以简单提一嘴了。没错，那些技术文里涉及到专利内容了，不干掉不行啊家人们
很多网友反应“这也太可爱了吧”，连摩纳哥亲王也想带回去两个给自己的龙凤胎，请求工作人员再为自己制作一个冰墩墩，不然回去也就“不好交代”了。
本文从绘图基础开始讲起，详细介绍了如何使用 Three.js开发一个功能齐全的全景插件。
WebGL（Web Graphics Library）是一种 JavaScript API，用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形，不需要插件，即专门处理计算或处理3D图像的JS API。
有没有想过把身边的物件儿转成 3D 动画，在网页上实现一把？本期特推的项目 Three.js 就是帮你创建 3D 页面的知名开源项目，好玩的 3D 世界在向你招手。除了打开浏览器 3D 世界的钥匙外，还有担心你吃不好的 HowToCook 手把手带你摆脱吃泡面过上煮饭、烹饪居家生活。
近来风生水起的VR虚拟现实技术，抽空想起年初完成的“星球计划”项目，总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍。 QQ物联与深圳市天文台合作，在手Q“发现新设备”-“公共设备”里，连
本周 Mixlab 参加了一次虚拟活动～活动的场地是 Vland 云现场。 主题是分享线上会展的场地创作方法与布展思路。
「元宇宙」这个概念在近来十分火热，但本质来上说，元宇宙这个词更多的是一个商业上的概念，在这个概念里面融入集成了很多现有的技术。具体可能包括：
上次在文章ThreeJS中三维世界坐标转换成二维屏幕坐标介绍了三维二维坐标的转换方法，今天结合一个用例具体说下用法。
近来风生水起的VR虚拟现实技术，抽空想起年初完成的“星球计划”项目，总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍。 QQ物联与深圳市天文台合作，在手Q“发现新设备”-“公共设备”里，连接QQ物联摄像头为用户提供2016年天体大事件的直播，大家可以通过手Q实时观看到世界各地最佳观测点的日食，流星等天体现象。承载整个“星球计划”活动的运营页面，经多方讨论，我们决定尝试3D全景漫游模式的H5运营页进行推广，今天就不详述活动的具体内容，先和大家聊一聊这H5里“3D全景漫游”的制作方法。 先贴一
Three.js 是基于 WebGL 技术，用于浏览器中开发 3D 交互场景的 JS 引擎。
如果你使用的是Vue + threejs或React + threejs技术栈，那么threejs就是一个js库，直接通过npm命令行安装就行。
在数字化时代，Web3D技术因其独特的三维展示和交互能力，成为前端开发领域的热门话题。WebGL与Three.js作为Web3D技术的两大核心工具，为开发者提供了强大的渲染能力和丰富的API接口。本文将深入探讨WebGL与Three.js的入门知识，并结合实战案例，帮助读者系统学习Web3D技术。
本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。 学习
随着互联网的飞速发展，Web3D技术作为网页中虚拟现实的一种重要手段，正在逐渐受到业界的重视。WebGL和Three.js作为Web3D技术的两大核心工具，为开发者提供了强大的3D图形渲染和交互功能。本文将详细阐述如何通过WebGL和Three.js入门并实战Web3D技术，帮助读者系统掌握相关知识。
以上demo总结来说，使用了 Three.js 库创建了一个简单的绿色立方体模型，并实现了旋转动画效果。 总结一下它的步骤：
我习惯使用 vs code 编写前端代码，如果是用原生三件套学习，我还会使用 Live Server 插件辅助开发。
在Three.js中，三维空间指的是具有三个独立轴的空间，通常称为X、Y和Z轴。这种空间用于描述和定位3D对象的位置、旋转和缩放。
如果你想抓住你的网站访问者的注意力，还有什么能比动画更好呢？使用网络上免费提供的许多应用引擎，你可以很容易地让你的网站元素褪色、跳动或嗖嗖作响。在今天的文章中，我们将看到JavaScript动画库如何帮助实现这一切。 ◆首先，介绍一下JavaScript的动画 添加只需要一个动作的简单动画（例如，切换）是一回事。对于这一点，你总是可以使用简单的CSS动画。但是，对于更复杂或高级的效果。JavaScript是一个更好的工具。不言而喻，使用JavaScript来创建动画比使用CSS更具挑战性。 然而，Java
Three.js是一个在浏览器里创造3D内容的 JavaScript库，它让我们能够更加轻松的为网页创建3D体验。
笔者之前从未接触过微信小程序和WebGL的开发，但是却一直有留意相关技术的发展，大概听说原来微信小程序是不支持WebGL 3D技术的。这次借着微信大力推广小游戏，看了一下API文档，发现小游戏是可以使用的WebGL进行开发的。而最近正好又有点时间，就随便搞搞，试试小游戏的效果。因为小游戏“跳一跳”是用three.js所制作的，所以我就选择了three.js所。那么开始吧。
这是我们开始使用Three.js的第一个小节，我们回顾一下用Web开发最经典的方式来使用它，一个<script>标签。
Three.js 是一个功能强大的 JavaScript 库，用于在 Web 浏览器中创建和显示动画 3D 图形。它的丰富 API 和模块化设计使得开发者可以轻松构建复杂的 3D 场景和动画效果。本文将详细介绍 Three.js 中的一些重要组件和模块，包括场景、相机、几何体、材质、光源、渲染器和控制器等。
https://segmentfault.com/a/1190000019151460
本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。
为现代网络开发令人兴奋的事情之一是底层平台的快速发展。 WebAssembly、WebGL、WebGPU、Web Worker 等正在解锁以前典型 Web 产品无法想象的体验。 在过去的几年里，我们看到像 Figma 这样的产品利用这一点创造了极具吸引力的业务和产品。
Three.js是一个流行的JavaScript库，用于在浏览器中创建和显示3D图形。它基于WebGL，一个浏览器支持的3D图形API，使得开发者能够在网页上创建复杂的3D场景和交互体验。
本文主要介绍了WebGL和Three.js的渲染流程，从加载模型到生成纹理和片元着色器，再到进行矩阵计算和坐标转换，最终完成3D渲染。
在这个分步指南中，我们将使用一个基于 WebGL 的 3D 图形的框架 three.js， 创建一个 3D 版本的 Treehouse 徽标。你可以通过点击或者拖拽鼠标使相机旋转！你也可以使用鼠标滚轮进行缩放。
自 Three.js 2010 年成立以来， 一直是在 Web 上构建 3D 视觉效果的标准。 多年来，基于这个库构建了很多抽象库，它们整合了 Three.js 的特性，可以帮助开发者创建快速、令人惊叹和高性能的 Web 应用程序。
场景（Scene）相当于是一个容器，可以在它上面添加光线，物体等，最后Three.js把它和相机一起渲染到DOM中。
在这个教程中，我们将学习如何使用three.js渲染土耳其最高的Ağrı山脉的数字高程模型（DEM）数据，使用的工具包括Three.js、geotiff、webpack和QGIS。
去年谷歌和火狐针对WebVR提出了WebVR API的标准，顾名思义，WebVR即web + VR的体验方式，我们可以戴着头显享受沉浸式的网页，新的API标准让我们可以使用js语言来开发。今天，约克先森将介绍如何开发一个WebVR网页，在此之前，我们有必要了解WebVR的体验方式。 WebVR体验模式 ---- WebVR的体验方式可以分为VR模式和裸眼模式 VR模式 1.滑配式HMD + 移动端浏览器 如使用cardboard眼镜来体验手机浏览器的webVR网页，浏览器将根据水平陀螺仪的参数来获取用户
今天开始我们进入一个新的世界，那就是3D世界。由于我自己也是刚接触到这块内容，所以如果文章中有问题，请尽快在文章最后的留言板中请指出。本教程有配套代码仓库，请点击https://github.com/KaiOrange/three.js-demo。
这是一次利用 three.js 开发微信小游戏的尝试，并不能算作是教程，只能算是一篇笔记吧。
随着前两天冬奥会序幕的正式拉开，也成功带火了本次吉祥物冰墩墩。憨厚可爱的熊猫形象，让冰墩墩的实体公仔、钥匙扣都被一抢而空，众多网友呼吁现在真的是「一墩难求」！
本篇文章将带你深入了解Three.js中的光源类型、属性和使用方法，助你在创建虚拟世界时获得更加生动逼真的效果
尽管 Three.js 文档已经比较详细了，但对于刚接触 Three.js 的工友来说，最麻烦的还是不懂如何组合。Three.js 的功能实在太多了，初学者很容易被大量的新概念冲晕。
在学习 Three.js 时，很多知识点其实记住几个重要的步骤就能实现相应的效果。
随着人们对用户体验越来越重视，Web开发已经不满足于2D效果的实现，而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库，它的出现让3D应用开发更简单，本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
