效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Three.js tutorial - Lesson 06</title>
<style>body {background: #ffffff;overflow: hidden;color: #999999}</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>
<div id="overlaytext" style="position: absolute; top: 10px; left: 10px">
'F'键: 切换纹理滤镜(仅对WebGLRenderer有效)<br>
'L'键: 切换灯光(仅对WebGLRenderer有效)<br>
'Z': 绕z轴旋转<br>
'←': 左旋转<br>
'→': 右旋转<br>
'↑': 上翻转<br>
'↓': 下翻转<br>
Renderer:
</div>
<div id="WebGLCanvas"></div>
<script>
var scene = new THREE.Scene();
var renderer,WebGLAvailable;
if(Detector.webgl){
renderer = new THREE.WebGLRenderer({antialias:true});
document.getElementById("overlaytext").innerHTML += "WebGLRenderer";
WebGLAvailable = true;
}else{
renderer = new THREE.CanvasRenderer();
document.getElementById("overlaytext").innerHTML += "CanvasRenderer";
WebGLAvailable = false;
}
renderer.setSize(window.innerWidth-15, window.innerHeight-15);
// Set the background color of the renderer, with full opacity
renderer.setClearColor(0xeeeeee, 1);
document.getElementById("WebGLCanvas").appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 100);
camera.position.set(0, 0, 6);
camera.lookAt(scene.position);
scene.add(camera);
var box = new THREE.BoxGeometry(2, 2, 2);
var texture = new THREE.ImageUtils.loadTexture("images/Crate.jpg");
var material = WebGLAvailable ? new THREE.MeshLambertMaterial({map:texture, side:THREE.DoubleSide}) : new THREE.MeshBasicMaterial({map:texture, side:THREE.DoubleSide});
var mesh = new THREE.Mesh(box, material);
//mesh.position.set(camera.position.x, camera.position.y, camera.position.z);
scene.add(mesh);
var ambientLight = new THREE.AmbientLight({color: 0xaaaaaa});
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight({color: 0xffffff});
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
function render(){
//mesh.rotation.x += 0.01;
//mesh.rotation.y += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
var textureFilter = 0;
var lightIsOn = true;
document.addEventListener("keydown", function(event){
var keyCode = event.which;
console.log(keyCode);
/*切换滤镜*/
if(keyCode == 70){ //"F"
switch(textureFilter){
case 0:
texture.minFilter = THREE.NearestFilter; //在纹理基层上执行最邻近过滤,
texture.magFilter = THREE.NearestFilter;
textureFilter = 1;
break;
case 1:
texture.minFilter = THREE.LinearFilter; //在纹理基层上执行线性过滤
texture.magFilter = THREE.LinearFilter;
textureFilter = 0;
break;
}
texture.needsUpdate = true; //告诉WebGL纹理需要更新
/*切换灯光*/
}else if(keyCode == 76){ //"L"
if(lightIsOn){
mesh.material = new THREE.MeshBasicMaterial({map:texture});
lightIsOn = false;
}else{
if(WebGLAvailable){
mesh.material = new THREE.MeshLambertMaterial({map:texture});
}else{
mesh.material = new THREE.MeshBasicMaterial({map:texture});
}
lightIsOn = true;
}
mesh.material.needsUpdate = true; //告诉WebGL材质需要更新
/*左旋转*/
}else if(keyCode == 37){ //"←"
mesh.rotation.y -= 0.01;
/*上翻转*/
}else if(keyCode == 38){ //"↑"
mesh.rotation.x -= 0.01;
/*右旋转*/
}else if(keyCode == 39){ //"→
mesh.rotation.y += 0.01;
/*下翻转*/
}else if(keyCode == 40){ //"↓"
mesh.rotation.x += 0.01;
/*绕z轴旋转*/
}else if(keyCode == 90){ //"Z"
mesh.rotation.z += 0.01;
}
}, false);
</script>
</body>
</html>
附注:当前笔者使用的three.js版本是r69