three.js TextureLoader(纹理加载附带demo) - 04

文章目录

  • 一、什么是纹理加载
    • 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>Documenttitle>
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.代码效果

three.js TextureLoader(纹理加载附带demo) - 04_第1张图片

你可能感兴趣的:(ThreeJs,笔记,webgl,3d,html5,three.js)