Three.js纹理（二）

一、纹理原理

　　从本质上来说，纹理只是图片而已，它是由像素点组成。无论在内存还是显存中，它都是由4个分量组成，这四个分量是R、G、B和A。从上面的概念中，我们就能够引申出一些重要的理解了，就是只要是图像数据，准确的说是内存或者显存中的图像数据，都可以作为纹理，显示在屏幕中。

　　上面的例子，我们通过loadtexture函数在服务器上加载一张图片作为纹理，这一次，我们通过html中的canvas来作为纹理。它非常重要，以后的课程中我们会经常使用这个技巧。

　　它们两者之间有很多差别，这个差别就是图片和canvas的差别，图片是通过图像处理软件，如photoshop来处理的。而canvas是通过浏览器的绘图API来绘制的。显示canvas能够给程序员更多的想象空间，从而做出更有意思的效果出来。

二、代码

<!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.js"></script>
<script src="./clock.js"></script>

<script>

    var camera, scene, renderer;
    var mesh;
    var texture;
    
    function start()
    {
        clock();
        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>

Three.js纹理（二）

一、纹理原理

二、代码

猜你喜欢