ThreeJS系列教程-Lesson5

程序员文章站 2022-05-23 14:04:19

...

效果：

代码：

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

ThreeJS系列教程-Lesson5

PHP设计模式系列 - 建造者模式_PHP教程

PHP输出缓存ob系列函数详解_PHP教程

适合入门的php基础系列教程

Spring MVC温故而知新系列教程之请求映射RequestMapping注解

C#温故而知新系列教程之闭包

Spring MVC温故而知新系列教程之从零开始

Spring温故而知新系列教程之AOP代理

Microsoft .Net Remoting系列教程之三:Remoting事件处理全接触

Microsoft .Net Remoting系列教程之二:Marshal、Disconnect与生命周期以及跟踪服务

Microsoft .Net Remoting系列教程之一:.Net Remoting基础篇