three.js TextureLoader（纹理加载附带demo） - 04

与诸君共勉

已于 2023-01-28 15:03:19 修改

阅读量5.6k

点赞数 1

分类专栏： ThreeJs 笔记文章标签： webgl 3d html5 three.js

于 2021-11-26 10:01:31 首次发布

本文链接：https://blog.csdn.net/qq_42936527/article/details/121541567

版权

笔记同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

ThreeJs

5 篇文章 4 订阅

订阅专栏

文章目录

一、什么是纹理加载
- 1.属性介绍
- 2.代码示例
二、纹理加载demo (`注意素材位置`)
三、demo效果
- 1.素材
- 2.代码效果

一、什么是纹理加载

纹理一般是指我们常见的在一些第三方程序中创建的图像，如Photoshop或GIMP。我们把这张图片放在立方体上。（我通常称为贴图）。我们需要做的就是创建一个TextureLoader。调用它的load方法，同时传入图像的URL，并将材质的 map 属性设置为该方法的返回值

1.属性介绍

属性	描述
map	我们需要做的就是创建一个TextureLoader。调用它的load方法，同时传入图像的URL,返回值就是map的属性
alphaMap	alpha地图是一种灰度纹理，它控制着表面的不透明度（黑色：完全透明;白:完全不透明)。默认为null
color	材料的颜色值，默认为白色
combine	将材质表面颜色与环境贴图相结合，默认为THREE.Multiply，如果选择混合模式，则反射率是用来混合两种颜色的
envMap	环境贴图，默认为null
lightMap	灯光贴图，默认为null
lightMapIntensity	灯光贴图的强度，默认为1
lights	材料是否受到光线影响，默认为false
reflectivity	反射率，表面对环境的影响程度，有效范围在0 - 1之间，默认为1
wireframe	是否以线框模式呈现，默认为false

2.代码示例

//纹理加载 (注意load方法的参数为需要加载的素材路径)
 var texture = new THREE.TextureLoader().load('textures/crate.gif')
 //创建材质
 var material = new THREE.MeshBasicMaterial({
            map:texture
        })

二、纹理加载demo (`注意素材位置`)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body{
        margin: 0;
        overflow: hidden;
    }
</style>
<script src="../../../../lib/three.js"></script>
<body>
<script>
    var camera ,scene, renderer; //声明相机、场景、渲染器
    var mesh; //声明网格对象
    init();
    animate();
    function init(){
        //生成透视投影相机并加入场景
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight,0.1,1000);
        camera.position.z = 400;
        scene = new THREE.Scene();

        //纹理加载 (注意load方法的参数为需要加载的素材路径)
        var texture = new THREE.TextureLoader().load('textures/crate.gif')
        //创建立方缓冲几何体
        var geometry = new THREE.BoxBufferGeometry(150,150,150);
        //创建材质

            /*
        alphaMap	alpha地图是一种灰度纹理，它控制着表面的不透明度（黑色：完全透明;白:完全不透明)。默认为null。
        color	材料的颜色值，默认为白色
        combine	将材质表面颜色与环境贴图相结合，默认为THREE.Multiply，如果选择混合模式，则反射率是用来混合两种颜色的
        envMap	环境贴图，默认为null
        lightMap	灯光贴图，默认为null
        lightMapIntensity	灯光贴图的强度，默认为1
        lights	材料是否受到光线影响，默认为false
        map	贴图，默认为null
        reflectivity	反射率，表面对环境的影响程度，有效范围在0 - 1之间，默认为1
        wireframe	是否以线框模式呈现，默认为false
            * */
        var material = new THREE.MeshBasicMaterial({
            map:texture
        })

        //创建立方体对象
        mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);

        renderer = new THREE.WebGLRenderer({
            alpha:true,
            antialias:true
        })
        //设置渲染器背景颜色
        renderer.setClearColor("skyblue");
        //设置渲染器像素分辨值
        renderer.setPixelRatio(window.devicePixelRatio);
        //设置渲染器区域
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);
    }
    function animate(){
        requestAnimationFrame(animate);
        //做旋转
        mesh.rotation.x += 0.005;
        mesh.rotation.y += 0.01;
        renderer.render(scene,camera)
    }
</script>
</body>
</html>

三、demo效果

1.素材

在这里插入图片描述

2.代码效果

在这里插入图片描述

与诸君共勉

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
5
评论
three.js TextureLoader（纹理加载附带demo） - 04

文章目录一、什么是纹理加载1.属性介绍一、什么是纹理加载纹理一般是指我们常见的在一些第三方程序中创建的图像，如Photoshop或GIMP。我们把这张图片放在立方体上。（我通常称为贴图）。我们需要做的就是创建一个TextureLoader。调用它的load方法，同时传入图像的URL，并将材质的 map 属性设置为该方法的返回值1.属性介绍属性描述map我们需要做的就是创建一个TextureLoader。调用它的load方法，同时传入图像的URL,返回值就是map的属性
复制链接

扫一扫