经过上一小节，我们学会了如何使用各种类型的灯光。既然有了光，那还得有阴影，这样看起来才会更加真实。
尽管 Three.js 文档已经比较详细了，但对于刚接触 Three.js 的工友来说，最麻烦的还是不懂如何组合。Three.js 的功能实在太多了，初学者很容易被大量的新概念冲晕。
解决方法: 官方提供了射线捕获的接口 raycaster.intersectObjects, 但是只能识别自建的Mesh模型, 对于导入的模型则无法捕获, 主要是因为导入的模型最外层包了一层, 没有把自己内部的Mesh暴露出来 所以我们需要在模型导入后, 在onProgress回调中对其进行递归获取子Mesh, 将所有Mesh存在一个全局数组中. 在鼠标事件触发时, 将全局数组提供给raycaster.intersectObjects, 即可识别 1. 递归函数
这两天用 Three.js 画了一个 3D 的房子，放了一个床进去，可以用鼠标和键盘控制移动，有种 3D 游戏的即视感。
官方文档中的新手示例过于简单，所以本节对Three.js中的概念进行一些补充描述：
随着元宇宙概念的火爆，3D 渲染相关的技术频繁被提及，而 Three.js 是基于 WebGL 的 api 封装的用于简化 3D 场景的开发的框架， 是入门 3D 的不错的抓手，今天我们就来入门下 Three.js。
作为整天和 UI 打交道的前端工程师，是否想在他（她）生日的时候用代码送上一份惊喜呢？
很多网友反应“这也太可爱了吧”，连摩纳哥亲王也想带回去两个给自己的龙凤胎，请求工作人员再为自己制作一个冰墩墩，不然回去也就“不好交代”了。
问题在MeshLambertMaterial材质，把它改成MeshBasicMaterial即可显示图片。
在Three.js的赋能下，WEB网页效果逐渐丰富起来，今天我们就来运用之前学习的Three.js基础知识，实现一个旋转的几何体-球体。
近来风生水起的VR虚拟现实技术，抽空想起年初完成的“星球计划”项目，总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍。 QQ物联与深圳市天文台合作，在手Q“发现新设备”-“公共设备”里，连
近来风生水起的VR虚拟现实技术，抽空想起年初完成的“星球计划”项目，总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍。 QQ物联与深圳市天文台合作，在手Q“发现新设备”-“公共设备”里，连接QQ物联摄像头为用户提供2016年天体大事件的直播，大家可以通过手Q实时观看到世界各地最佳观测点的日食，流星等天体现象。承载整个“星球计划”活动的运营页面，经多方讨论，我们决定尝试3D全景漫游模式的H5运营页进行推广，今天就不详述活动的具体内容，先和大家聊一聊这H5里“3D全景漫游”的制作方法。 先贴一
一般我们拍照都是拍一个方向，而全景图是拍上下左右前后 6 个方向，360 度，这样能够立体的记录所在的场景。
Web 全景在以前带宽有限的条件下常常用来作为街景和 360° 全景图片的查看。它可以给用户一种 self-immersive 的体验，通过简单的操作，自由的查看周围的物体。随着一些运营商推出大王卡等
随着人们对用户体验越来越重视，Web开发已经不满足于2D效果的实现，而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库，它的出现让3D应用开发更简单，本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。
大家好，我是秋风，由于最近业余时间一直在维护我的独立产品 木及简历[1]，近期上线了一个开发了1个月的插件，稍微腾出一些时间，立马来更新了，之前实在是腾不出时间来更新公众号，首先说声抱歉。
通读完上一篇博文中提及的教程，觉得应该搞个大作业巩固一下所学的知识，想起刚上映的漫威宇宙第三阶段收官之作《蜘蛛侠·英雄远征》，于是决定仿一个MARVEL的片头动画作为three.js的课后练习，使用的版本是R104版本。本节先来解决视频贴图的问题。
本文 gihtub 地址: https://github.com/hua1995116/Fly-Three.js
最近听了一首很好听的歌《一路生花》，于是就想用 Three.js 做个音乐频谱的可视化，最终效果是这样的：
「元宇宙」这个概念在近来十分火热，但本质来上说，元宇宙这个词更多的是一个商业上的概念，在这个概念里面融入集成了很多现有的技术。具体可能包括：
今天郭先生说一说three.js的材质。材质描述了对象objects的外观。它们的定义方式与渲染器无关， 因此，如果您决定使用不同的渲染器，不必重写材质。
在 《Three.js 基础纹理贴图》 里介绍了如何给图形贴图，贴图前需要先把纹理加载好。我们基于这篇文章继续讲解如何监听材质加载成功或者失败。
随着前两天冬奥会序幕的正式拉开，也成功带火了本次吉祥物冰墩墩。憨厚可爱的熊猫形象，让冰墩墩的实体公仔、钥匙扣都被一抢而空，众多网友呼吁现在真的是「一墩难求」！
相信从事过数据可视化开发的你对大屏并不陌生，那么开发一个酷炫的大屏一定是很多数据可视化开发者想要做的事情。
最近在学习Three.js，无奈不知道从哪里下手，查阅大部分资料都是先介绍渲染器（Renderer）、场景（Scene）、照相机（Camera），其实这些概念确实需要了解，如果不给你立体模型，你始终是无法理解的。网上看了一个大佬（神说要有光）的教程，感觉算是一只脚已经入了门，接下来我们通过这篇文章，从造物主的视角开始创建一个房子。我们先看下最终效果。
Three.js是一个流行的JavaScript库，用于在浏览器中创建和显示3D图形。它基于WebGL，一个浏览器支持的3D图形API，使得开发者能够在网页上创建复杂的3D场景和交互体验。
three.js 贴图时一直报"DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.",
说到博客大家一定都不陌生，不管你是深耕职场多年的老鸟，还是在学校努力学习的小鸟，应该都有过一段“装扮”博客的经历，比如：放上喜欢的图片、添加炫酷的交互、换上 DIY 的博客主题等等。但不管再怎么“打扮”，也跳脱不出平面的“凡胎”。
一些有WebGL体验的页面，浏览者有种在一个带有材质的隧道中穿梭的感受。这有赖于Three.js以及由fornasetti.com带来的灵感。
在 three.js 里以向右的方向为 x 轴，向上的方向为 y 轴，向前的方向为 z 轴：
前言 设计师需求中3D视觉平移到互动H5中的项目越来越多，three.js和PBR工作流的结合却一直没有被系统化地整理。 和各位前端神仙一起做项目，也一起磕磕碰碰出了爱与痛的领悟。小小总结，希望3D去往H5的道路天堑变通途。 本手册主要分为两大部分： Part 1 理论篇：主要让设计师了解计算机到底是如何理解和实时渲染我们设计的3D项目，以及three.js材质和预期材质的对应关系。 Part 2 实践篇：基于three.js的实现性，提供场景、材质贴图的制作思路、以及gltf工作流，并动态讨论项目常
在数字化时代，Web3D技术因其独特的三维展示和交互能力，成为前端开发领域的热门话题。WebGL与Three.js作为Web3D技术的两大核心工具，为开发者提供了强大的渲染能力和丰富的API接口。本文将深入探讨WebGL与Three.js的入门知识，并结合实战案例，帮助读者系统学习Web3D技术。
首先明确最终web三维智慧城市的形态，在最近的项目中，我们接触到了一个县级城市的web三维城市可视化。
现在什么都是3D，看电影3D，打游戏3D，估计3D打车，很快就会面世。那么作为前端开发的标准语言，JS和3D能不能也搞出点大新闻呢？刚好最近在做一个活动时，就遇到了需要播放3D全景视频的需求，顺便就研
webGL是基于OpenGL的Web3D图形规范，是一套JavaScript的API。简单来说，可以把它看成是3D版的canvas。恩，你会这样引入canvas对吧：
有了上一篇基础知识的储备，本节就来制作一下简易版的MARVEL的片头动画。【点击观看动画效果】
大家好，又见面了，我是你们的朋友全栈君。 1.技术体系 1.1技术体系整理 其中绿色底色的代表Demo中表现出的能力比较成熟，可以直接应用。 脑图地址： http://naotu.bai
本文主要介绍了WebGL和Three.js的渲染流程，从加载模型到生成纹理和片元着色器，再到进行矩阵计算和坐标转换，最终完成3D渲染。
老板让做一个在线服装定制的网站，可合成服装的效果图遇到了难处，如果是单纯的图片叠加也比较简单，前端合成的话使用canvas 两张图片合成在一起就可以了
在最初的六天，我创造了天与地 webGL是基于OpenGL的Web3D图形规范，是一套JavaScript的API。简单来说，可以把它看成是3D版的canvas。恩，你会这样引入canvas对吧：
首先看一下在https://gltf-viewer.donmccurdy.com/上预览的效果，直接上图：
github地址：https://github.com/hua1995116/Fly-Three.js
在上一篇案例中实现了几何体-球体旋转效果，今天继续丰富这个案例效果，在球体的周围添加光圈及旋转模块（图片+文字组成），均匀的分布在球体周围，围绕着球体逆时针旋转，最终效果如图：
这一节我们给摩托车的场景添加天空盒，使其在蓝天白云下展示，在添加天空盒之前，我们需要先来认识下CubeTexture和CubeTextureLoader
天空的实现有多种方式，最常见的是一个包围全部的天空球，通常是UV球，也叫经纬球，其UV很方便映射到一张天空图片，比如：
在学习 Three.js 时，很多知识点其实记住几个重要的步骤就能实现相应的效果。
浮雕模型，简单地说就是在木板上刻字时所形成的效果，如果把字的部分都剔除掉，就得到一个凹浮雕模型，如果把字以外的部分都剔除掉，就得到一个凸浮雕模型。本文分别对利用Three.js在Web环境中生成凹浮雕模型时的几种策略进行讲解。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
