效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Three.js tutorial - Lesson 07</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 cubetex = new THREE.ImageUtils.loadTexture("images/Crate.jpg");
var geo = new THREE.BoxGeometry(4, 4, 4);
var cube = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({map: cubetex}));
cube.material.side = THREE.BackSide; //设置该属性可以看到立方体内部
cube.position.set(0, 0, 0);
scene.add(cube);
var light = new THREE.AmbientLight(0xffffff);
light.position.set(10, 10, 10);
scene.add(light);
var x = 0;
var y = 0;
var z = 0;
function render(){
x += 0.001;
y += 0.001;
z += 0.001;
cube.rotation.set(x, y, z);
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
</script>
</body>
</html>