本文学习内容主要来源于：
纹理的组成
计算机的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);
纹理坐标
在正常的情况下，纹理坐标的范围是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上画时钟
见：
将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>
相关文章
精彩导读
热门资讯
关注我们
