【ThreeJS基础教程-高级几何体篇】2.1 纹理贴图入门

已于 2024-07-27 13:37:21 修改
阅读量354 收藏 1
点赞数 1
分类专栏： Threejs基础教程 文章标签： threejs webgl javascript
于 2022-10-19 13:55:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42760477/article/details/127405602
版权

纹理贴图入门

初识纹理Texture

先提前纠正一下纹理(Texture)和贴图(Map)不是一个东西

纹理一般是指贴图贴在模型表面之后，显示出来的样子，称为纹理，通常会由贴图来生成纹理

贴图的本质就是一张图片资源

如何生成一片草地

	    let geometry = new THREE.PlaneGeometry(10,10,10).rotateX(-Math.PI/2);
        let material = new THREE.MeshBasicMaterial({
            color:"#00ff00"
        });
        let mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);

在这里插入图片描述
上述方式虽然可以制作一块绿色的平面，但是这很难让人联想到这里是一块草地

这时候我们就需要借助纹理来生成草地了

    function addMesh(){

        let texture = new THREE.TextureLoader().load("./grass.jpg");

        let geometry = new THREE.PlaneGeometry(10,10,10).rotateX(-Math.PI/2);
        let material = new THREE.MeshBasicMaterial({
            map:texture
        });
        let mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);
    }

在这里插入图片描述
这样的草地是否显得更逼真一些呢？

Texture与TextureLoader

先在这里说明一下，官方的写法这里存在问题
在这里插入图片描述
上面的案例也是按照官方写法而写的，但是这种写法会存在一个问题，就是TextureLoader.load()是一个异步函数，当你的图片加载速度低于你使用纹理的速度时，就有可能会出现错误，尤其是当你要一次加载多个纹理时，或者你加载的贴图过于巨大时（极高分辨率的大型巨型图片），此时受网速影响加载纹理太慢时，就会出现这样的问题
这种错误一般是线上更容易发生，而在本地开发过程中几乎不会遇到

因此笔者建议从一开始接触纹理时，就使用下面的写法

    function addMesh(){
    	//创建纹理加载器
        let textureLoader = new THREE.TextureLoader();
        //加载器读取grass.jpg，加载完成时执行下面的函数
        textureLoader.load("./grass.jpg",(texture)=>{
            let geometry = new THREE.PlaneGeometry(10,10,10).rotateX(-Math.PI/2);
            let material = new THREE.MeshBasicMaterial({
                map:texture
            });
            let mesh = new THREE.Mesh(geometry,material);
            scene.add(mesh);
        });
        
    }

官方文档中的wrapS和warpT等暂时不在本篇讨论，后续将有一篇文章单独对纹理详细讲解

Texture官方文档
TextureLoader官方文档
关于Loader会在后续专门写一篇文章来详细讲解，本篇仅对纹理做基本介绍

函数：textureLoader.load(url : String, onLoad : Function, onProgress : Function, onError : Function );
url：图片路径
onLoad：资源全部加载完成时的回调函数
onProgress：在加载过程中调用，用于监控加载进度
onError：加载错误时回调

在前期的学习和开发中，笔者建议始终添加onError参数来监控加载情况，后续讲到模型加载时会再提这方面事宜

        let textureLoader = new THREE.TextureLoader();

        textureLoader.load("./gr2ass.jpg",(texture)=>{
            let geometry = new THREE.PlaneGeometry(10,10,10).rotateX(-Math.PI/2);
            let material = new THREE.MeshBasicMaterial({
                map:texture
            });
            let mesh = new THREE.Mesh(geometry,material);
            scene.add(mesh);
        },null,(error)=>{
            console.log(error);
        });

如果仅对一个文件做加载时，onProgress函数可以先写为null

在onLoad函数中，我们可以获取到加载完成的资源，textureLoader中，已经将生成好的纹理，以对象的方式返回给我们了，所以这里我们直接访问它即可

官方写法中，并没有使用()=>{}这样的箭头函数，这种写法容易造成this指向错误，所以这里笔者建议，从这里开始，每一个Load函数，都使用箭头函数，以免出现一些奇奇怪怪的问题

箭头函数为ES6的语法，不熟悉ES6的同学这时还可以去了解一下

当我们拿到了加载完成后的纹理后，将它作为值，传给Material的map属性

 let material = new THREE.MeshBasicMaterial({
                map:texture
            });

如果这里再添加Color属性的话，Color会覆盖当前加载出来的纹理颜色

这样我们的草地就被创建出来了

