你好获取登录信息中




首页 主站 文章列表 分类列表
查看文章返回文章列表

让场景动起来

发布时间:2016-01-19 13:44:19　by:



上篇文章距现在有些时日了，不知大家还记得否？上次文章结束时代码应该是这样了：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>webgl互交测试</title>
  6. 	<style>
  7. 		*{
  8. 			padding: 0;
  9. 			margin: 0;
  10. 		}
  11. 		#b{
  12. 			width: 200px;
  13. 			height: 500px;
  14. 			background: #000;
  15. 		}
  16. 	</style>
  17. </head>
  18. <body>
  19. 	<div id="b">
  20. 		<div id="canvas-frame"></div>
  21. 	</div>
  22. 	<script src="three-js/build/three.js" data-ke-src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
  23. 	<script src="three-js/examples/js/libs/stats.min.js"></script>
  24. 	<script>
  25. 	function mythree(id){
  26. 		this.dom=document.getElementById(id);
  27. 		this.dom.style.width=window.innerWidth+"px";
  28. 		this.dom.style.height=window.innerHeight+"px";
  29. 		this.scene = new THREE.Scene();//场景
  30. 		this.camera=new THREE.PerspectiveCamera(75, this.dom.offsetWidth / this.dom.offsetHeight, 0.1, 1000);
  31. 		this.camera.position.set(0,200,0);
  32. 		this.camera.lookAt(this.scene.position);
  33. 		this.renderer = new THREE.WebGLRenderer();//渲染器
  34. 		this.renderer.setSize(this.dom.offsetWidth,this.dom.offsetHeight);//设置渲染器大小
  35. 		this.renderer.setClearColorHex(0x000000, 1);//设置渲染器颜色
  36. 		this.dom.appendChild(this.renderer.domElement);
  37. 		//document.body.appendChild(this.renderer.domElement);
  38. 		//this.camera.position.z = 180;//设置相机位置
  39. 		this.rander=(function (obj){
  40. 			return function(){
  41. 				obj.renderer.render(obj.scene, obj.camera);//渲染
  42. 				requestAnimationFrame(obj.rander);
  43. 			}
  44. 		})(this);
  45. 		this.rander();
  46. 	}
  47. 	var mt=new mythree('b');
  48. 	var c=new THREE.Mesh(
  49. 		new THREE.CubeGeometry(40,40,40),
  50. 		 new THREE.MeshLambertMaterial({color: 0x0088ff})
  51. 		);//创建实物
  52. 	c.position.set(0,0,0);
  53. 	mt.scene.add(c);
  54. 	var light = new THREE.DirectionalLight(0xffffff,1.0,0); //设置平行光源
  55. 	light.position.set(200,100,200);//设置光源向量  
  56. 	mt.scene.add(light);   //追加光源到场景
  57. 	</script>
  58. </body>
  59. </html>

这次我们应该让场景动起来了。

首先我们简单的用onkeydown来实现键盘移动摄像头camera，首先我们要监听的是传入构造函数的dom的键盘事件（虽然监听全局的也可以，但是我希望如果以后一个页面嵌入多个画布呢？

我们在mythree中增加这样几行，

  1. 	var self=this;
  2. 	this.dom.onkeydown=function(ev){
  3. 		//alert(ev.keyCode);
  4. 		switch(ev.keyCode){
  5. 			case 65:
  6. 				self.camera.position.z++;
  7. 				break;
  8. 			case 68:
  9. 				self.camera.position.z--;
  10. 				break;
  11. 			case 87:
  12. 				self.camera.position.x--;
  13. 				break;
  14. 			case 83:
  15. 				slef.camera.position.x++;
  16. 				break;
  17. 		}
  18. 	}

当然我这里是用的wasd来控制，你们可以通过alert来试一下你想要的按键的值。

好了，确实是动起来了，不过似乎有点不对——其实方向并没有错，只是我们相当于盯着地板再看而已，所以方向是对的（之前这个把我头都弄大了，你们可以自己找一下有关webgl坐标系的资料看看）。不过因为以后加入鼠标函数后，方向会旋转，所以到时最终的实现还是有一定调整啦，不过不用急，我们一步步来，海是由无数的水滴积累而成，可不要小看了这一滴水哦。

评论
    还没有评论
发表评论
正在等候用户中心返回数据
杂项
。。。