Three.js 的功能实在太多了，初学者很容易被大量的新概念冲晕。 本文主要讲解入门 Three.js 必须接触的基础贴图功能。...正反面渲染 前面的例子我们创建的立方体，如果此时我们把图贴到平面上，默认情况下它只显示正面。...本例用到下面这张图片 创建一个平面 贴图 // 省略部分代码... // Three提供的纹理加载器 const textureLoader = new THREE.TextureLoader()...代码仓库 ⭐ 基础纹理贴图 推荐阅读 《Three.js 起飞！》...《Three.js 辅助坐标轴》 《Three.js 场景 Scene》 《Three.js 几个简单的入门动画（新手篇）》 《Three.js 这样写就有阴影效果啦》 《Three.js 性能监视器
使用THREE.CanvasTexture通过echarts图表库canvas生成Texture，然后贴图，render时设置材质更新。...= new THREE.CanvasTexture( canvas ); 后期更新材质： material.map.needsUpdate = true; 千万不要更新图片源的方式更新贴图内容
概述： 现在有一个从3dmax导出的gltf模型，贴图方式是透明贴图，想要用three.js加载显示出来，但是在gltf Viewer中预览时是不支持透明贴图的，不知道是不是模型的问题，从网上查了很多文章
阴影优化 渲染尺寸 要知道，Three.js里阴影的本质其实是通过计算实时生成阴影贴图。...Near and far Three.js使用相机来帮助计算阴影贴图。这些相机与我们前面学到的相机具有相同的属性。比如我们必须定义相机的近视距离和远视距离。...阴影贴图算法 three.js中有几种内置的阴影贴图算法供我们选择： THREE.BasicShadowMap 性能很好，但质量很差 THREE.PCFShadowMap 性能较差，但边缘更光滑 THREE.PCFSoftShadowMap...这是由于在Three.js中点光源的阴影贴图要依赖6个方向上的相机来实现-_-!。 正因为点光源会在每个方向上发光，所以Three.js必须通过6个方向的渲染才能创建出多维数据集阴影贴图。...const simpleShadow = textureLoader.load('/textures/simpleShadow.jpg') 加载好贴图后，我们可以通过使用一个平面来创建阴影，平面是创建出来时默认是面向
相关库 项目里用到的相关库, 基本都在ThreeJS项目文件夹里https://github.com/mrdoob/three.js/tree/dev/examples/js three.js 核心库...: https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/OBJLoader.js MTLLoader贴图加载库: https...如何显示2D平面? 2D平面展示有两种, 一种是这个项目里的鼠标触碰直升机的提示牌, 时刻与摄像头在同一角度的2D平面; 另一种是只在一个方向上可见的2D平面 ? 多角度可见的2D平面 ?...固定角度可见的2D平面 解决方法 首先是第一种, 多角度的2D平面....原理是, 创建一个矩形Mesh, 然后创建一个canvas内容, 作为其贴图. var tipsGeo2 = new THREE.PlaneBufferGeometry(3, 1, 1, 1) var
这样一个房子，其实也是由几个几何体堆起来的： 具体有这么些几何体： 地板就是个平面，用 PlaneGeometry（平面几何体） 就可以画，贴上个纹理贴图就行。...还剩下一个草地，这个也是一个平面，用 PlaneGeometry（平面几何体）画，只不过就是长宽比较大，看不到尽头而已。 看起来还有雾？...思路理清了，接下来我们具体写下代码： 代码实现 先画草地，也就是一个大的平面，贴上草地的贴图。 三维的物体（Mesh） 是由几何体（Geometry），加上材质（Material）构成的。...然后草地的平面要旋转一下。...还要贴上墙的纹理贴图。
Three.js中的基本概念 官方文档中的新手示例过于简单，所以本节对Three.js中的概念进行一些补充描述： 客观三要素：场景Scene，相机Camera，渲染器Renderer 具体用法可以看官方文档的...THREE.js中内置了包含立方体，球体，多面体数十种常见的几何体，也可以将canvas绘制的平面图形拉伸成为实体。...贴图纹理Texture 第三步是为实体选择贴图纹理texture，纹理通常是通过引入图片来生成，通过贴图可以让几何体呈现为它所代表的实体模型，比如一个球体，你贴上足球的纹理，它就是足球，贴上篮球纹理，...把周围环境作为贴图贴在它表面，它就是水晶球。...舞台背景scene.background是可以设置贴图纹理的。 调整贴图的 四.补充示例 第15节-关于物体阴影 后来发现这个问题在第27节有说明。
两种原因： 1、物体材质不对 代码： // 纹理贴图映射到一个矩形平面上 var geometry = new THREE.PlaneGeometry(204, 102); //矩形平面 // TextureLoader...创建一个纹理加载器对象，可以加载图片作为几何体纹理 var textureLoader = new THREE.TextureLoader(); // 执行load方法，加载纹理贴图成功后，返回一个纹理对象...：Texture对象作为材质map属性的属性值 map: texture,//设置颜色贴图属性值 }); //材质对象Material var mesh = new THREE.Mesh...(geometry, material); //网格模型对象Mesh scene.add(mesh); //网格模型添加到场景中 //纹理贴图加载成功后，调用渲染函数执行渲染操作 //...floor.geometry.setAttribute( "uv2", new THREE.Float32BufferAttribute(floor.geometry.attributes.uv.array, 2) ); 原因： 在three.js
我们基于 Three.js 来实现一个花瓣雨的效果。...如图，从一个点找个角度来看三维世界，或者从一个平面来平行的看三维世界，看到的就是二维的。 这两种方式，第一种叫做透视、第二种叫做正交。...花瓣雨实现 首先我们要创建场景 Scene 中的物体，也就是各种花瓣，这个需要显示的是一个平面，可以用 Sprite。...Sprite 是精灵的意思，在 Three.js 中，它就是一个永远面向相机的二维平面。 我们给 Sprite 贴上花瓣的纹理就可以了。...这是 Three.js 的大概渲染流程。 之后我们实现了一个花瓣雨的案例。用到了 Sprite 这种物体，它是一个永远面向相机的平面，用来做这种效果很合适。
这种贴图是一种灰度图，用表面上灰度的变化来描述目标表面的凹凸，因此这种贴图是黑白的，如果节省空间的画，甚至可以把贴图的Alpha通道征用来用作Bump。...就像Windows的按钮哪个纯平面的东西我们还以为是凸出来的呢。 Normal Map看来可以增加细节，但是它的缺点也很明显。...其实不然，NormalMap因为不能实现自身内部的遮挡，因此不能表现平面上凹凸起伏比较大的场合。比如说我们一个桌面上突出一块，然后在突出的这块东西边上放一支牙签。...因此我们一直能看见障碍物背后的东西，这一点是个问题－－也就是说只有在垂直于平面的时候NormalMap才会发挥最好的作用。...ReliefMapping 和 ParallaxOcclusionMapping 和 ConeMapping 浮雕纹理贴图和视差阻塞贴图和圆锥跟踪贴图 三种利用切空间光线追踪先进算法的技术，三种方法分别是光线跟踪
不妨用 Three.js 做个 3D 的蛋糕送给 ta，既浪漫又能展现你技术的魅力。 这篇文章我们就来学习下如何用 Three.js 画一个蛋糕。...代码地址：https://github.com/QuarkGluonPlasma/threejs-exercize Three.js 相关基础 Three.js 是通过场景 Scene 来管理所有的物体的...平行光：平行的光线 环境光：均匀照射每个地方 聚光灯：舞台聚光灯的光源 三维场景中的物体有很多种，比如永远面向相机的平面是 Sprite（我们做“漫天花雨”效果用的那个），还有由三角形构成的物体叫做 Mesh...物体中常见的有 Mesh 和 Sprite 等，Sprite 是永远面向相机的一个平面，Mesh 是由三角形构成的三维物体。...Mesh 要指定几何体Geometry 和材质 Material，常用的材质可以是颜色或者纹理贴图。
思否的一位大佬 dragonir ，凭借高超的前端技术和建模技术，使用 Three.js + React 技术栈，自己创造了一个充满趣味和纪念意义的冬奥主题 3D 页面！...当然也可以直接使用 Three.js 自带平面网格加凹凸贴图也可以实现类似的效果。使用 Blender 自建模型的优点在于可以自由可视化地调整地面的起伏效果。...原模型： 冰墩墩贴图： 转换成Blender支持的模型，并在Blender中调整模型贴图法线、并添加贴图: 导出 glb 格式 在 Blender 中给模型添加贴图教程传送门：在Blender中怎么给模型贴图...深度基于相机远近平面，白色最近，黑色最远。 构造函数： parameters：（可选）用于定义材质外观的对象，具有一个或多个属性。材质的任何属性都可以从此处传入。...Three.js 中，雨、雪、云、星辰 等生活中常见的粒子都可以使用 Points 来模拟实现。
关注初识Threejs与小编一起学习成长 在Three.js的赋能下，WEB网页效果逐渐丰富起来，今天我们就来运用之前学习的Three.js基础知识，实现一个旋转的几何体-球体。 ?...知识点 1、透视投影照相机、基本材质； 2、球体几何模型、全景贴图； 3、渲染器； 01 创建DOM 为div容器定义样式...; //最大距离 controls.noPan = true; // 禁用右键拖动 controls.minPolarAngle = Math.PI / 180; // 视角不能低于水平面...controls.maxPolarAngle = Math.PI / 2; // 视角不能低于水平面 _this.renderFun();//渲染 } 04 写在最后 以上就是此次案例的核心代码...关注公众号回复three.js，获取完整案例代码。
只好自己单独写篇环境贴图的文章，来小总结一下。 环境贴图（Environment Mapping)又叫反射贴图(Reflection Mapping),在曲面上对反射效果进行很好的的近似。...环境贴图近似假设进行反射的光源与物体都位于很远的位置，同时反射体不会反射自身。如果这些假设成立，就可以将反射体周围的环境看成围绕他的一个二维投影。...目前环境贴图应用的方法有Blinn和Newell方法、立方体贴图和球面贴图。具体的方法可以参考实时计算机图形学。...使用立方体贴图实现的效果如下： 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/166900.html原文链接：https://javaforall.cn
故近年来，也是VR技术的一大热门实现手法，用前面的贴图例子来个demo。而在移动端的全景漫游，更是可以绑定陀螺仪，让你更有身临其境的感觉。...（3）Three.js源自Github的一个开源项目，https://github.com/mrdoob/three.js，官网：http://threejs.org/ 。...虽然球面全景图具有和人眼最接近的构建模式，但需要很多个立面才可以构建成一个球体，球面的经纬度坐标无法展开成一个平面贴图，相对于其他方案，性能消耗过高，拼接方法过于繁琐；而柱形全景图的垂直视野小，不好做顶部底部的俯仰视角...这里，考虑到星空背景主要为了氛围烘托，我们将6个面的贴图减少成2个，以此缩减了资源文件的大小，如下图所示。...之前我们定义宇宙六个面的时候给了每个面一个固定的section id，通过简单的js 我们可以往平面中加入星球的DOM结构。
全景图拍的是六个方向的图，放在一个平面看会很别扭，所以会有专门的浏览的工具，根据视角的改变来切换看到的内容，这样就能 360 度的还原拍照的场景。...Three.js 基础回顾 我们简单回顾下 Three.js 的基础： Three.js 是通过场景 Scene 来管理 3D 场景中的各种物体的，有一个三维坐标系，每个物体放在不同的位置，然后在某个位置放置相机...这也是为什么全景图浏览也叫天空盒，因为就是通过立方体贴图的方式实现的。 当然，也可以用球体来做，直接贴上一个大的全景图，相机放在中间，转动相机也可以看到不同方向的内容。...全景图转 6 张贴图 全景图网上能搜到很多，我们手机的相机也都能拍全景图，但是它是一张完整的大图，而立方体纹理要加载 6 张不同方向的图，如果把全景图裁切成 6 张图呢？...至于那六张贴图，通过 PTGui 或者类似的工具就可以裁切出来。 全景图浏览一共也没几行代码，但是这个功能还是很有用的。
image.png 什么是法线贴图 在游戏中经常会有这样的情况，就是一个平面——这个平面在现实中并不是一 个“平”面，例如砖墙的表面带有石质浮雕等等。...image.png 可行的方法就是将这个平面用一个贴图覆盖，用贴图的纹理实现一定的凹凸效果。但是这种方法实现的效果并不是很好，因为如果视角一变化，看起来就会像一张简单的画有图案的平面了。...后来，聪明的游戏开发者想出了一种方法，就是在贴图过程中对贴图进行一定的处理，从而保证了在视角变换以后仍然保证有较为明显的凹凸效果，也就是法线贴图。...但是，由于电脑的屏幕是一个平面，分辨3D效果就只能靠光影效果来实现了。 这就像我们画素描的时候，为了不让一个球体看起来像是一个圆圈，必须让球体的一些区域是亮的，一些区域是暗的。...image.png 表示光线射向平面的角度时通常使用光线和该点法线角度来表示。这也就意味着，如果我们将一个贴图上所有点的法线记录起来的话，就不难再利用这些信息实现后期的假的凹凸效果了。
原文地址：https://segmentfault.com/a/1190000041363089 背景 本文使用 Three.js + React 技术栈，实现冬日和奥运元素，制作了一个充满趣味和纪念意义的冬奥主题...当然也可以只使用 Three.js 自带平面网格加凹凸贴图也可以实现类似的效果。 使用 Blender 自建模型的优点在于可以自由可视化地调整地面的起伏效果。...原模型： 冰墩墩贴图: 转换成 Blender 支持的模型，并在 Blender 中调整模型贴图法线、并添加贴图: 导出 glb 格式: 仔细观察冰墩墩 可以发现，它的外面有一层透明塑料或玻璃质感外壳...深度基于相机远近平面，白色最近，黑色最远。另外，搜索公众号技术社区后台回复“壁纸”，获取一份惊喜礼包。....displacementBias[Float]：位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为 0。
水印的实现可以用透明贴图来做。透明贴图就是让两张图片合并的时候，重叠的部分中使一些颜色不显示，从而达到透明的效果。 如果用GDI来实现的话，具体方法步骤可多可少，少的可以使用一个SDK函数就解决。...//对一数据做两次异或操作，那么数据将恢复到原数据，跟没操作一样，透明贴图就是运用该原理。...其实，实现透明贴图还可以用MaskBlt和TransparentBlt。MaskBlt最后的参数比较复杂，我还没搞懂就先放过了。而TransParentBlt的话，简单来说就是最快捷方便的方式了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