案例完整源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            display: block;
        }
        body {
            margin: 0;
            overscroll-behavior: none;
        }
        #btns{
            position: absolute;
            top:10%;
            width: 500px;
            height: 100px;
            left: 50%;
            transform:translateX(-50%);
        }
    </style>
</head>
<body>
<div id="btns"></div>

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

<script type="importmap">
			{
				"imports": {
					"three": "../../three.js-master/build/three.module.js"
				}
			}
		</script>
<script type="module">
    import * as THREE from '../../three.js-master/build/three.module.js';
    import {OrbitControls} from "../../three.js-master/examples/jsm/controls/OrbitControls.js";

    let scene,renderer,camera,orbitControls;

    function init(){
        scene = new THREE.Scene();
        renderer = new THREE.WebGLRenderer({
            alpha:true,
            antialias:true
        });
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);
        camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
        camera.position.set(10,10,10);
        orbitControls = new OrbitControls(camera,renderer.domElement);
        scene.add(new THREE.AmbientLight(0xffffff,1));
        let helper = new THREE.AxesHelper(5);
        scene.add(helper);
    }
    function addMesh(){


        let textureLoader = new THREE.TextureLoader();

        textureLoader.load("./grass.jpg",(texture)=>{
            let geometry = new THREE.PlaneGeometry(10,10,10).rotateX(-Math.PI/2);
            let material = new THREE.MeshBasicMaterial({
                map:texture
            });
            let mesh = new THREE.Mesh(geometry,material);
            scene.add(mesh);
        },null,(error)=>{
            console.log(error);
        });

    }
    function render(){
        renderer.render(scene,camera);
        requestAnimationFrame(render);
    }
    init();
    addMesh();
    render();
</script>
</body>
</html>

案例使用的图片文件，图片来源：three.js-master\examples\textures\terrain下的草地贴图
在这里插入图片描述

做一个简单的地球出来

上面我们学会了怎么使用纹理，那么，这次我们不再将纹理贴到plane上，贴到我们的球体Sphere上

地球的贴图素材three.js-master\examples\textures\planets，这里我们选用的素材是earth_atmos_2048.jpg

在这里插入图片描述
完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            display: block;
        }
        body {
            margin: 0;
            overscroll-behavior: none;
        }
        #btns{
            position: absolute;
            top:10%;
            width: 500px;
            height: 100px;
            left: 50%;
            transform:translateX(-50%);
        }
    </style>
</head>
<body>
<div id="btns"></div>

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

<script type="importmap">
			{
				"imports": {
					"three": "../../three.js-master/build/three.module.js"
				}
			}
		</script>
<script type="module">
    import * as THREE from '../../three.js-master/build/three.module.js';
    import {OrbitControls} from "../../three.js-master/examples/jsm/controls/OrbitControls.js";

    let scene,renderer,camera,orbitControls;

    function init(){
        scene = new THREE.Scene();
        renderer = new THREE.WebGLRenderer({
            antialias:true
        });
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);
        camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
        camera.position.set(10,10,10);
        orbitControls = new OrbitControls(camera,renderer.domElement);

        let helper = new THREE.AxesHelper(5);
        scene.add(helper);

        let light = new THREE.PointLight();
        camera.add(light);
        scene.add(camera);
    }
    function addMesh(){

        let textureLoader = new THREE.TextureLoader();

        textureLoader.load("./earth_atmos_2048.jpg",(texture)=>{
            let geometry = new THREE.SphereGeometry(5,32,32);
            let material = new THREE.MeshStandardMaterial({
                map:texture
            });
            let mesh = new THREE.Mesh(geometry,material);
            scene.add(mesh);
        },null,(error)=>{
            console.log(error);
        });
    }
    function render(){
        renderer.render(scene,camera);
        requestAnimationFrame(render);
    }
    init();
    addMesh();
    render();
</script>
</body>
</html>

完整效果：
在这里插入图片描述
大多数知识点在前面已经解析完成，笔者在这里就不多做解释了

下一篇预告：加载模型

下一篇主要讲解主流的几种模型格式与Loader，以及加载管理器LoadingManager

