以上demo总结来说，使用了 Three.js 库创建了一个简单的绿色立方体模型，并实现了旋转动画效果。 总结一下它的步骤：
Three.js 是一个功能强大的 JavaScript 库，用于在 Web 浏览器中创建和显示动画 3D 图形。它的丰富 API 和模块化设计使得开发者可以轻松构建复杂的 3D 场景和动画效果。本文将详细介绍 Three.js 中的一些重要组件和模块，包括场景、相机、几何体、材质、光源、渲染器和控制器等。
这是我们开始使用Three.js的第一个小节，我们回顾一下用Web开发最经典的方式来使用它，一个<script>标签。
本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。 学习
Three.js是一个流行的JavaScript库，用于在浏览器中创建和显示3D图形。它基于WebGL，一个浏览器支持的3D图形API，使得开发者能够在网页上创建复杂的3D场景和交互体验。
浮雕模型，简单地说就是在木板上刻字时所形成的效果，如果把字的部分都剔除掉，就得到一个凹浮雕模型，如果把字以外的部分都剔除掉，就得到一个凸浮雕模型。本文分别对利用Three.js在Web环境中生成凹浮雕模型时的几种策略进行讲解。
在Three.js中，一个可见的物体是由几何体和材料构成的。在这个教程中，我们将学习如何从头开始创建新的网格几何体，研究Three.js为处理几何对象和材质所提供的相关支持。
在这个分步指南中，我们将使用一个基于 WebGL 的 3D 图形的框架 three.js， 创建一个 3D 版本的 Treehouse 徽标。你可以通过点击或者拖拽鼠标使相机旋转！你也可以使用鼠标滚轮进行缩放。
随着人们对用户体验越来越重视，Web开发已经不满足于2D效果的实现，而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库，它的出现让3D应用开发更简单，本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。
VtKLoader是一种用于加载和解析VTK（Visualization Toolkit）文件格式的JavaScript加载器。VTK是一个用于科学可视化和图形处理的开源软件系统，广泛应用于医学影像处理、地球科学、工程和计算流体动力学等领域。
为实现企业80%以上的生产数据进行智能转化，在烟草、造纸、能源、电力、机床、化肥等行业，赢得领袖企业青睐，助力企业构建AI赋能中心，实现智能化转型升级。“远舢文龙数据处理平台”以AI驱动，构建5G时代下企业数智基础，从根本上改变了数据采集、存储和使用的方式，是当下企业构建数字化与智能化能力的首选产品。“远舢知识图谱平台”，作为国内第一批落地应用的“知识图谱”，平均缩短智能化应用开发周期70%，延长企业分析决策应用生命周期150%。“远舢Hybrid Twin”构建面向未来智能工厂全场景的全息交互模式，实现物理空间与数字空间的混合孪生。为国产工业AI新锐，以远舢工业云平台为核心，以AI驱动的方式，打造一个用户可以自研APP的智能云平台，变革未来企业IT消费模式，输送企业转型升级动能，为企业创造可量化价值。我们在这领域展示出来的强大产品竞争力，以及公司团队深耕制造、脚踏实地、坚持打造极致产品的理念，持续提供增值服务，我们期待和坚信远舢公司能成为未来企业级人工智能领域的独角兽！ 本文为选择合适的webGl框架，为后续项目奠定基础；避免盲目选择框架，导致后续项目重构带来不必要的成本浪费。本文清楚的讲述了各个框架的特点，适用范围，优缺点以及相关网址范例；以便于后续更快速的开发，提高生产效率，最后进行总结。
在这个教程中，我们将学习如何使用three.js渲染土耳其最高的Ağrı山脉的数字高程模型（DEM）数据，使用的工具包括Three.js、geotiff、webpack和QGIS。
随着时代的发展和科技的进步，人们的生活水平和消费需求不断提高。商场作为购物、休闲、娱乐的综合性场所，受到了越来越多消费者的青睐。然而，随着商场规模的不断扩大和楼层的增多，很多人在商场内总是感到迷茫，很难快速找到目标店家。为了解决这一问题，利用 WebGL 和 Three.js 技术实现多楼层商场地图成为了一种新的解决方案。
为现代网络开发令人兴奋的事情之一是底层平台的快速发展。 WebAssembly、WebGL、WebGPU、Web Worker 等正在解锁以前典型 Web 产品无法想象的体验。 在过去的几年里，我们看到像 Figma 这样的产品利用这一点创造了极具吸引力的业务和产品。
本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。
经过上一小节，我们学会了如何使用各种类型的灯光。既然有了光，那还得有阴影，这样看起来才会更加真实。
「元宇宙」这个概念在近来十分火热，但本质来上说，元宇宙这个词更多的是一个商业上的概念，在这个概念里面融入集成了很多现有的技术。具体可能包括：
尽管 Three.js 文档已经比较详细了，但对于刚接触 Three.js 的工友来说，最麻烦的还是不懂如何组合。Three.js 的功能实在太多了，初学者很容易被大量的新概念冲晕。
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。
最近，程序员群里流行一个比较火的一个视频，尤其是很多前端程序员都不由的赞叹此视频。视频内容是一个完全由前端完成的类似"量子纠缠"效果的项目。看完之后很多人表示前端白学了。原视频如下，作者为nonfigurativ。想象一下，当你在多个显示器前操作，每个显示器就像是一个窗口，通过这些窗口你可以观察到同一个3D场景的不同部分，而这一切都实现了无缝连接。这不仅仅是技术上的创新，更是用户体验上的大跃进！
笔者之前从未接触过微信小程序和WebGL的开发，但是却一直有留意相关技术的发展，大概听说原来微信小程序是不支持WebGL 3D技术的。这次借着微信大力推广小游戏，看了一下API文档，发现小游戏是可以使用的WebGL进行开发的。而最近正好又有点时间，就随便搞搞，试试小游戏的效果。因为小游戏“跳一跳”是用three.js所制作的，所以我就选择了three.js所。那么开始吧。
很多网友反应“这也太可爱了吧”，连摩纳哥亲王也想带回去两个给自己的龙凤胎，请求工作人员再为自己制作一个冰墩墩，不然回去也就“不好交代”了。
在 three.js 里以向右的方向为 x 轴，向上的方向为 y 轴，向前的方向为 z 轴：
Three.js实现脸书元宇宙3D动态Logo 背景 Facebook 近期将其母公司改名为 Meta，宣布正式开始进军 元宇宙 🪐领域。本文主要讲述通过 Three.js + Blender 技术栈，实现 Meta 公司炫酷的 3D 动态 Logo，内容包括基础模型圆环、环面扭结、管道及模型生成、模型加载、添加动画、添加点击事件、更换材质等。 什么是元宇宙 元宇宙 Metaverse 一词源于 1992 年尼尔·斯蒂芬森的 《雪崩》，该书描述了一个平行于现实世界的虚拟世界 Metaverse，所有现实
在Three.js的赋能下，WEB网页效果逐渐丰富起来，今天我们就来运用之前学习的Three.js基础知识，实现一个旋转的几何体-球体。
一个鼓舞人心的演示，用three.js探索3D空间中的粒子动画。 这种类型的动画可能非常适合页面加载器。
最近看了看threeJS的文档，对它初步有了一个新的认识。整理了上上面的图片，有需要的可以保存一下。
我习惯使用 vs code 编写前端代码，如果是用原生三件套学习，我还会使用 Live Server 插件辅助开发。
解决方法: 官方提供了射线捕获的接口 raycaster.intersectObjects, 但是只能识别自建的Mesh模型, 对于导入的模型则无法捕获, 主要是因为导入的模型最外层包了一层, 没有把自己内部的Mesh暴露出来 所以我们需要在模型导入后, 在onProgress回调中对其进行递归获取子Mesh, 将所有Mesh存在一个全局数组中. 在鼠标事件触发时, 将全局数组提供给raycaster.intersectObjects, 即可识别 1. 递归函数
最近因为鸿星尔克给河南捐了5000万物资，真的是看哭了很多的网友，普通一家公司捐款5000万可能不会有这样的共情，但是看了鸿星尔克的背景之后，发现真的是令人心酸。鸿星尔克2020年的营收是28亿，但是利润却是亏损2个亿，甚至连微博的官方账号都舍不得开会员，在这种情况下，还豪气地捐赠5000万，真的是破防了。
在 《Three.js 基础纹理贴图》 里介绍了如何给图形贴图，贴图前需要先把纹理加载好。我们基于这篇文章继续讲解如何监听材质加载成功或者失败。
在Three.js中，三维空间指的是具有三个独立轴的空间，通常称为X、Y和Z轴。这种空间用于描述和定位3D对象的位置、旋转和缩放。
通读完上一篇博文中提及的教程，觉得应该搞个大作业巩固一下所学的知识，想起刚上映的漫威宇宙第三阶段收官之作《蜘蛛侠·英雄远征》，于是决定仿一个MARVEL的片头动画作为three.js的课后练习，使用的版本是R104版本。本节先来解决视频贴图的问题。
场景（Scene）相当于是一个容器，可以在它上面添加光线，物体等，最后Three.js把它和相机一起渲染到DOM中。
本文首发于政采云前端团队博客：WebGL 概念和基础入门 https://www.zoo.team/article/webglabout
在数字化时代，Web3D技术因其独特的三维展示和交互能力，成为前端开发领域的热门话题。WebGL与Three.js作为Web3D技术的两大核心工具，为开发者提供了强大的渲染能力和丰富的API接口。本文将深入探讨WebGL与Three.js的入门知识，并结合实战案例，帮助读者系统学习Web3D技术。
如果要构建一个具有交互性和拓展性的沉浸式漫游场景，常用到3DSMAX、three.js等软件技术，学习门槛较高；ThingJS可视化组件更加轻量化，B/S架构下的3D可视化应用构建更轻松，为不少企业客户降低了项目开发成本。
自 Three.js 2010 年成立以来， 一直是在 Web 上构建 3D 视觉效果的标准。 多年来，基于这个库构建了很多抽象库，它们整合了 Three.js 的特性，可以帮助开发者创建快速、令人惊叹和高性能的 Web 应用程序。
3D机房系统是最近用户的需求,通过相关了解最后使用Three.js,也发现最近有东西可以写出来分享：
Three.js 是基于 WebGL 技术，用于浏览器中开发 3D 交互场景的 JS 引擎。
一般我们拍照都是拍一个方向，而全景图是拍上下左右前后 6 个方向，360 度，这样能够立体的记录所在的场景。
说到博客大家一定都不陌生，不管你是深耕职场多年的老鸟，还是在学校努力学习的小鸟，应该都有过一段“装扮”博客的经历，比如：放上喜欢的图片、添加炫酷的交互、换上 DIY 的博客主题等等。但不管再怎么“打扮”，也跳脱不出平面的“凡胎”。
这两天用 Three.js 画了一个 3D 的房子，放了一个床进去，可以用鼠标和键盘控制移动，有种 3D 游戏的即视感。
这一节我们给摩托车的场景添加天空盒，使其在蓝天白云下展示，在添加天空盒之前，我们需要先来认识下CubeTexture和CubeTextureLoader
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。 Three.js的核心五步就是： 1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设置物体object 1.设置three.js渲染器 三维空间里的物体映射到二维平面的
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
