---- 本文简介 尽管 Three.js 文档已经比较详细了，但对于刚接触 Three.js 的工友来说，最麻烦的还是不懂如何组合。...Three.js 的功能实在太多了，初学者很容易被大量的新概念冲晕。 本文主要讲解入门 Three.js 必须接触的基础贴图功能。...如果忘了的话可以查看 《『Three.js』起飞！》...代码仓库 ⭐ 基础纹理贴图 推荐阅读 《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; 千万不要更新图片源的方式更新贴图内容
three.js的官方文档中有一个平行光和聚光灯阴影的示例: https://threejs.org/examples/webgl_shadowmap_viewer.html 准备工作 在场景中创建一个球体...阴影优化 渲染尺寸 要知道，Three.js里阴影的本质其实是通过计算实时生成阴影贴图。...Near and far Three.js使用相机来帮助计算阴影贴图。这些相机与我们前面学到的相机具有相同的属性。比如我们必须定义相机的近视距离和远视距离。...这是由于在Three.js中点光源的阴影贴图要依赖6个方向上的相机来实现-_-!。 正因为点光源会在每个方向上发光，所以Three.js必须通过6个方向的渲染才能创建出多维数据集阴影贴图。...并且这个阴影的位置和大小还可以根据球体的位置来动态调整，比如球体离地面越高，阴影越淡；球体离地面越近，阴影越浓。
一、Three.js相关概念 1.1 Three.JS Three.JS是基于WebGL的Javascript开源框架，简言之，就是能够实现3D效果的JS库。...七、纹理 在生活中纯色的物体还是比较少的，更多的是有凹凸不平的纹路或图案的物体，要用Three.JS实现这些物体的效果，就需要使用到纹理贴图。...这个例子是通过在球形几何体的反面进行纹理贴图实现的全景视图，实现原理是这样的：创建一个球体构成一个球形的空间，把相机放在球体的中心，相机就像在一个球形的房间中，在球体的里面（也就是反面）贴上图片，通过改变相机拍摄的方向...材质默认是在几何体的正面进行贴图的，如果想要在反面贴图，需要在创建材质的时候设置side参数的值为THREE.BackSide，代码如下： /* 创建反面贴图的球形 */ // 球体 var geom ...环境贴图是将当前环境作为纹理进行贴图，能够模拟镜面的反光效果。在进行环境贴图时需要使用立方相机在当前场景中进行拍摄，从而获得当前环境的纹理。
一、Three.js相关概念 1.1 Three.JS Three.JS是基于WebGL的Javascript开源框架，简言之，就是能够实现3D效果的JS库。...七、纹理 在生活中纯色的物体还是比较少的，更多的是有凹凸不平的纹路或图案的物体，要用Three.JS实现这些物体的效果，就需要使用到纹理贴图。...这个例子是通过在球形几何体的反面进行纹理贴图实现的全景视图，实现原理是这样的：创建一个球体构成一个球形的空间，把相机放在球体的中心，相机就像在一个球形的房间中，在球体的里面（也就是反面）贴上图片，通过改变相机拍摄的方向...材质默认是在几何体的正面进行贴图的，如果想要在反面贴图，需要在创建材质的时候设置side参数的值为THREE.BackSide，代码如下： /* 创建反面贴图的球形 */ // 球体 var geom...环境贴图是将当前环境作为纹理进行贴图，能够模拟镜面的反光效果。
关注初识Threejs与小编一起学习成长 在Three.js的赋能下，WEB网页效果逐渐丰富起来，今天我们就来运用之前学习的Three.js基础知识，实现一个旋转的几何体-球体。 ?...知识点 1、透视投影照相机、基本材质； 2、球体几何模型、全景贴图； 3、渲染器； 01 创建DOM 为div容器定义样式...var h2html=$("Three.js球体旋转案例").get(0); var earthLabel...; // 视角不能低于水平面 _this.renderFun();//渲染 } 04 写在最后 以上就是此次案例的核心代码，大家可以动手尝试一下修改构造函数的参数值，如：基础材质的纹理贴图...关注公众号回复three.js，获取完整案例代码。
这也是为什么全景图浏览也叫天空盒，因为就是通过立方体贴图的方式实现的。 当然，也可以用球体来做，直接贴上一个大的全景图，相机放在中间，转动相机也可以看到不同方向的内容。...那这么说做全景图浏览需要先创建个立方体或者球体喽？...根本不用单独创建立方体或球体。 设置个纹理也就几行代码的事情，我们来写下代码。...全景图需要专门的工具来浏览，我们可以用 Three.js 来实现。原理就是通过立方体贴 6 张图（也叫天空盒），或者通过球体贴一张大图，把相机设置在中间，转动相机就可以看到不同方向的画面。...至于那六张贴图，通过 PTGui 或者类似的工具就可以裁切出来。 全景图浏览一共也没几行代码，但是这个功能还是很有用的。
概述： 现在有一个从3dmax导出的gltf模型，贴图方式是透明贴图，想要用three.js加载显示出来，但是在gltf Viewer中预览时是不支持透明贴图的，不知道是不是模型的问题，从网上查了很多文章
立方体贴图(CubeMap) 是另一种全景画面的储存格式，做法是将球体上的内容向外投影到一个立方体上，然后展开，而它对比等距柱状投影的优势是，在相同分辨率下，它的图片体积更小，约为 等距柱状投影 的 1...更好 v为基准体积 接下来就到了我们使用 Three.js 来实现以上效果的时刻了。...省略场景初始化等代码 // 创建一个球体 const geometry = new THREE.SphereGeometry(30, 64, 32); // 创建贴图, 并设置为红色 const material...幸好 Three.js 给我们提供了一个简单的方法 THREE.DoubleSide ，通过这个方法，就能让我们的物体渲染两个面。这样我们即使在物体内部也能看到贴图啦。...这里有一个注意点，就是在 Three.js 中如果有多张贴图，是支持以数组形式传入的，例如此例子中，传入的顺序为 “左右上下前后” 此时我们也得到了上方一样的效果。
本篇文章介绍纹理（Texture Map，也译作纹理映射）的使用，将描述如何使用Three.js给3D对象添加贴图， 贴图是通过将图像应用到对象的一个或多个面，来为3D对象添加细节的一种方法。...在上篇文章3D场景中物体模型选中和碰撞检测的实现创建的3D场景中，我们添加了几个立方体和一个球体，没有使用纹理，三维模型看起来很呆板。...跟上面代码一样接下来再贴上一个木头材质： var texture = new THREE.TextureLoader().load( "textures/crate.gif" ); 把球体上贴上一个地球的图片...sphereTexture = new THREE.TextureLoader().load( "textures/land_ocean_ice_cloud_2048.jpg" ); 另外，立方体的六个面可以采用不同的贴图...px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] ); 来看看加上不同的贴图后的效果
前言 笔者认为Three.js是一个伟大的框架，为什么这样说，因为它可以让我们轻易创造三维世界，甚至好像笔者写这遍教程，可以创造一个太阳系，在这个三维世界里你就是创世主。哈哈！好像说得有点夸！！...而相邻的火星自转一天是24.6小时 公转一年则有687天，其他行星也有不同的公转和自转信息，有了这些信息就可以定义一些基本规则 [image.png] 了解Three框架 Three的一些基本概念我在用最简单方式打造Three.js...+纹理贴图 首先介绍一下太阳如何创造，利用 SphereGeometry创建球体，利用MeshBasicMaterial添加纹理，太阳是质量是最大的，所以设置球体的时候数值是最大。...接着对应行星的纹理贴图也一一发给大家 火星的纹理贴图 [mars.jpg] 木星的纹理贴图 [jupiter.jpg] 土星的纹理贴图 [saturn.jpg] 天王星的纹理贴图 [uranus.jpg...] 海王星的纹理贴图 [neptune.jpg] 最后 一个三维太阳系就创造出来啦，这个例子也是很适合刚入门three.js的同学，目的也是提高对三维的兴趣，提高自身成就感。
Three.js中的基本概念 官方文档中的新手示例过于简单，所以本节对Three.js中的概念进行一些补充描述： 客观三要素：场景Scene，相机Camera，渲染器Renderer 具体用法可以看官方文档的...THREE.js中内置了包含立方体，球体，多面体数十种常见的几何体，也可以将canvas绘制的平面图形拉伸成为实体。...贴图纹理Texture 第三步是为实体选择贴图纹理texture，纹理通常是通过引入图片来生成，通过贴图可以让几何体呈现为它所代表的实体模型，比如一个球体，你贴上足球的纹理，它就是足球，贴上篮球纹理，...把周围环境作为贴图贴在它表面，它就是水晶球。...舞台背景scene.background是可以设置贴图纹理的。 调整贴图的 四.补充示例 第15节-关于物体阴影 后来发现这个问题在第27节有说明。
文章目录 前言 一、Three.js的使用 1.球体的绘制 二、球体相关js文件 三、效果图 四、总结 ---- 前言 Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景...一个典型的 Three.js 程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体。...Three.js相关文档：http://docs.thingjs.com/ 一、Three.js的使用 安装第三方包：npm i --save threejs-miniprogram 1.球体的绘制...touchmove'}) }, touchEnd(e) { this.canvas.dispatchTouchEvent({...e, type:'touchend'}) } }) 二、球体相关...pointLight.position.z = Math.cos(timer * 3) * 300; renderer.render(scene, camera); } } 三、效果图 四、总结 three.js
这里我们使用Three.js。...我们先创造一个几何球体(当然同理还有CubeGeometry等等)，三个参数，第一个是球体半径，后两个分别是球体在两个方向上的几何精度(其实就是每条线上用多少个顶点描述)，这里的横向和纵向都设置为64个顶点...接下来是定义材质，为了效果更逼真，我们使用着色器来定义材质，需要三张贴图，分别是： 漫反射贴图 ：即颜色贴图 法线贴图 ：描述材质的凹凸程度 高光贴图 ：描述材质的反光效果 这里我们拿到网上有一套非常清晰的地球的图...(从左往右依次是法线贴图、高光贴图、漫反射贴图) ?...只要有了漫反射贴图，我们就可以通过 PixPlant 软件来生成其法线贴图和高光贴图，效果嘛，还行。 我们拿两张来试试，分别是木星和金星的漫反射贴图 ?
关注初识Threejs与小编一起学习成长 在上一篇案例中实现了几何体-球体旋转效果，今天继续丰富这个案例效果，在球体的周围添加光圈及旋转模块（图片+文字组成），均匀的分布在球体周围，围绕着球体逆时针旋转...在球体周围绘制可点击模块，我们这里使用默认图片与业务名称合并生成一张新图片，然后通过矩形平面模型、基础网孔材料设置纹理贴图的方式。...var basicMaterial = new THREE.MeshBasicMaterial({ // map: textureLoader.load(modelBg),//设置纹理贴图...方可围绕球体旋转。...关注公众号回复three.js，获取完整案例代码。
tl;dr; 使用 three.js 实现全景技术 UV 映射原理简介 3D 坐标原理和移动控制 Web 陀螺仪简介 iv-panorama 简单库介绍 基于 Three.js 全景视频是基于 3D 空间...设置合适的视野效果，这里的范围还需要根据球体的直径来决定，通常为 2*radius + 100，反正只要比球体直径大就行。...几何球体的参数设置 let geometry = new THREE.SphereBufferGeometry(400, 60, 60); // 在贴图的时候，让像素点朝内（非常重要） geometry.scale...我们需要完成一个贴图，将如下的 sprite，贴到一个正方体上。 ? from iefreer ?...其主要特性为： 依赖于 Three.js，需要预先挂载到 window 对象上 灵活配置，内置支持陀螺仪和 touch 控制。
我们使用three.js，大约一周的时间开发出了一个酷炫的数据可视化大屏： ? ---- 1....使用的技术栈： vue webpack three.js antv d3.js 2....2.1 地球 地球使用THREE.ShaderMaterial实现，它由多张贴图材质构成，而非使用多面模型。 他承载了球体本身和点击交互。 地球由五张贴图组成： 贴图1 : mapIndex ?...使用时文字贴图会优先所有判断，从而显示在球体上。 需要注意的是：球体会按极坐标使用贴图，所以写在离南北极较近地方的文字要随着纬度拉的胖一些。...因为飞线要映射在球体上，而后台数据是不可能直接返回Vector3(x, y, z)的数据供你使用的。
今天郭先生说一说如何在three.js着色器中添加纹理，先看看今天要完成的效果，在线案例请点击着色器纹理。...绘制几何体，加载贴图 我们只需要在一个球体中进行操作，所以新建一个球体。然后分别加载三张纹理。...新建三维向量newPosition,这个向量代表球体上的点经过灰度贴图操作后新点的位置。
Normal Map只是一种目前很流行的凹凸贴图技术，而这里将会介绍一些目前游戏和在XBOX360和PlayStation3这种新世代主机上将会运用的凹凸贴图技术。...这种贴图是一种灰度图，用表面上灰度的变化来描述目标表面的凹凸，因此这种贴图是黑白的，如果节省空间的画，甚至可以把贴图的Alpha通道征用来用作Bump。...值得注意的是，这种贴图表面上存储的东西是高度域－－即每个点和原始表面的高度差，记住，每个点的颜色不是色彩，是高度，一个数值！因此，对这个贴图做任何的操作都会影响到这个物体3D的外观质感。...这是其他任何凹凸贴图方式所不能比拟的！...ReliefMapping 和 ParallaxOcclusionMapping 和 ConeMapping 浮雕纹理贴图和视差阻塞贴图和圆锥跟踪贴图 三种利用切空间光线追踪先进算法的技术，三种方法分别是光线跟踪
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
