three.js创建物体——星星站点博客

three.js创建物体

发布时间:2015-12-13 16:55:18　by:

在这篇开始之前首先我们把代码改成面向对象的格式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>webgl互交测试</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		#b{
			width: 200px;
			height: 500px;
			background: #000;
		}
	</style>
</head>
<body>
	<div id="b">
		<div id="canvas-frame"></div>
	</div>
	<script src="three-js/build/three.js" data-ke-src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
	<script src="three-js/examples/js/libs/stats.min.js"></script>
	<script>
	function mythree(id){
		this.dom=document.getElementById(id);
		this.dom.style.width=window.innerWidth+"px";
		this.dom.style.height=window.innerHeight+"px";
		this.scene = new THREE.Scene();//场景
		this.camera=new THREE.PerspectiveCamera(75, this.dom.offsetWidth / this.dom.offsetHeight, 0.1, 1000);
		this.camera.position.set(0,200,0);
		this.camera.lookAt(this.scene.position);
		this.renderer = new THREE.WebGLRenderer();//渲染器
		this.renderer.setSize(this.dom.offsetWidth,this.dom.offsetHeight);//设置渲染器大小
		this.renderer.setClearColorHex(0x000000, 1);//设置渲染器颜色
		this.dom.appendChild(this.renderer.domElement);
		//document.body.appendChild(this.renderer.domElement);
		//this.camera.position.z = 180;//设置相机位置
	}
	var mt=new mythree('b');
mt.renderer.render(mt.scene, mt.camera);//渲染
	</script>
</body>
</html>

好了，我们来加入一个长方体：

	var c=new THREE.Mesh(
		new THREE.CubeGeometry(40,40,40),
		 new THREE.MeshLambertMaterial({color: 0x0088ff})
		);//创建实物
	c.position.set(0,0,0);
	mt.scene.add(c);

可是为何还是什么都没有？因为这个“世界”还没有光啊。我们需要增加一个光源。

	var light = new THREE.DirectionalLight(0xffffff,1.0,0); //设置平行光源
	light.position.set(200,100,200);    //设置光源向量  
	mt.scene.add(light);   //追加光源到场景

嗯，似乎万事俱备了，然而一看还是什么也没有。“小编你骗人”，肯定会有人怎么说，其实并不是，只不过我们渲染得有点早，好比你试着在别人还没来的时候拍照，当然拍不到啦！

自然最简单的方法是把渲染的代码挪到后面，不过我可不喜欢这样的办法，测试还好，但我以后还想用这个类，每次还要手动渲染一下还是有点麻烦。

用定时器？这固然是一个办法，不过用requestAnimationFrame更好。这个函数接收一个回调函数，在下次显示器刷新的时候调用。这样就实现垂直同步了，还能可能可以节省一些资源呢。我们把它封装到对象里去：

		this.rander=(function (obj){
			return function(){
				obj.renderer.render(obj.scene, obj.camera);//渲染
				requestAnimationFrame(obj.rander);
			}
		})(this);
		this.rander();

好了下一课我们要让场景动起来了。

还没有评论

发表评论

正在等候用户中心返回数据

杂项

。。。