ThreeJS系列教程-Lesson7

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

...

效果：

代码：

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

ThreeJS系列教程-Lesson7

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

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

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

解读ASP.NET 5 & MVC6系列教程（2）：初识项目

解读ASP.NET 5 & MVC6系列教程（4）：核心技术与环境配置

解读ASP.NET 5 & MVC6系列教程（3）：项目发布与部署

解读ASP.NET 5 & MVC6系列教程（12）：基于Lamda表达式的强类型Routing实现

解读ASP.NET 5 & MVC6系列教程（5）：Configuration配置信息管理

解读ASP.NET 5 & MVC6系列教程（1）：ASP.NET 5简介

解读ASP.NET 5 & MVC6系列教程（7）：依赖注入