91 Three.js Texture纹理属性详解

2018-04-27 23:55:54 人阅读

案例查看有问题?
全屏试试!

案例解析

构造函数

Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )

案例

// load a texture, set wrap mode to repeat
var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );

属性

名称 描述
id 此纹理实例的唯一编号。
uuid 此对象实例的UUID。这会自动分配,所以不应该编辑。
name 对象的名称,可以重复,默认值为空字符串
image 一个Image对象,通常使用 ImageUtils 或 ImageLoader 类来创建。Image对象可以包括图像 (比如 PNG, JPG, GIF, DDS), 视频 (e.g., MP4, OGG/OGV), 或者六幅图像的集合用于一个立方体贴图。 要使用视频作为一个纹理,你需要把一个HTML5视频元素作为纹理图像的源,并在视频播放时不断更新这个纹理-VideoTexture类会自动处理。
mipmap 用户指定的mipmap数组(可选)
mapping 如何将图像应用到对象。默认为 UV贴图(THREE.UVMapping)类型,这里U,V 坐标用来应用映射,要求是单个纹理。
其他类型包括:
THREE.CubeReflectionMapping:立方体反射映射
THREE.CubeRefractionMapping:立方体折射映射
THREE.EquirectangularReflectionMapping:圆柱反射映射
THREE.EquirectangularRefractionMapping:圆柱折射映射
THREE.SphericalReflectionMapping:球面反射映射
wrapS 缺省为 THREE.ClampToEdgeWrapping, 表示边缘被夹到纹理单元(texels)的外边界。THREE.ClampToEdgeWrapping:夹边。超过1.0的值被固定为1.0。超过1.0的其它地方的纹理,沿用最后像素的纹理。用于当叠加过滤时,需要从0.0到1.0精确覆盖且没有模糊边界的纹理。其他两个选项是: 
THREE.RepeatWrapping:平铺重复。超过1.0的值都被置为0.0。纹理被重复一次。在渲染具有诸如砖墙之类纹理的物体时,如果使用包含一整张砖墙的纹理贴图会占用较多的内存,通常只需载入一张具有一块或多块砖瓦的较小的纹理贴图,再把它按照重叠纹理寻址模式在物体表面映射多次,就可以达到和使用整张砖墙贴图同样的效果。
THREE.MirroredRepeatWrapping:镜像重复。每到边界处纹理翻转,意思就是每个1.0 u或者v处纹理被镜像翻转。
wrapT 缺省为 THREE.ClampToEdgeWrapping, 表示边缘被夹到纹理单元(texels)的外边界。其他两个选项是 THREE.RepeatWrapping 和 THREE.MirroredRepeatWrapping。
注意: 平铺图像纹理仅在图像尺寸是2的幂次方(2,4,8,16,32,64,128,256,512,1024,2048,…)时工作。每个维度的值不一定是相同的,但每一个维度都必须是2的幂次方。这是WebGL的限制,不是Three.js的。
magFilter 该属性定义当一个纹理单元(texel)覆盖多个像素点时纹理如何采样。缺省为 THREE.LinearFilter,表示获取4个最近的纹理单元执行双向线性插值计算(显示效果好)。另外的选项是 THREE.NearestFilter, 表示使用最近的texel(性能优)。
minFilter 该属性定义当一个纹理单元(texel)不足以覆盖单个像素点时纹理如何采样。缺省为 THREE.LinearMipMapLinearFilter, 表示使用多级纹理贴图(mipmapping)以及一个三线性滤波器。
其他选项是:
THREE.NearestFilter:最近滤镜。在纹理基层上执行最邻近过滤。
THREE.NearestMipMapNearestFilter:选择最临近的mip层,并执行最临近的过滤。
THREE.NearestMipMapLinearFilter:在mip层之间执行线性插补,并执行最临近的过滤。
THREE.LinearFilter:在纹理基层上执行线性过滤。
THREE.LinearMipMapNearestFilter:选择最临近的mip层,并执行线性过滤。
THREE.LinearMipMapLinearFilter:在mip层之间执行线性插补,并执行线性过滤。
anisotropy 表示纹理的各向异性。沿纹理单元密度最高方向的轴线所取样本数。默认情况下,这个值为1。较高的值比基础MipMap要更清晰,但需要更多的采样。 使用renderer.getMaxAnisotropy()方法来找到GPU最大有效各向异性值;这个值通常是2的幂次方。
format 缺省纹理格式为THREE.RGBAFormat。其他格式有:
THREE.AlphaFormat:对应于GL_ALPHA。Alpha 值
THREE.RGBFormat:Red, Green, Blue 三原色值
THREE.RGBAFormat:Red, Green, Blue 和 Alpha 值
THREE.LuminanceFormat:灰度值
THREE.LuminanceAlphaFormat:灰度值和 Alpha 值
THREE.RGBEFormat
type 缺省纹理格式为THREE.RGBAFormat。其他格式有:
THREE.UnsignedByteType:无符号8位整形值(1个字节)
THREE.ByteType:带符号8位整形值(1个字节)
THREE.ShortType:带符号16位整形值(2个字节)
THREE.UnsignedShortType:无符号16未整形值(2个字节)
THREE.IntType:带符号32位整形值(4个字节)
THREE.UnsignedIntType:无符号32位整形值(4个字节)
THREE.FloatType:单精度浮点型(4个字节)
THREE.HalfFloatType:半浮点型
offset 在U和V方向上,纹理在模型表面上重复绘制时的偏移。通常范围是0.0 到 1.0。注意: offset属性是一个便捷修饰符,仅影响Texture对模型上第一组UV的应用。如果纹理用作需要额外UV集的贴图(例如,大多数库存材料的aoMap或lightMap),则必须手动分配这些UV以获得所需的偏移量。
repeat 纹理在整个表面上重复多少次,在每个方向U和V上。如果在任一方向上repeat设置为大于1,则相应的Wrap参数也应设置为 THREE.RepeatWrappingTHREE.MirroredRepeatWrapping以实现所需的平铺影响。注意: repeat属性是一个便捷修饰符,仅影响Texture对模型上第一组UV的应用。如果纹理用作需要额外UV集的贴图(例如,大多数库存材料的aoMap或lightMap),则必须手动分配这些UV以实现所需的重复。
rotation 纹理围绕中心点旋转多少,以弧度表示。正值是逆时针的。缺省值是0。
center 旋转发生的点。值(0.5,0.5)对应于纹理的中心。默认值是(0,0),左下角。
matrixAutoUpdate 是否更新纹理的UV-变换.matrix从纹理特性.offset,.repeat, .rotation和.center。默认情况下为真。如果直接指定uv-transform矩阵,则将其设置为false。
matrix 纹理的uv转换矩阵。从质地特性渲染更新.offset,.repeat, .rotation和.center当纹理的.matrixAutoUpdate属性为true。当.matrixAutoUpdate属性为false时,可以手动设置此矩阵。默认值是单位矩阵。
generateMipmaps 是否为纹理生成mipmap(如果可能)。默认情况下为真。如果您手动创建mipmap,请将其设置为false。
premultiplyAlpha 在默认情况下,这是PNG图像的标准。如果RGB值已被预乘alpha,则设置为true。
flipY 默认为真。翻转图像的Y轴以匹配WebGL纹理坐标空间。
unpackAlignment 默认值为4。指定内容中每个像素行起点的对齐要求。有效值有 1 (字节对齐byte-alignment), 2 (行起点按偶数字节对齐), 4 (字对齐word-alignment), 和 8(行起点按双字对齐)。参阅:glPixelStorei 以了解更多信息。
encoding 编码方式。默认设置为 THREE.LinearEncoding,但是支持 sRGB, RGBE, RGBM, RGBD, LogLuv 和 Gamma。 重要:如果纹理中的这个值在材料已用后被改变,则需要触发一个Material.needsUpdate操作,以便该值在着色器中得到实现。
version 从0开始计算needsUpdate更新次数
onUpdate 一个回调函数,当纹理被更新时调用(例如,当needsUpdate被设置为true并且纹理被使用时)。
needsUpdate 将其设置为true以在下次使用纹理时触发更新。对于设置换行模式尤为重要。