幻梦丶海炎
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ThreeJS 3D高级教程
06-14
该课程是在ThreeJS 3D基础版的提升，学习基础版以后，再学习该课程，目的是帮助在ThreeJS 3D应用方面做一个技术提升，该课程实现了一些比较复杂的效果，当然这些效果实现起来也不难，只要掌握了ThreeJS 3D编程的精髓，学习就容易的多了。
ThreeJS入门指南-城市地图构建案例
04-01
### ThreeJS入门指南：城市地图构建案例 #### 知识点概述 本案例旨在通过一个具体的城市地图构建项目，引导初学者逐步掌握ThreeJS的基本用法。ThreeJS是一款基于WebGL的JavaScript 3D库，它让开发者能够轻松地在...
视频教程-ThreeJS 3D高级教程-JavaScript
weixin_33249273的博客
05-28 848
ThreeJS 3D高级教程 网名：海洋，CSDN社区讲师，3D游戏引擎开发...
【Threejs进阶教程-算法篇】1.常用坐标系介绍与2d/3d随机点位算法
最新发布
qq_42760477的博客
05-12 1178
Threejs进阶教程，坐标系与随机数，本篇主要介绍了在开发中常用的几种坐标系，以及基于这些坐标系的随机算法
ThreeJs使用教程
PIOnly的博客
03-06 929
threejs使用教程
准备写一些threejs教程
10-19 1485
准备写一写 threejs 的 博客 涉及 物体切割 爆炸效果 模型导入 字体 threejs结合div 尺寸比例 等的知识点，有兴趣的小伙伴 可以 交流 以下是 一些例子的截图 简单的 室内设计雏形 ： 爆照效果图 ： 3大型模型的导入和优化
three-geojson-geometry:ThreeJS几何体可在球体上绘制GeoJSON对象
04-27
ThreeJS GeoJSON几何 ThreeJS几何类，用于在球体上抚摸GeoJSON对象。 快速开始 import { GeoJsonGeometry } from 'three-geojson-geometry'; 或者 const { GeoJsonGeometry } = require('three-geojson-geometry');...
three-conic-polygon-geometry:ThreeJS几何体，用于在球体上绘制多边形
04-27
ThreeJS圆锥多边形几何 ThreeJS几何类，用于使用圆锥体在球面上绘制多边形。 例子： （ ） （ ）快速开始import { ConicPolygonGeometry } from 'three-conic-polygon-geometry';或者const { ConicPolygonGeometry }...
threejs-sign-master_threeJs特效_
10-04
1. **Three.js基础知识**：包括如何初始化场景、相机、光源以及添加几何体、材质和纹理。 2. **3D几何体创建**：例如，如何定义和创建十二面体或其他复杂的3D形状。 3. **WebGL渲染**：Three.js如何利用WebGL进行...
Three.js学习之几何形状
10-21
本文利用实例代码详细介绍了一些Three.js中的几何形状的实现过程，包括立方体、平面与球体，有需要的朋友们可以学习下。
D3.js自学推荐的两本书（精通D3.js交互式数据可视化高级编程，d3.js数据可视化实践）
03-26
在自学D3.js过程中看过的两本书，这两本书的特点是结合案列讲的很详细，适合快速入门和提升，附件为pdf高清版资料。
threejs写的一些特效
03-31
threejs写的一些特效
three.js从入门到精通系列教程005 - three.js使用鼠标拖拽缩放浏览全景图
深南大道
01-19 549
three.js从入门到精通系列教程005 - three.js使用鼠标拖拽缩放浏览全景图
threejs渲染效果
rui913的博客
10-14 570
threejs 渲染效果
Three.js学习路线、网站、资料、案例，值得收藏（不定期更新）
2401_82881178的博客
04-06 1361
Three.js是一个基于JavaScript的开源3D图形库，用于在Web浏览器中创建和展示交互式的3D图形和动画。它提供了丰富的功能和API，使开发者能够轻松地在Web页面上创建复杂的3D场景、模型和效果。总的来说，Three.js为开发者提供了一个强大的工具，使他们能够在Web浏览器中创建出精美、交互式的3D图形和动画。通过阅读文档、查看示例代码、参与社区讨论等方式，不断拓展自己的Three.js知识和技能。这是官方Three.js文档的中文翻译版本，提供了详细的文档和教程，适合入门和深入学习。
甜甜圈掉落效果(基于Threejs+Blender实现)| 大帅老猿threejs特训
m0_57078193的博客
01-14 323
如何使用Blender进行3D建模、添加动画以及如何在Threejs中展示、控制3D模型
Three.js入门：构建纹理贴图与三维图形应用
在【标题】"材质的纹理贴图-word2000vba一册通"中，虽然主要提及的是Word VBA，但我们可以将其与Three.js的纹理贴图概念相结合来讨论。 在Three.js中，如果想要为物体应用纹理，首先你需要一个图像资源。这可以通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值