前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >为3D模型添加纹理贴图

为3D模型添加纹理贴图

作者头像
程序你好
发布于 2021-07-23 06:39:51
发布于 2021-07-23 06:39:51
2.2K00
代码可运行
举报
文章被收录于专栏:程序你好程序你好
运行总次数:0
代码可运行

本篇文章介绍纹理(Texture Map,也译作纹理映射)的使用,将描述如何使用Three.js给3D对象添加贴图, 贴图是通过将图像应用到对象的一个或多个面,来为3D对象添加细节的一种方法。

在上篇文章3D场景中物体模型选中和碰撞检测的实现创建的3D场景中,我们添加了几个立方体和一个球体,没有使用纹理,三维模型看起来很呆板。

下面我们不同材质的纹理进行渲染:

从网上下载了一个不锈钢材质的图片,93653412.jpg

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
        var texture = new THREE.TextureLoader().load( "textures/93653412.jpg" );
         //立方体
        cubeGeometry = new THREE.CubeGeometry(10,10,8);
        cubeMaterial = new THREE.MeshPhongMaterial({map:texture});

跟上面代码一样接下来再贴上一个木头材质:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
        var texture = new THREE.TextureLoader().load( "textures/crate.gif" );

把球体上贴上一个地球的图片,显示成一个地球。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var sphereTexture = new THREE.TextureLoader().load( "textures/land_ocean_ice_cloud_2048.jpg" );

另外,立方体的六个面可以采用不同的贴图。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
       var loader = new THREE.CubeTextureLoader();
        loader.setPath( 'textures/cube/pisa/' );

        var textureCube = loader.load( [
            'px.png', 'nx.png',
            'py.png', 'ny.png',
            'pz.png', 'nz.png'
        ] );

来看看加上不同的贴图后的效果:

