前端之Threejs学习笔记

3D图形显示例子:http://aleksandarrodic.com/p/jellyfish/

WebGL是在浏览器中实现三维效果的一种规范。

javascript的计算能力因为google的V8引 擎得到了迅猛的增强,做3D程序,做服务器都没有问题。

Three.js源码下载地址:https://github.com/mrdoob/three.js

Three.js的源目录结构:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转的方块</title>
	<style>canvas{width: 100%; height: 100%}</style>
	<script src="three.js"></script>
</head>
<body>
	<script>
		var scene = new THREE.Scene();
		var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000);
		var renderer = new THREE.WebGLRenderer();
		renderer.setSize(window.innerWidth,window.innerHeight)
		document.body.appendChild(renderer.domElement);
		var geometry = new THREE.CubeGeometry(1,1,2);
		var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
		var cube = new THREE.Mesh(geometry, material); scene.add(cube);
		camera.position.z = 3;
		function render() {
			requestAnimationFrame(render);
			cube.rotation.x += 0.1;
			cube.rotation.y += 0.1;
			renderer.render(scene, camera);
		}
		render()
	</script>		
</body>
</html>

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章