尽管 Three.js 文档已经比较详细了，但对于刚接触 Three.js 的工友来说，最麻烦的还是不懂如何组合。Three.js 的功能实在太多了，初学者很容易被大量的新概念冲晕。
通读完上一篇博文中提及的教程，觉得应该搞个大作业巩固一下所学的知识，想起刚上映的漫威宇宙第三阶段收官之作《蜘蛛侠·英雄远征》，于是决定仿一个MARVEL的片头动画作为three.js的课后练习，使用的版本是R104版本。本节先来解决视频贴图的问题。
随着人们对用户体验越来越重视，Web开发已经不满足于2D效果的实现，而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库，它的出现让3D应用开发更简单，本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。
在 《Three.js 基础纹理贴图》 里介绍了如何给图形贴图，贴图前需要先把纹理加载好。我们基于这篇文章继续讲解如何监听材质加载成功或者失败。
问题在MeshLambertMaterial材质，把它改成MeshBasicMaterial即可显示图片。
经过上一小节，我们学会了如何使用各种类型的灯光。既然有了光，那还得有阴影，这样看起来才会更加真实。
作为整天和 UI 打交道的前端工程师，是否想在他（她）生日的时候用代码送上一份惊喜呢？
在Three.js的赋能下，WEB网页效果逐渐丰富起来，今天我们就来运用之前学习的Three.js基础知识，实现一个旋转的几何体-球体。
在 three.js 里以向右的方向为 x 轴，向上的方向为 y 轴，向前的方向为 z 轴：
笔者认为Three.js是一个伟大的框架，为什么这样说，因为它可以让我们轻易创造三维世界，甚至好像笔者写这遍教程，可以创造一个太阳系，在这个三维世界里你就是创世主。哈哈！好像说得有点夸！！
随着元宇宙概念的火爆，3D 渲染相关的技术频繁被提及，而 Three.js 是基于 WebGL 的 api 封装的用于简化 3D 场景的开发的框架， 是入门 3D 的不错的抓手，今天我们就来入门下 Three.js。
这两天用 Three.js 画了一个 3D 的房子，放了一个床进去，可以用鼠标和键盘控制移动，有种 3D 游戏的即视感。
一些有WebGL体验的页面，浏览者有种在一个带有材质的隧道中穿梭的感受。这有赖于Three.js以及由fornasetti.com带来的灵感。
本文 gihtub 地址: https://github.com/hua1995116/Fly-Three.js
在前端调用图片时，可能会使用到雪碧图(Sprite)。对于雪碧图，有一个配套的纹理贴图集也是比较方便工程师进行开发工作的。
解决方法: 官方提供了射线捕获的接口 raycaster.intersectObjects, 但是只能识别自建的Mesh模型, 对于导入的模型则无法捕获, 主要是因为导入的模型最外层包了一层, 没有把自己内部的Mesh暴露出来 所以我们需要在模型导入后, 在onProgress回调中对其进行递归获取子Mesh, 将所有Mesh存在一个全局数组中. 在鼠标事件触发时, 将全局数组提供给raycaster.intersectObjects, 即可识别 1. 递归函数
很多网友反应“这也太可爱了吧”，连摩纳哥亲王也想带回去两个给自己的龙凤胎，请求工作人员再为自己制作一个冰墩墩，不然回去也就“不好交代”了。
Texture 用于创建一个纹理贴图，将其应用到一个物体的表面，纹理对象可以通过TextureLoader(纹理加载器)的load()方法来加载一个图片。要使用纹理贴图，首先要创建一个纹理加载器，纹理加载器返回一个Texture 纹理对象，通过纹理加载器加载贴图材质 然后通过设置材质的颜色贴图map属性的值为上面的Texture来调用，下面我们创建一个立方体，并给这个立方体贴上木头材质的贴图，使其变为一个木箱
效果分析： 要实现上述效果，我们需要两张图片，作为纹理贴图，使其图案产生明暗效果；然后通过定义ShaderMaterial对象通过自定义Shader实现上述效果；后面代码中会进行详细分析； 这里我们先介绍下基础知识
「元宇宙」这个概念在近来十分火热，但本质来上说，元宇宙这个词更多的是一个商业上的概念，在这个概念里面融入集成了很多现有的技术。具体可能包括：
现在什么都是3D，看电影3D，打游戏3D，估计3D打车，很快就会面世。那么作为前端开发的标准语言，JS和3D能不能也搞出点大新闻呢？刚好最近在做一个活动时，就遇到了需要播放3D全景视频的需求，顺便就研
大掌教，从事游戏开发多年，精通 Cocos/Unity 等游戏引擎，精通安卓/iOS/H5等多种平台开发，发表过多个开源项目和 100 多篇原创博文，经验丰富，技术精湛。
近日，腾讯宣布推出一项名为 Paint3D 的技术，它能够根据文本或图像输入，为无纹理的 3D 模型生成高分辨率、无光照且多样化的纹理贴图，对任何 3D 物体进行纹理绘制。
向 Unity 编辑器中导入 FBX 模型 , 在文件系统中 , 选中模型 , 直接拖动到 Project 文件窗口 中的 Assets 目录下 , 这里将 3 个模型拖动到了 " Project | Assets | Models " 目录 下 ;
在上一篇案例中实现了几何体-球体旋转效果，今天继续丰富这个案例效果，在球体的周围添加光圈及旋转模块（图片+文字组成），均匀的分布在球体周围，围绕着球体逆时针旋转，最终效果如图：
Three.js 提供了很多原始模型，但如果我们需要更复杂的模型，最好使用 3D 软件建模，然后导入到场景中。本节我们就来学学如何导入一个做好的 3D 模型。
上一篇博客 【Unity3D】材质 Material ( 材质简介 | 创建材质 | 设置材质属性 | 对 3D 物体应用材质 | 资源拖动到 Inspector 检查器中的 Material 属性中 ) 使用了材质来对物体表面进行渲染 , 只能进行纯色渲染 , 实际的物体很少有纯色的 , 大部分的 3D 物体渲染都需要使用图片进行渲染 , 这里引入 纹理 Texture ;
彩色顶点网格的顶点分辨率和色彩分辨率一样，当网格顶点比较少的时候，色彩信息会损失很多，如下图2所示。彩色贴图网格的色彩分辨率取决于纹理贴图的分辨率，与网格顶点分辨率无关，如图3所示，同样的网格，纹理贴图方式可以存储高于网格分辨率的色彩信息。
一般我们拍照都是拍一个方向，而全景图是拍上下左右前后 6 个方向，360 度，这样能够立体的记录所在的场景。
图像资源又经常被称作贴图、图片，是游戏中绝大部分图像渲染的数据源。图像资源一般由图像处理软件（比如 Photoshop、Windows 上自带的画图）制作而成并输出成 Cocos Creator 可以使用的文件格式，目前支持 JPG、PNG、BMP、TGA、HDR 格式。
官方文档中的新手示例过于简单，所以本节对Three.js中的概念进行一些补充描述：
github仓库地址：https://github.com/RainManGO/3d-earth
导语：大自然蕴含着各式各样的纹理，小到细胞菌落分布，大到宇宙星球表面。运用图形噪声，我们可以在3d场景中模拟它们，本文就带大家一起走进万能的图形噪声。
在数字化时代，Web3D技术因其独特的三维展示和交互能力，成为前端开发领域的热门话题。WebGL与Three.js作为Web3D技术的两大核心工具，为开发者提供了强大的渲染能力和丰富的API接口。本文将深入探讨WebGL与Three.js的入门知识，并结合实战案例，帮助读者系统学习Web3D技术。
这一节我们给摩托车的场景添加天空盒，使其在蓝天白云下展示，在添加天空盒之前，我们需要先来认识下CubeTexture和CubeTextureLoader
在图形学中，Texturing是一个将物体表面绘制上图像或者其他数据的过程。纹理贴图通过修改物体表面的渲染效果，达到一种更加真实渲染的目的。
将 Project 文件窗口 中的 Assets 资源进行打包 , 就会得到一个 资源包 Unity Package , 后缀为 " .unitypackage " ; 一般用于 将自己的 材质 , 纹理贴图 , 模型 , 场景 , C# 脚本 等资源进行打包 , 共享给别人 ;
前言 设计师需求中3D视觉平移到互动H5中的项目越来越多，three.js和PBR工作流的结合却一直没有被系统化地整理。 和各位前端神仙一起做项目，也一起磕磕碰碰出了爱与痛的领悟。小小总结，希望3D去往H5的道路天堑变通途。 本手册主要分为两大部分： Part 1 理论篇：主要让设计师了解计算机到底是如何理解和实时渲染我们设计的3D项目，以及three.js材质和预期材质的对应关系。 Part 2 实践篇：基于three.js的实现性，提供场景、材质贴图的制作思路、以及gltf工作流，并动态讨论项目常
本篇文章介绍纹理（Texture Map，也译作纹理映射）的使用，将描述如何使用Three.js给3D对象添加贴图， 贴图是通过将图像应用到对象的一个或多个面，来为3D对象添加细节的一种方法。
随着前两天冬奥会序幕的正式拉开，也成功带火了本次吉祥物冰墩墩。憨厚可爱的熊猫形象，让冰墩墩的实体公仔、钥匙扣都被一抢而空，众多网友呼吁现在真的是「一墩难求」！
教程 OpenGL ES入门教程1-Tutorial01-GLKit OpenGL ES入门教程2-Tutorial02-shader入门 OpenGL ES入门教程3-Tutorial03-三维
本文探讨网格体的压缩存储与背后的信息论，实现数据库与虚幻引擎（UE）解耦，目的是仅仅将UE作为一个渲染器，让数据与渲染分离，以适应千万级构件的项目需求。
Lumen in the Land of Nanite，在PlayStation 5上运行的实时演示.
一、目的 掌握OpenGL中纹理对象的创建、绑定与使用方法。 二、简单介绍 1，连接静态库 #pragma comment(lib, "glut32.lib") #pragma comment(lib, "glaux.lib") 2，载入位图图像到内存（这是固定用法） AUX_RGBImageRec *LoadBMP(CHAR *Filename) { FILE *File = NULL; // 文件句柄 if (!Filename) // 确保文件名已提供
给定一个人的图像，便能够以不同的姿势或穿着从另一个输入图像中获得的不同衣服来创建该人的合成图像。
前面写了几篇 p5.js 文章 都还没涉及到3D图形，但其实 p5.js 是提供了基础的3D图形的。
Web 全景在以前带宽有限的条件下常常用来作为街景和 360° 全景图片的查看。它可以给用户一种 self-immersive 的体验，通过简单的操作，自由的查看周围的物体。随着一些运营商推出大王卡等
玩过 P 图软件的朋友一定对这个功能有所了解，P 图我们可以简单地看做把一个区域的像素按照某一方向进行移动，产生一定形变效果，基于这个原理，我们可以手动实现瘦脸、长腿、瘦腰、大眼、丰胸等等一系列效果，从而达到美颜、美型的目的。
在 Unity 中 , FBX 模型 是一个可读文件 , 选中 FBX 模型 , 点击右侧 Inspector 检查器窗口 中的 " Materials | Element0 " 材质 , 即可在 Project 文件窗口中 , 框选出该材质的具体位置 , 材质肯定属于某个 FBX 模型的一部分 ;
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
