Three.JS学习 8：纹理

本文学习内容主要来源于：
http://www.hewebgl.com/article/getarticle/68

纹理的组成

计算机的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：纹理

将canvas作为纹理

实现时钟纹理
步骤：

在canvas上画时钟
见：
http://blog.csdn.net/xundh/article/details/54425875
将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});

构造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：纹理

秒客网

Three.JS学习 8：纹理

纹理的组成

纹理坐标

实例

将canvas作为纹理

完整代码

相关文章