---- 本文简介 尽管 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的使用 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中的基本概念 官方文档中的新手示例过于简单,所以本节对Three.js中的概念进行一些补充描述: 客观三要素:场景Scene,相机Camera,渲染器Renderer 具体用法可以看官方文档的...THREE.js中内置了包含立方体,球体,多面体数十种常见的几何体,也可以将canvas绘制的平面图形拉伸成为实体。...贴图纹理Texture 第三步是为实体选择贴图纹理texture,纹理通常是通过引入图片来生成,通过贴图可以让几何体呈现为它所代表的实体模型,比如一个球体,你贴上足球的纹理,它就是足球,贴上篮球纹理,...把周围环境作为贴图贴在它表面,它就是水晶球。...舞台背景scene.background是可以设置贴图纹理的。 调整贴图的 四.补充示例 第15节-关于物体阴影 后来发现这个问题在第27节有说明。
这里我们使用Three.js。...我们先创造一个几何球体(当然同理还有CubeGeometry等等),三个参数,第一个是球体半径,后两个分别是球体在两个方向上的几何精度(其实就是每条线上用多少个顶点描述),这里的横向和纵向都设置为64个顶点...接下来是定义材质,为了效果更逼真,我们使用着色器来定义材质,需要三张贴图,分别是: 漫反射贴图 :即颜色贴图 法线贴图 :描述材质的凹凸程度 高光贴图 :描述材质的反光效果 这里我们拿到网上有一套非常清晰的地球的图...(从左往右依次是法线贴图、高光贴图、漫反射贴图) ?...只要有了漫反射贴图,我们就可以通过 PixPlant 软件来生成其法线贴图和高光贴图,效果嘛,还行。 我们拿两张来试试,分别是木星和金星的漫反射贴图 ?
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 控制。
关注初识Threejs与小编一起学习成长 在上一篇案例中实现了几何体-球体旋转效果,今天继续丰富这个案例效果,在球体的周围添加光圈及旋转模块(图片+文字组成),均匀的分布在球体周围,围绕着球体逆时针旋转...在球体周围绘制可点击模块,我们这里使用默认图片与业务名称合并生成一张新图片,然后通过矩形平面模型、基础网孔材料设置纹理贴图的方式。...var basicMaterial = new THREE.MeshBasicMaterial({ // map: textureLoader.load(modelBg),//设置纹理贴图...方可围绕球体旋转。...关注公众号回复three.js,获取完整案例代码。
我们使用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元无门槛券
手把手带您无忧上云