方法

名称 描述
.updateMatrix () 更新纹理的UV-变换.matrix从纹理特性.offset,.repeat, .rotation和.center。
.clone( texture : Texture ) 制作纹理的副本。请注意,这不是“深层复制”,图像是共享的。
.toJSON( meta ) meta - 包含元数据的可选对象。
将材质转换为three.js JSON格式。
.dispose () 使用一个’dispose’事件类型来调用 EventDispatcher.dispatchEvent 方法(自定义事件类)。
.transformUv ( uv ) 根据此纹理的.offset,.repeat, .wrapS,.wrapT和.flipY属性的值转换uv 。

案例源代码


                        
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
        }

        canvas {
            display: block;
        }
    </style>
</head>

<body onload="draw();">
</body>
<script src="https://cdn.bootcss.com/three.js/91/three.min.js"></script>
<script src="/lib/js/controls/OrbitControls.js"></script>
<script src="https://cdn.bootcss.com/stats.js/r17/Stats.min.js"></script>
<script src="https://cdn.bootcss.com/dat-gui/0.7.1/dat.gui.min.js"></script>
<script src="/lib/js/Detector.js"></script>

<script>
    var renderer, camera, scene, gui, light, stats, controls, octahedron;

    function initRender() {
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0xeeeeee);
        renderer.shadowMap.enabled = true;
        //告诉渲染器需要阴影效果
        document.body.appendChild(renderer.domElement);
    }

    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
        camera.position.set(5, 10, 15 );
    }

    function initScene() {
        scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xa0a0a0 );
        scene.fog = new THREE.Fog( 0xa0a0a0, 5, 50 );
    }

    //初始化dat.GUI简化试验流程
    function initGui() {
        //声明一个保存需求修改的相关数据的对象
        gui = {};
        //var datGui = new dat.GUI();
        //将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值)
    }

    function initLight() {
        scene.add(new THREE.AmbientLight(0x444444));

        light = new THREE.DirectionalLight(0xffffff);
        light.position.set(0, 20, 10 );

        light.castShadow = true;
        light.shadow.camera.top = 10;
        light.shadow.camera.bottom = -10;
        light.shadow.camera.left = -10;
        light.shadow.camera.right = 10;

        //告诉平行光需要开启阴影投射
        light.castShadow = true;

        scene.add(light);
    }

    function initModel() {

        //辅助工具
        var helper = new THREE.AxesHelper(50);
        scene.add(helper);

        // 地板
        var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 200, 200 ), new THREE.MeshPhongMaterial( { color: 0xffffff, depthWrite: false } ) );
        mesh.rotation.x = - Math.PI / 2;
        mesh.receiveShadow = true;
        scene.add( mesh );

        //添加地板割线
        var grid = new THREE.GridHelper( 200, 50, 0x000000, 0x000000 );
        grid.material.opacity = 0.2;
        grid.material.transparent = true;
        scene.add( grid );

        //添加一个有纹理的八面体
        var texture = new THREE.TextureLoader().load( "/lib/textures/brick_diffuse.jpg" );
        var geometry = new THREE.OctahedronGeometry(3);
        var material = new THREE.MeshPhongMaterial({map:texture});
        octahedron = new THREE.Mesh(geometry, material);
        scene.add(octahedron);
    }

    //初始化性能插件
    function initStats() {
        stats = new Stats();
        document.body.appendChild(stats.dom);
    }

    function initControls() {

        controls = new THREE.OrbitControls(camera, renderer.domElement);
        //设置控制器的中心点
        //controls.target.set( 0, 100, 0 );
        // 如果使用animate方法时,将此函数删除
        //controls.addEventListener( 'change', render );
        // 使动画循环使用时阻尼或自转 意思是否有惯性
        controls.enableDamping = true;
        //动态阻尼系数 就是鼠标拖拽旋转灵敏度
        //controls.dampingFactor = 0.25;
        //是否可以缩放
        controls.enableZoom = true;
        //是否自动旋转
        controls.autoRotate = false;
        controls.autoRotateSpeed = 0.5;
        //设置相机距离原点的最远距离
        controls.minDistance = 1;
        //设置相机距离原点的最远距离
        controls.maxDistance = 2000;
        //是否开启右键拖拽
        controls.enablePan = true;
    }

    function render() {

        //自动旋转
        octahedron.rotation.x += 0.02;
        octahedron.rotation.y += 0.02;

        controls.update();
    }

    //窗口变动触发的函数
    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    function animate() {
        //更新控制器
        render();

        //更新性能插件
        stats.update();

        renderer.render(scene, camera);

        requestAnimationFrame(animate);
    }

    function draw() {
        //兼容性判断
        if (!Detector.webgl) Detector.addGetWebGLMessage();

        initGui();
        initRender();
        initScene();
        initCamera();
        initLight();
        initModel();
        initControls();
        initStats();

        animate();
        window.onresize = onWindowResize;
    }


</script>
</html>
展开内容

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多