欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

ThreeJS系列教程-Lesson6

程序员文章站 2022-05-23 14:00:17
...

效果：
ThreeJS系列教程-Lesson6
 

代码：

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

相关标签： webgl three.js

上一篇： threejs学习之透视相机与正交相机

下一篇： 站正巨人的肩膀上——C++概要

推荐阅读