效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Three.js tutorial - Lesson 05</title>
<style>body{background:#eeeeee;overflow:hidden;}</style>
<script src="js/r69/three.js"></script>
<script src="js/r69/Detector.js"></script>
<script src="js/r69/CanvasRenderer.js"></script>
<script src="js/r69/Projector.js"></script>
</head>
<body>
<script>
var scene,camera,mesh,renderer;
if(Detector.webgl){
renderer = new THREE.WebGLRenderer({antialias:true});
}else{
renderer = new THREE.CanvasRenderer();
}
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xeeeeee, 0.5);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
camera.lookAt(scene.position); //相机聚焦于场景中心
//scene.add(camera);
var boxGeometry = new THREE.BoxGeometry(2.0, 2.0, 2.0);
var rTexture = new THREE.ImageUtils.loadTexture("images/r.png"); //right
var lTexture = new THREE.ImageUtils.loadTexture("images/l.png"); //left
var tTexture = new THREE.ImageUtils.loadTexture("images/t.png"); //top
var dTexture = new THREE.ImageUtils.loadTexture("images/d.png"); //bottom
var fTexture = new THREE.ImageUtils.loadTexture("images/f.png"); //front
var bTexture = new THREE.ImageUtils.loadTexture("images/b.png"); //bottom
var boxMaterials = [
new THREE.MeshBasicMaterial({map:rTexture,transparent:true}), //因为没有设置side为THREE.DoubleSide,所以熊猫从背面是看不到的
new THREE.MeshBasicMaterial({map:lTexture, side:THREE.DoubleSide, transparent:true}),
new THREE.MeshBasicMaterial({map:tTexture, side:THREE.DoubleSide, transparent:true}),
new THREE.MeshBasicMaterial({map:dTexture, side:THREE.DoubleSide, transparent:true}),
new THREE.MeshBasicMaterial({map:fTexture, side:THREE.DoubleSide, transparent:true}),
new THREE.MeshBasicMaterial({map:bTexture, side:THREE.DoubleSide, transparent:true})
];
var boxMaterial = new THREE.MeshFaceMaterial(boxMaterials);
var mesh = new THREE.Mesh(boxGeometry, boxMaterial);
mesh.position.set(0, 0, 4);
scene.add(mesh);
var xRotation = 0;
var yRotation = 0;
var zRotation = 0;
function render(){
xRotation += 0.03;
yRotation += 0.02;
zRotation += 0.04;
mesh.rotation.set(xRotation, yRotation, zRotation);
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
</script>
</body>
</html>
附注:当前笔者使用的three.js版本是r69