前端之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>