首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Three.js - 走进3D的奇妙世界

    透视相机的视锥体如上图左侧所示,从近端面到远端面构成的区域的物体才能显示在图像上。...正交相机的视锥体如上图右侧所示,和透视相机一样,从近端面到远端面构成的区域的物体才能显示在图像上。...7.1 普通纹理贴图 在这个示例中使用上图左侧的地球纹理,在球形几何体上进行贴图就能制作出一个地球。...这个例子是通过在球形几何体的反面进行纹理贴图实现的全景视图,实现原理是这样的:创建一个球体构成一个球形的空间,把相机放在球体的中心,相机就像在一个球形的房间中,在球体的里面(也就是反面)贴上图片,通过改变相机拍摄的方向...材质默认是在几何体的正面进行贴图的,如果想要在反面贴图,需要在创建材质的时候设置side参数的值为THREE.BackSide,代码如下: /* 创建反面贴图球形 */ // 球体 var geom

    8.4K20

    Three.js - 走进3D的奇妙世界

    透视相机的视锥体如上图左侧所示,从近端面到远端面构成的区域的物体才能显示在图像上。...正交相机的视锥体如上图右侧所示,和透视相机一样,从近端面到远端面构成的区域的物体才能显示在图像上。...7.1 普通纹理贴图 ? 在这个示例中使用上图左侧的地球纹理,在球形几何体上进行贴图就能制作出一个地球。...这个例子是通过在球形几何体的反面进行纹理贴图实现的全景视图,实现原理是这样的:创建一个球体构成一个球形的空间,把相机放在球体的中心,相机就像在一个球形的房间中,在球体的里面(也就是反面)贴上图片,通过改变相机拍摄的方向...材质默认是在几何体的正面进行贴图的,如果想要在反面贴图,需要在创建材质的时候设置side参数的值为THREE.BackSide,代码如下: /* 创建反面贴图球形 */ // 球体 var geom

    9.9K40

    —— Three.js 系列

    更好 v为基准体积 接下来就到了我们使用 Three.js 来实现以上效果的时刻了。...在前面的介绍中我们可以得到 2:1 的等距投影全景图对应的几何体为球形,还记得我们在前《造一个海洋球》学过,如何来创建一个球体,没错就是 **SphereGeometry**。 ......幸好 Three.js 给我们提供了一个简单的方法 THREE.DoubleSide ,通过这个方法,就能让我们的物体渲染两个面。这样我们即使在物体内部也能看到贴图啦。...这里有一个注意点,就是在 Three.js 中如果有多张贴图,是支持以数组形式传入的,例如此例子中,传入的顺序为 “左右上下前后” 此时我们也得到了上方一样的效果。...这里最后补充一个小提示,球形贴图的一个好处就是天然地可以作为小行星的展示,例如这种特效。

    3.9K41

    这次来实现VR全景看房,三种前端实现方案

    image.png 我第一反应是用3D引擎,因为我不久前刚用three.js做过一个BMW的在线展厅,基本把three.js摸熟了。...03 11_01_41.gif 会另写一篇文章教大家用threejs做这个[BMW在线DIY],感兴趣的小伙伴请关注我吧~ 方案一:WebGL3D引擎 使用3D引擎先搭一个基本的3D场景,下面的演示使用three.js...THREE.BoxGeometry( 1, 1, 1 ), materials ); scene.add(box); 2021-06-14 19_51_17.gif 好,现在我们把镜头camera(也就是人的视角),放到box,...并且让所有贴图向内翻转后,VR全景就实现了。...2021-06-14 19_41_37.gif threejs官方立方体全景示例 使用球体(sphere)实现 我们将房间360度球形范围所有的光捕捉到一个图片上,再将这张图片展开为矩形,就能得到这样一张全景图片

    2.3K30

    【带着canvas去流浪(12)】用Three.js制作简易的MARVEL片头动画(上)

    本节先来解决视频贴图的问题。...视频贴图就直接失效了。...3.2 纹理贴图的基本原理-UV映射 在Three.js中,几何体是通过点和面的特征构建起来的,如果将一个几何体实例对象在控制台打印出来,就可以看到存储端点坐标信息的vertexs和存储面信息的faces...右图中白色三角形的三个顶点在归一化坐标系中的坐标值已经列出,将[0.2,0.2],[0.2,0.8],[0.7,0.2]这三个坐标点信息填充到对应的UV映射数组中后,Three.js就会用这个三角形区域来对一个三角面进行贴图...由于贴图素材是三个点,几何体某个三角面也是有三个顶点,如果不限制索引,那么就可能存在很多种贴图结果: ?

    3.1K51

    一文搞懂如何在Three.js里创建阴影效果 |《Three.js零基础直通14》

    阴影优化 渲染尺寸 要知道,Three.js里阴影的本质其实是通过计算实时生成阴影贴图。...Near and far Three.js使用相机来帮助计算阴影贴图。这些相机与我们前面学到的相机具有相同的属性。比如我们必须定义相机的近视距离和远视距离。...因为我们使用的是平行光,所以Three.js在为它渲染阴影贴图时使用的是正交相机。如果您还记得相机课程,我们可以通过顶部,右侧,底部和左侧属性控制相机在每一侧可以看到的距离。...阴影贴图算法 three.js中有几种内置的阴影贴图算法供我们选择: THREE.BasicShadowMap 性能很好,但质量很差 THREE.PCFShadowMap 性能较差,但边缘更光滑 THREE.PCFSoftShadowMap...这是由于在Three.js中点光源的阴影贴图要依赖6个方向上的相机来实现-_-!。 正因为点光源会在每个方向上发光,所以Three.js必须通过6个方向的渲染才能创建出多维数据集阴影贴图

    6.9K10

    通过漫天花雨来入门 Three.js

    随着元宇宙概念的火爆,3D 渲染相关的技术频繁被提及,而 Three.js 是基于 WebGL 的 api 封装的用于简化 3D 场景的开发的框架, 是入门 3D 的不错的抓手,今天我们就来入门下 Three.js...我们基于 Three.js 来实现一个花瓣雨的效果。...Three.js 的基础 Three.js 用于渲染一个 3D 的场景,里面会有很多物体,比如立方体、圆柱、圆环、圆锥等各种几何体(以 Geometry 为后缀),比如点(Points)线(Line)面...所以有这样的 api: const scene = new THREE.Scene(); scene.add(xxx); scene.add(yyy); 当然,物体之间可以做分组 Group,组的物体可以统一管理...设置下相机的位置和方向: camera.position.set(0, 200, 500) camera.lookAt(scene.position) 我们创建相机的时候指定了二维能显示的范围,相机在这个范围的哪个位置都行

    2.4K70

    3D to H5工作流应用手册

    Part 2 实践篇:基于three.js的实现性,提供场景、材质贴图的制作思路、以及gltf工作流,并动态讨论项目常常遇到的还原问题。...在Unity中,基于真实感渲染的贴图效果与NPR水墨风格化着色效果对比 [ F11, ©️邓佳迪] 三、Three.js 材质着色对比 说完真实感与非真实感渲染差异后,我们再来看看Three.js中的材质...考虑到H5项目的实际应用场景,下表罗列了Three.js原生材质的对比,包含了材质特性优势、贴图差异及适用场景,大家可以基于项目需求快速选择并混合使用: three.js材质对比表 四、色彩描述与管理...在three.js中色彩管理的工作流会根据导入模型Asset的差异而有所不同,如果贴图与模型是分别导入场景,则建议可尝试以下流程: 1、输入贴图数据 sRGB to Linear: 含色彩的贴图(基础材质...《Part2-实践篇》会继续完善three.js场景、材质贴图的制作思路、以及gltf工作流,并动态讨论项目常常遇到的还原问题。 2022,咱们需求再见。

    2.5K41

    硬核看房利器——Web 全景的实现

    二):VR眼镜的分类》 3dof,可以看做是定点视角模式,按体验感受来描述,就是视角主人站在一个固定的位置,对周围的景象进行探索;以计算机的角度来描述,即 camera 的位置只能在极为局限的特定轨道移动...当我们的切片足够多时,这个立方体最终会变成一个球形,这是一个理想的情况。 ? 如果只针对前后左右四面进行切片处理,直接拿掉上下方位的贴图,也可以模拟出一个半覆盖视野的全景场景。...理论上,球形形成的全景场景是最为接近人眼的真实感受的,视线抵达贴图的距离均等。而选择 ThreeJS(下文简称阿三) 也是看上了其完整的三维体系以及强大的几何体绘制能力。...虽然切片的算法全权由阿三处理,但切片的分布需要做进一步的了解,以帮助我们了解球形贴图的相关细节。 ?...图片来源:Creating a WebGL Earth with three.js 球体的切片方式与地球经纬度的划分方式一致,在南北纬90度的位置会出现若干个三角平面汇聚的情况,因此贴图在此处会出现放射状纹理

    2.1K30

    三种前端实现VR全景看房的方案!说不定哪天就用得上!

    image.png 我第一反应是用3D引擎,因为我不久前刚用three.js做过一个BMW的在线展厅,基本把three.js摸熟了。 ?...03 11_01_41.gif 会另写一篇文章教大家用threejs做这个[BMW在线DIY],感兴趣的小伙伴请关注我吧~ 方案一:WebGL3D引擎 使用3D引擎先搭一个基本的3D场景,下面的演示使用three.js...2021-06-14 19_51_17.gif 好,现在我们把镜头camera(也就是人的视角),放到box,并且让所有贴图向内翻转后,VR全景就实现了。...2021-06-14 19_41_37.gif threejs官方立方体全景示例 使用球体(sphere)实现 我们将房间360度球形范围所有的光捕捉到一个图片上,再将这张图片展开为矩形,就能得到这样一张全景图片...2021-06-14 14_54_38.gif 和之前一样,我们把镜头camera(也就是人的视角),放到球体内,并且让所有贴图向内翻转后,VR全景就实现了 现在我们进入了这个球体!!

    2.1K10

    谁还没有冰墩墩?速来领→

    思否的一位大佬 dragonir ,凭借高超的前端技术和建模技术,使用 Three.js + React 技术栈,自己创造了一个充满趣味和纪念意义的冬奥主题 3D 页面!...当然也可以直接使用 Three.js 自带平面网格加凹凸贴图也可以实现类似的效果。使用 Blender 自建模型的优点在于可以自由可视化地调整地面的起伏效果。...原模型: 冰墩墩贴图: 转换成Blender支持的模型,并在Blender中调整模型贴图法线、并添加贴图: 导出 glb 格式 在 Blender 中给模型添加贴图教程传送门:在Blender中怎么给模型贴图...Three.js 中,雨、雪、云、星辰 等生活中常见的粒子都可以使用 Points 来模拟实现。...Three.js 向量 几维向量就有几个分量,二维向量 Vector2 有 x 和 y 两个分量,三维向量 Vector3 有x、y、z 三个分量,四维向量 Vector4 有 x、y、z、w 四个分量

    4.5K10

    造个海洋球池来学习物理引擎【Three.js系列】

    Untitled 图源于网络 就想着做一个海洋球池,然后顺便带大家来学习学习 Three.js 中的物理引擎。 那么让我们开始吧,要实现一个海洋球池,那么首先肯定得有“球”吧。...因此先带大家来实现一个小球,而恰恰在 Three.js 中定义一个小球非常的简单。因为 Three.js 给我们提供非常丰富几何形状 API ,大概有十几种吧。...Untitled 提供的几何形状恰巧有我们需要的球形球形的 API 叫 SphereGeometry。...sphereGeometry = new THREE.SphereGeometry(0.5, 20, 20); 这非常的简单,虽然小球有了形状,我们还得给小球设置上材质,材质就是类似我们现实生活中的材料,不是是只要是球形的就叫一个东西...主要得步骤为 定义小球 引入物理引擎 将 Three.js 和 物理引擎结合 生成随机球 定义墙 好了,以上就是本章的全部内容了,下一个篇章再见。

    2K10
    领券