0
点赞
收藏
分享

微信扫一扫

Three.JS学习 8：纹理

软件共享软件 2022-06-28 阅读 62
计算机图片3dhtml数据JavaScript前端开发

​

纹理的组成

计算机的3D里，纹理是由图片组成。本质上讲， 纹理是图片，由像素点组成。无论在内存还是显存中，它都是由4个分量组成，这四个分量是R、G、B和A。唯一的不同的，在显存中，会比内存中更快的渲染到显示器。因为显存的帧缓冲是与显示器上的像素一一对应的。
只要是图像数据，准确的说是内存或者显存中的图像数据，都可以作为纹理，显示在屏幕中。

基类

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

参数说明

  • image：图片类型，使用ImageUtils来加载，如：
var iamge=THREE.ImageUtils.loadTexture(url);
  • Mapping：纹理坐标
  • wrapS：表示x轴的纹理的回环方式，就是当纹理的宽度小于需要贴图的平面的宽度的时候，平面剩下的部分应该以何种方式贴图的问题
  • wrapT：表示y轴的纹理的回环方式。magFilter和minFilter表示过滤的方式，这是OpenGL的基本概念。当不设置时，它会取默认值
  • format：加载图片的格式，取值可以为：THREE.RGBAFormat、RGBFormat等
  • type：表示存储纹理的的每一个字节的格式，是有符号、没符号、整型还是浮点型。默认是无符号型(THREE.UnsignedByteType)
  • anisotropy：各向异性过滤，让纹理的效果更好，但会消耗更多的内存、CPU、GPU

纹理坐标

在正常的情况下，纹理坐标的范围是0.0到1.0。如下图的纹理坐标：
Three.JS学习 8：纹理_数据
当使用它作纹理的时候，这幅图就隐示的被赋予了上图一样的纹理坐标，这个纹理坐标将被对应到一个形状上。

实例

在一个平面上贴上一张图片
代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Three框架</title>
        <script src="js/three.min.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }

        </style>
        <script>
            var renderer,width,height;
            function initThree() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias: true
                });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);
            }

            var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);

                camera.position.z = 600;
                camera.up.x = 0;
                camera.up.y = 1;
                camera.up.z = 0;
                camera.lookAt({
                    x: 0,
                    y: 0,
                    z: 0
                });
            }

            var scene;
            function initScene() {
                scene = new THREE.Scene();
            }


            function initObject() {
                //1.画一个平面
                var geometry = new THREE.PlaneGeometry(500, 300, 1, 1);
                //2.为平面赋予纹理坐标。纹理坐标由顶点的uv成员来表示，uv被定义为一个二维向量HTREE.Vector2()。4个顶点分别对应了纹理的4个顶点。还要注意(0,0),(1,0),(1,1),(0,1)是逆时针方向。
                geometry.vertices[0].uv = new THREE.Vector2(0, 0);
                geometry.vertices[1].uv = new THREE.Vector2(2, 0);
                geometry.vertices[2].uv = new THREE.Vector2(2, 2);
                geometry.vertices[3].uv = new THREE.Vector2(0, 2);

                //3.加载纹理
                var texture = THREE.ImageUtils.loadTexture("textures/a.jpg", null, function (t) {
                });
                //4.将纹理应用于材质
                var material = new THREE.MeshBasicMaterial({ map: texture });
                var mesh = new THREE.Mesh(geometry, material);
                mesh.position.set(0, 0, 0);
                scene.add(mesh);
                window.addEventListener('resize', onWindowResize, false);
            }

            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }
            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initObject();
                renderer.clear();
                animate();
            }
            function animate() {
                requestAnimationFrame(animate);
                renderer.render(scene, camera);
            }

        </script>
    </head>

    <body onload="threeStart();">
        <div id="canvas-frame"></div>
    </body>
</html>

效果
Three.JS学习 8：纹理_3d_02

将canvas作为纹理

实现时钟纹理
步骤：


Created with Raphaël 2.1.0 在canvas上画时钟 将canvas传递给THREE.Texture纹理 将canvas传递给THREE.Texture纹理 最后构造THREE.Mesh

  1. 在canvas上画时钟
    见：
  2. 将canvas传递给THREE.Texture纹理
THREE.Texture = function(image,mapping,wrapS,wrapT,magFilter,minFilter,format,type,anisotropy)

