three.js-texture

最新推荐文章于 2024-09-09 18:45:00 发布

weixin_30596735

最新推荐文章于 2024-09-09 18:45:00 发布

阅读量114

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chenjy1225/p/9640534.html

本文介绍了如何在Three.js中使用各种纹理来增强材质效果，包括基本的纹理映射、凹凸贴图、法向贴图及光照贴图等，并提供代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Three.js学习笔记本篇介绍纹理的使用。

纹理

我们可以在材质中加载纹理，在Material的map属性中。

    
    // 新建 Texture 加载器
    var loader = new THREE.TextureLoader();

    var texture = loader.load("img/text.png");

    var material = new THREE.MeshBasicMaterial({
                    color: 0xff0000,
                    map: texture
                });

前面用到的THREE.ImageUtils.loadTexture 已经被摒弃。


var texture = new THREE.ImageUtils.loadTexture("img/text.png");
                
                var material = new THREE.MeshBasicMaterial({
                    color: 0x4d6dad,
                    map: texture
                });

纹理的加载时异步的，所以需要注意。支持PNG、GIF或JPEG输入格式。
最好使用正方形图片，保证长宽都是2的次方大小。

凹凸贴图

凹凸贴图是一张灰度图，上面有像素的相对高度，可以用来增加材质的高度。


    var material = new THREE.MeshBasicMaterial({
                    color: 0xff0000,
                    bumpMap: texture
                });

法向贴图

法向贴图保存了像素的法向向量，可以使材质具有更加细致的凹凸和皱纹。


    var material = new THREE.MeshBasicMaterial({
                    color: 0xff0000,
                    normalMap: texture
                });

光照贴图

光照贴图是提前渲染好的阴影图片。


    var material = new THREE.MeshBasicMaterial({
                    color: 0xff0000,
                    lightMap: texture
                });

other

罗列这些是极为麻烦的，所以
learn more from http://threejs.org/

转载于:https://www.cnblogs.com/chenjy1225/p/9640534.html