在这个分步指南中，我们将使用一个基于 WebGL 的 3D 图形的框架 three.js， 创建一个 3D 版本的 Treehouse 徽标。你可以通过点击或者拖拽鼠标使相机旋转！你也可以使用鼠标滚轮进行缩放。
正式学习前端大概 3 年多了，接触前端大概 4 年了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。
随着互联网的飞速发展，Web3D技术作为网页中虚拟现实的一种重要手段，正在逐渐受到业界的重视。WebGL和Three.js作为Web3D技术的两大核心工具，为开发者提供了强大的3D图形渲染和交互功能。本文将详细阐述如何通过WebGL和Three.js入门并实战Web3D技术，帮助读者系统掌握相关知识。
在数字化时代，Web3D技术因其独特的三维展示和交互能力，成为前端开发领域的热门话题。WebGL与Three.js作为Web3D技术的两大核心工具，为开发者提供了强大的渲染能力和丰富的API接口。本文将深入探讨WebGL与Three.js的入门知识，并结合实战案例，帮助读者系统学习Web3D技术。
如果你使用的是Vue + threejs或React + threejs技术栈，那么threejs就是一个js库，直接通过npm命令行安装就行。
前阵子我不是删了一些技术文么，为此还发了一篇公告（《如果你发现我的文章404了，别慌》），小伙伴们不太理解为啥，甚至产生了误会。其实是因为我当时也不方便明说，不过现在可以简单提一嘴了。没错，那些技术文里涉及到专利内容了，不干掉不行啊家人们
Three.js是一个在浏览器里创造3D内容的 JavaScript库，它让我们能够更加轻松的为网页创建3D体验。
电子游戏和编程充满联系。从雅达利兴盛的年代开始，游戏就已经开始影响一代又一代程序员。他们开发游戏，在游戏过程中获得快乐。随着机器学习的兴起，程序员们让人工智能学会游戏技巧，战胜人类。在 9102 年，很多计算机技术完全可以通过游戏轻松快乐地学习，本文将从三方面提供从游戏到编程的入门指南：
在Three.js中，三维空间指的是具有三个独立轴的空间，通常称为X、Y和Z轴。这种空间用于描述和定位3D对象的位置、旋转和缩放。
以上demo总结来说，使用了 Three.js 库创建了一个简单的绿色立方体模型，并实现了旋转动画效果。 总结一下它的步骤：
我习惯使用 vs code 编写前端代码，如果是用原生三件套学习，我还会使用 Live Server 插件辅助开发。
尽管 Three.js 文档已经比较详细了，但对于刚接触 Three.js 的工友来说，最麻烦的还是不懂如何组合。Three.js 的功能实在太多了，初学者很容易被大量的新概念冲晕。
一些有WebGL体验的页面，浏览者有种在一个带有材质的隧道中穿梭的感受。这有赖于Three.js以及由fornasetti.com带来的灵感。
有没有想过把身边的物件儿转成 3D 动画，在网页上实现一把？本期特推的项目 Three.js 就是帮你创建 3D 页面的知名开源项目，好玩的 3D 世界在向你招手。除了打开浏览器 3D 世界的钥匙外，还有担心你吃不好的 HowToCook 手把手带你摆脱吃泡面过上煮饭、烹饪居家生活。
很多刚刚接触到游戏开发，准备大展拳脚的小鲜肉们，往往在技术选型这第一关就栽了跟头。毕竟网络上的游戏引擎良莠不齐，官网上相关资料也比较少，而选择一个适合的游戏引擎是一个项目最基础，也是很核心的一部分。 试想一下，在游戏开发进行到中后期的时候，才发现项目引入的游戏引擎与需求相悖，这时候不管是重新做一些修修补补的工作或者更换游戏引擎，这都是相当耗费人力物力的一件事。为了避免这种情况的出现，在前期选择适合项目需求的游戏引擎显得尤为重要。 接下来我们来聊一聊如何去选择适合项目的 JS 游戏引擎。
浮雕模型，简单地说就是在木板上刻字时所形成的效果，如果把字的部分都剔除掉，就得到一个凹浮雕模型，如果把字以外的部分都剔除掉，就得到一个凸浮雕模型。本文分别对利用Three.js在Web环境中生成凹浮雕模型时的几种策略进行讲解。
在学习 Three.js 时，很多知识点其实记住几个重要的步骤就能实现相应的效果。
随着元宇宙概念的火爆，3D 渲染相关的技术频繁被提及，而 Three.js 是基于 WebGL 的 api 封装的用于简化 3D 场景的开发的框架， 是入门 3D 的不错的抓手，今天我们就来入门下 Three.js。
「元宇宙」这个概念在近来十分火热，但本质来上说，元宇宙这个词更多的是一个商业上的概念，在这个概念里面融入集成了很多现有的技术。具体可能包括：
通读完上一篇博文中提及的教程，觉得应该搞个大作业巩固一下所学的知识，想起刚上映的漫威宇宙第三阶段收官之作《蜘蛛侠·英雄远征》，于是决定仿一个MARVEL的片头动画作为three.js的课后练习，使用的版本是R104版本。本节先来解决视频贴图的问题。
本篇文章将带你深入了解Three.js中的光源类型、属性和使用方法，助你在创建虚拟世界时获得更加生动逼真的效果
一个好的前端界面中很重要的内容就是动画，使用符合场景的动画不仅可以优化网站页面中的交互细节，提高用户体验，还可以让页面更具有吸引力，给网站带来更多访问量。如果你还不具备手写各种骚动画的能力，那么下面介绍的这几个动画库可得收藏好了~
很多人对于WebGIS不是很熟悉，尤其是刚接触WebGIS的开发人员来说，感觉这东西漫无边际，不知道如何下手，所以本篇文章就结合自己的开发和学习经验，给大家推荐一下学习路线和相关的学习资源。
随着互联网的持续发展，H5 页面作为与用户直接交互的表现层越来越复杂，呈现的形式也越来越丰富，从而也要求 H5 页面具有更多的花样性及动画效果。那前端实现动画效果的方式有哪些呢，大致有如下几种：
如果要构建一个具有交互性和拓展性的沉浸式漫游场景，常用到3DSMAX、three.js等软件技术，学习门槛较高；ThingJS可视化组件更加轻量化，B/S架构下的3D可视化应用构建更轻松，为不少企业客户降低了项目开发成本。
为实现企业80%以上的生产数据进行智能转化，在烟草、造纸、能源、电力、机床、化肥等行业，赢得领袖企业青睐，助力企业构建AI赋能中心，实现智能化转型升级。“远舢文龙数据处理平台”以AI驱动，构建5G时代下企业数智基础，从根本上改变了数据采集、存储和使用的方式，是当下企业构建数字化与智能化能力的首选产品。“远舢知识图谱平台”，作为国内第一批落地应用的“知识图谱”，平均缩短智能化应用开发周期70%，延长企业分析决策应用生命周期150%。“远舢Hybrid Twin”构建面向未来智能工厂全场景的全息交互模式，实现物理空间与数字空间的混合孪生。为国产工业AI新锐，以远舢工业云平台为核心，以AI驱动的方式，打造一个用户可以自研APP的智能云平台，变革未来企业IT消费模式，输送企业转型升级动能，为企业创造可量化价值。我们在这领域展示出来的强大产品竞争力，以及公司团队深耕制造、脚踏实地、坚持打造极致产品的理念，持续提供增值服务，我们期待和坚信远舢公司能成为未来企业级人工智能领域的独角兽！ 本文为选择合适的webGl框架，为后续项目奠定基础；避免盲目选择框架，导致后续项目重构带来不必要的成本浪费。本文清楚的讲述了各个框架的特点，适用范围，优缺点以及相关网址范例；以便于后续更快速的开发，提高生产效率，最后进行总结。
个人博客是程序员的第二张简历。如果你有酷炫的个人网页，面试官对你的好感度会蹭蹭蹭往上涨。
种种原因吧，需要在和大伙分享Elasticsearch的间隙，也来分享一下threejs的一些用法。有一个小小愿望，希望这个threejs教程最终也能成一个系列。 随着浏览器性能的不断提升，以及对webgl的支持，在浏览器上展示3d模型早已不是痴人说梦，不过如果使用原生的webgl的话，开发起来难度还是略大，一个常见的解决方案就是使用threejs，这是一个封装的库，使用它我们可以更好的在网页上实现3d效果，threejs地址为https://github.com/mrdoob/three.js。
本文首发于政采云前端团队博客：WebGL 概念和基础入门 https://www.zoo.team/article/webglabout
技术在进步，如果半年不学习新技术，那么我就落后了。本教程将带你进入一个全新的技术世界，它叫做WebGL。
Three.js 是基于 WebGL 技术，用于浏览器中开发 3D 交互场景的 JS 引擎。
首选肯定是Three.js 官方文档了，这是学习和使用Three.js 这一基于 WebGL 的 JavaScript 3D 图形库的重要资源。包含了各种功能的描述解读，还有很多示例和教程。
欢迎来到「初识Threejs」，我是一名一线前端开发者，热爱记录分享。在这个公众号里，我将分享Three.js的研究、实践和感悟，所以，不管你是初入前端的新手，还是有一定经验的开发者，我都诚挚地邀请你加入3D的奇妙世界，我们一起探索Three.js的魅力，见证前端技术栈的发展。
本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。 学习
从 2018 年开始，我就养成了每天逛 GitHub 的习惯，一般在早上上班前或者中午午休的时候都会逛一下。
如果你想抓住你的网站访问者的注意力，还有什么能比动画更好呢？使用网络上免费提供的许多应用引擎，你可以很容易地让你的网站元素褪色、跳动或嗖嗖作响。在今天的文章中，我们将看到JavaScript动画库如何帮助实现这一切。 ◆首先，介绍一下JavaScript的动画 添加只需要一个动作的简单动画（例如，切换）是一回事。对于这一点，你总是可以使用简单的CSS动画。但是，对于更复杂或高级的效果。JavaScript是一个更好的工具。不言而喻，使用JavaScript来创建动画比使用CSS更具挑战性。 然而，Java
本周 Mixlab 参加了一次虚拟活动～活动的场地是 Vland 云现场。 主题是分享线上会展的场地创作方法与布展思路。
最近从北京搬到了上海，开始了一段新的生活，算是人生中一个比较大的事件，于是特地用 Three.js 做了下可视化。
提起JavaScript，我们也许经常会想到的是，可以用来写Web页面嘛，又或者，会想起Node.js 这个服务端环境，搞前后端同构。
笔者之前从未接触过微信小程序和WebGL的开发，但是却一直有留意相关技术的发展，大概听说原来微信小程序是不支持WebGL 3D技术的。这次借着微信大力推广小游戏，看了一下API文档，发现小游戏是可以使用的WebGL进行开发的。而最近正好又有点时间，就随便搞搞，试试小游戏的效果。因为小游戏“跳一跳”是用three.js所制作的，所以我就选择了three.js所。那么开始吧。
这是我们开始使用Three.js的第一个小节，我们回顾一下用Web开发最经典的方式来使用它，一个<script>标签。
而会议中最令我眼前一新的当然是 轮子哥 Rich-Harris 带来的 Svelte Cubed 了。
采访嘉宾 | 白景文 采访编辑 | 闫园园 在 GMTC 全球大前端技术大会 (深圳站)2021 上，贝壳找房资深工程师郝稼力分享了《从 WebGL 到 WebGPU——网页图形的全新时代》的专题演讲，彼时他曾谈到一个观点：WebGL 已成明日黄花，网页图形的未来要看 WebGPU。这里提到的 WebGPU 正是最新的 Web 3D 图形 API，也是 WebGL 的升级版。 从目前来看，国外知名度较高的渲染引擎 Three.js 和 Babylon.js 等也都在着手对 WebGPU 的支持，从中不
Three.js 是一个功能强大的 JavaScript 库，用于在 Web 浏览器中创建和显示动画 3D 图形。它的丰富 API 和模块化设计使得开发者可以轻松构建复杂的 3D 场景和动画效果。本文将详细介绍 Three.js 中的一些重要组件和模块，包括场景、相机、几何体、材质、光源、渲染器和控制器等。
-----------------------------------本文非技术文章，着急开发的小伙伴请绕道-----------------------------------------
这篇郭先生就来说说使用three.js几何体制作3D地图。在线案例点击3D中国地图
首先明确最终web三维智慧城市的形态，在最近的项目中，我们接触到了一个县级城市的web三维城市可视化。
最近听了一首很好听的歌《一路生花》，于是就想用 Three.js 做个音乐频谱的可视化，最终效果是这样的：
相信很多人都没有逛 GitHub 的习惯，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。
本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