是不是看起来生动了很多?

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-07-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 程序你好 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【Away3D】初步认识[通俗易懂]
我不想把这东西解释的太复杂,下面有一段摘录自百度百科的内容,相信大家一看就能明白…. (我们站在湖边的时候,低头看脚下的水,水是透明的,反射不是特别强烈;远处的湖面,你会发现水并不是透明的,并且反射非常强烈。这就是“菲涅尔效应”….摘自百度百科) 说白了就是把光线反射变得更柔和,可以使用在湖面材质上,也可以配合SSS散射方式使用在皮肤材质上
全栈程序员站长
2022/09/06
5490
Android开发笔记(一百五十六)通过渲染纹理展示地球仪
上一篇文章介绍了如何使用GL10描绘三维物体的线段框架,后面给出的立方体和球体效果图,虽然看起来具备立体的轮廓,可离真实的物体还差得远。因为现实生活中的物体不仅仅有个骨架,还有花纹有光泽(比如衣服),所以若想让三维物体更加符合实际,就得给它加一层皮,也可以说是加一件衣服,这个皮毛大衣用OpenGL的术语称呼则为“纹理”。 三维物体的骨架是通过三维坐标系表示的,每个点都有x、y、z三个方向上的数值大小。那么三维物体的纹理也需要通过纹理坐标系来表达,但纹理坐标并非三维形式而是二维形式,这是怎么回事呢?打个比方,裁缝店给顾客制作一件衣服,首先要丈量顾客的身高、肩宽,以及胸围、腰围、臀围等三围,然后才能根据这些身体数据剪裁布料,这便是所谓的量体裁衣。那做衣服的一匹一匹布料又是什么样子的?当然是摊开来一大片一大片整齐的布匹了,明显这些布匹近似于二维的平面。但是最终的成品衣服穿在顾客身上却是三维的模样,显然中间必定有个从二维布匹到三维衣服的转换过程。转换工作的一系列计算,离不开前面测量得到的身高、肩宽、三围等等,其中身高和肩宽是直线的长度,而三围是曲线的长度。如果把三围的曲线剪断并拉直,就能得到直线形式的三围;同理,把衣服这个三维的曲面剪开,然后把它摊平,得到平面形式的衣服。于是,剪开并摊平后的平面衣服,即可与原始的平面布匹对应起来了。因此,纹理坐标的目的就是标记被摊平衣服的二维坐标,从而将同属二维坐标系的布匹一块一块贴上去。 在OpenGL体系之中,纹理坐标又称UV坐标,通过两个浮点数组合来设置一个点的纹理坐标(U,V),其中U表示横轴,V表示纵轴。纹理坐标不关心物体的三维位置,好比一个人不管走到哪里,不管做什么动作,身上穿的还是那件衣服。纹理坐标所要表述的,是衣服的一小片一小片分别来自于哪块布料,也就是说,每一小片衣服各是由什么材质构成。既可以是棉布材质,也可以是丝绸材质,还可以是尼龙材质,纹理只是衣服的脉络,材质才是最终贴上去的花色。 给三维物体穿衣服的动作,通常叫做给三维图形贴图,更专业地说叫纹理渲染。渲染纹理的过程主要由三大项操作组成,分别说明如下: 一、启用纹理的一系列开关设置,该系列又包括下述步骤: 1、渲染纹理肯定要启用纹理功能了,并且为了能够正确渲染,还需同时启用深度测试。启用深度测试的目的,是只绘制物体朝向观测者的正面,而不绘制物体的背面。上一篇文章的立方体和球体因为没有开启深度测试,所以背面的线段也都画了出来。启用纹理与深度测试的代码示例如下:
aqi00
2019/01/18
1K0
Threejs进阶之四:在场景中添加天空盒---将摩托车放到大草原
这一节我们给摩托车的场景添加天空盒,使其在蓝天白云下展示,在添加天空盒之前,我们需要先来认识下CubeTexture和CubeTextureLoader
九仞山
2023/04/30
4K1
Threejs进阶之四:在场景中添加天空盒---将摩托车放到大草原
three.js 着色器材质之纹理
今天郭先生说一说如何在three.js着色器中添加纹理,先看看今天要完成的效果,在线案例请点击着色器纹理。
郭先生的博客
2020/08/31
3.6K0
用 Three.js 画一个哆啦A梦的时光机
在 three.js 里以向右的方向为 x 轴,向上的方向为 y 轴,向前的方向为 z 轴:
神说要有光zxg
2023/08/28
4710
用 Three.js 画一个哆啦A梦的时光机
你的登录界面不够花里胡哨,3D 版本的来了
今天分享一篇用three.js 做的登录网站,里面还用到了粒子特效,一个字就是酷炫😎 前言: 该篇文章用到的主要技术:vue3、three.js 我们先看看成品效果: 登录gif 图 座机小图预览: login2.gif 废话不多说,直接进入正题 Three.js的基础知识 想象一下,在一个虚拟的3D世界中都需要什么?「首先,要有一个立体的空间,其次是有光源,最重要的是要有一双眼睛」。下面我们就看看在three.js中如何创建一个3D世界吧! 创建一个场景 设置光源 创建相机,设置相机位置和相
程序员小猿
2021/11/23
9920
ThreeJS 立方体贴图
在上一篇《ThreeJS 掏洞术》中,利用ThreeBSP完成了在‘墙’上掏出‘门’或‘窗户’洞的效果。但那个所谓的‘墙’一点也不像,试想谁家的墙是绿色的呀,而且就算换成其他颜色也是不行的,因为色彩太单调了,实际上在我们现实世界中,物体表面的色彩通常都是丰富的。所以要让几何体看起来真实、精致就需要贴图。
Melody132
2020/03/12
3.1K0
我是如何用 Three.js 在三维世界建房子的(详细教程)
这两天用 Three.js 画了一个 3D 的房子,放了一个床进去,可以用鼠标和键盘控制移动,有种 3D 游戏的即视感。
神说要有光zxg
2021/12/10
5.2K0
我是如何用 Three.js 在三维世界建房子的(详细教程)
Flutter与原生H5混合开发
我们知道Flutter可以跟原生Android或iOS混合开发,那Flutter能不能与原生H5混合开发呢?
乂乂又又
2021/02/21
3.8K0
Flutter与原生H5混合开发
Three.js - 走进3D的奇妙世界
随着人们对用户体验越来越重视,Web开发已经不满足于2D效果的实现,而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库,它的出现让3D应用开发更简单,本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。
宜信技术学院
2019/11/27
10.1K0
Three.js 基础纹理贴图
尽管 Three.js 文档已经比较详细了,但对于刚接触 Three.js 的工友来说,最麻烦的还是不懂如何组合。Three.js 的功能实在太多了,初学者很容易被大量的新概念冲晕。
德育处主任
2023/02/26
5.7K0
Three.js 基础纹理贴图
用 Three.js 和 AudioContext 实现音乐频谱的 3D 可视化
最近听了一首很好听的歌《一路生花》,于是就想用 Three.js 做个音乐频谱的可视化,最终效果是这样的:
神说要有光zxg
2021/12/04
2.8K0
用 Three.js 和 AudioContext 实现音乐频谱的 3D 可视化
Three.js可视化企业实战WEBGL网-2024入门指南
Three.js 是一个功能强大的 JavaScript 库,用于在 Web 浏览器中创建和显示动画 3D 图形。它的丰富 API 和模块化设计使得开发者可以轻松构建复杂的 3D 场景和动画效果。本文将详细介绍 Three.js 中的一些重要组件和模块,包括场景、相机、几何体、材质、光源、渲染器和控制器等。
用户11130883
2024/05/31
1670
three.js 对象绕任意轴旋转--模拟门转动
今天郭先生说说对象如何绕任意轴旋转。说一说其中一种方法,也是比较容易理解的一种,它的原理就是将子对象放到一个盒子中,然后改变子对象相对于父对象的位置(因为子对象的原点默认还是在盒子的中心),最后转动盒子,这样子对象的旋转就不是绕盒子的中心了。如图所示。在线案例点击模拟门旋转。
郭先生的博客
2020/08/31
4.5K0
three.js 对象绕任意轴旋转--模拟门转动
一起来实现全景图 VR 吧!—— Three.js 系列
大家好,我是秋风,由于最近业余时间一直在维护我的独立产品 木及简历[1],近期上线了一个开发了1个月的插件,稍微腾出一些时间,立马来更新了,之前实在是腾不出时间来更新公众号,首先说声抱歉。
秋风的笔记
2022/12/05
4.2K0
一起来实现全景图 VR 吧!—— Three.js 系列
Three.js中的加载器与资源管理:构建丰富3D场景的关键
Three.js是一个强大的JavaScript库,用于在Web浏览器中创建和展示3D图形。在构建复杂的3D场景时,有效地加载和管理各种资源是至关重要的。加载器在Three.js中扮演着桥梁的角色,负责将外部的3D模型、纹理、字体和其他资源导入到场景中。本文将深入探讨Three.js中的模型加载器(如GLTFLoader、OBJLoader、FBXLoader)、纹理加载器(TextureLoader、CubeTextureLoader)以及其他资源加载器(如FontLoader)的功能、用法以及在资源管理方面的最佳实践。
Front_Yue
2025/03/17
940
Three.js中的加载器与资源管理:构建丰富3D场景的关键
Three.js贴图技巧:优化性能与效果
在当今数字化的时代,WebGL 技术为开发者们打开了一扇通往交互式 3D 图形世界的大门,而 Three.js 作为JavaScript库中的佼佼者,凭借其简单易用的 API 和丰富的功能,在创建3D场景和交互应用方面得到了广泛应用。在Three.js构建的虚拟世界中,贴图扮演着至关重要的角色。从赋予模型逼真的材质质感,到增强场景的视觉吸引力,贴图的质量直接影响着用户的体验。然而,随着场景复杂度的增加和贴图数量的增长,如何在保证贴图效果的同时优化性能,成为了开发者们必须面对的重要课题。本文将深入探讨Three.js贴图的相关知识,分享一系列优化性能与效果的实用技巧,并通过丰富的代码示例进行详细说明,帮助读者更好地理解和应用这些技巧,从而提升Three.js项目的品质。
Front_Yue
2025/03/11
1070
Three.js贴图技巧:优化性能与效果
三种前端实现VR全景看房的方案!说不定哪天就用得上!
事情是这样的,前几天我接到一个外包工头的新需求,某品牌要搭建一个在线VR展厅,用户可以在手机上通过陀螺仪或者拖动来360度全景参观展厅,这个VR展厅里会有一些信息点,点击之后可以呈现更多信息(视频,图文等)...
coder_koala
2021/07/08
2.6K0
三种前端实现VR全景看房的方案!说不定哪天就用得上!
教你如何用Three.js创造一个三维太阳系
笔者认为Three.js是一个伟大的框架,为什么这样说,因为它可以让我们轻易创造三维世界,甚至好像笔者写这遍教程,可以创造一个太阳系,在这个三维世界里你就是创世主。哈哈!好像说得有点夸!!
lizhenwen
2021/07/18
2.7K2
教你如何用Three.js创造一个三维太阳系
Threejs入门之十六:纹理贴图和纹理材质
Texture 用于创建一个纹理贴图,将其应用到一个物体的表面,纹理对象可以通过TextureLoader(纹理加载器)的load()方法来加载一个图片。要使用纹理贴图,首先要创建一个纹理加载器,纹理加载器返回一个Texture 纹理对象,通过纹理加载器加载贴图材质 然后通过设置材质的颜色贴图map属性的值为上面的Texture来调用,下面我们创建一个立方体,并给这个立方体贴上木头材质的贴图,使其变为一个木箱
九仞山
2023/04/30
2.7K0
Threejs入门之十六:纹理贴图和纹理材质
推荐阅读
相关推荐
【Away3D】初步认识[通俗易懂]
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文