参数说明

  • image：接收一个image类型的图像，或者canvas
  1. 将纹理传递给THREE.MeshBasicMateria材质
var material = new THREE.MeshBasicMaterial({map:texture});
  1. 构造THREE.Mesh
    THREE.Mesh网格对象，有两个参数：
THREE.Mesh=function(geometry,material)

其中geometry是几何体，material是材质。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0px;
            background-color: #000000;
            overflow: hidden;
        }
    </style>
</head>
<body onload="start();">

    <script src="js/three.min.js"></script>

    <canvas id="myCanvas" width="400" height="400" style="display:none">Your browser does not support canvas
    </canvas>
    <script src="js/clock.js"></script>
    <script>

        var camera, scene, renderer;
        var mesh;
        var texture;

        function start() {
            clockApp();
            init();
            animate();
        }

        function init() {

            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
            //
            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
            camera.position.z = 400;
            scene = new THREE.Scene();

            var geometry = new THREE.CubeGeometry(150, 150, 150);
            texture = new THREE.Texture(canvas);
            var material = new THREE.MeshBasicMaterial({ map: texture });
            texture.needsUpdate = true;
            mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

            window.addEventListener('resize', onWindowResize, false);
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function animate() {
            texture.needsUpdate = true;
            mesh.rotation.y -= 0.01;
            mesh.rotation.x -= 0.01;
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }

    </script>

</body>
</html>

clock.js

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var clockImage = new Image();
var clockImageLoaded = false;
clockImage.onload = function () {
    clockImageLoaded = true;
}
clockImage.src = 'images/clock.jpg';

function addBackgroundImage() {
    //画图，中心点移到了canvas当中，所以画图开始位置变成了-200、-200
    context.drawImage(clockImage, canvas.width / 2 * -1, canvas.height / 2 * -1, canvas.width, canvas.height);
}

function drawHourHand(theDate) {
    var hours = theDate.getHours() + theDate.getMinutes() / 60;
    var degrees = (hours * 360 / 12) % 360;

    context.save();
    context.fillStyle = 'black';

    context.rotate(degreesToRadians(degrees));

    drawHand(110, 7);

    context.restore();
}

function drawMinuteHand(theDate) {
    var minutes = theDate.getMinutes() + theDate.getSeconds() / 60;

    context.save();
    context.fillStyle = 'black';

    context.rotate(degreesToRadians(minutes * 6));

    drawHand(130);

    context.restore();
}

function drawSecondHand(theDate) {
    context.save();

    context.fillStyle = 'red';

    var seconds = theDate.getSeconds();
    context.rotate(degreesToRadians(seconds * 6));

    drawHand(150);

    context.restore();
}
function drawHand(size, thickness) {
    thickness = thickness || 4;

    context.beginPath();
    context.moveTo(0, 0); // center
    context.lineTo(thickness * -1, -10);
    context.lineTo(0, size * -1);
    context.lineTo(thickness, -10);
    context.lineTo(0, 0);
    context.fill();
}
function writeBrandName() {

}

function createClock() {
    addBackgroundImage();

    var theDate = new Date();

    drawHourHand(theDate);
    drawMinuteHand(theDate);
    drawSecondHand(theDate);
}

function clockApp() {
    if (!clockImageLoaded) {
        setTimeout('clockApp()', 100);
        return;
    }
    //把旋转中心放到canvas的当中
    context.translate(canvas.width / 2, canvas.height / 2);
    setInterval('createClock()', 1000);
}
function degreesToRadians(degrees) {
    return (Math.PI / 180) * degrees;
}

展示效果
Three.JS学习 8：纹理_3d_03


举报

相关推荐

three.js 纹理（Texture）、深度纹理（DepthTexture）、视频纹理（VideoTexture）

前端web3

【Three.js】Three.js中的纹理—图像应用和属性调整

javascript前端three.js

Three.js学习8：基础贴图

github

Three.js基础入门介绍——Three.js学习六【模型动画】

vue.jsjavascript前端

Three.JS学习 6：光源

构造函数点光源参数说明JavaScript前端开发

【Three.js技术简介】什么是Three.js

javascript3d百度图例Linux系统/运维

《Learning Three.js》学习（1）使用Three.js创建三维场景

运维云计算面试运维面试题

three.js(一)

javascript开发语言three.js

three.js 音频

javascript音视频前端

Three.js BufferGeometry

Three.jsBufferGeometryJavaScript前端开发
0 条评论