您的位置：首页 > Web前端 > JavaScript

Three.JS学习 8：纹理

2017-01-15 17:22 387 查看
本文学习内容主要来源于：

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。如下图的纹理坐标：



当使用它作纹理的时候，这幅图就隐示的被赋予了上图一样的纹理坐标，这个纹理坐标将被对应到一个形状上。

实例

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

代码

<!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>


效果



将canvas作为纹理

实现时钟纹理

步骤：

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

在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

将纹理传递给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;
}


展示效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航