什么是 three.js
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。(不过似乎IE不行)
简单的实例
<!DOCTYPE html> <html> <head> <title>three</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="js/three.js"></script> <style type="text/css"> body ,div{margin: 0px;padding: 0px;text-align: center;} #sce{ border: 2px solid black; border-radius: 4px; width: 900px; height: 720px; margin: 10px auto; box-shadow:0px 0px 10px black; -webkit-box-shadow:0px 0px 10px black; -moz-box-shadow : 0px 0px 10px black; } </style> <script type="text/javascript"> var scene,cam,render,cube,light; $(document).ready(function(){ init(); }); function init(){ initScene(); initCube(); animate(); } function initScene(){ scene = new THREE.Scene(); cam = new THREE.PerspectiveCamera(45,$("#sce").width()/$("#sce").height(),0.1,2000); cam.position.x = 0; cam.position.y = -2; cam.position.z = 10; render = new THREE.WebGLRenderer({antialias:true}); render.setSize($("#sce").width(),$("#sce").height()); $("#sce").append(render.domElement); } function initCube(){ var text = THREE.ImageUtils.loadTexture('img/monster.jpg'); //var g = new THREE.CubeGeometry(1,1,1);立方体 //var g =new THREE.CylinderGeometry( 3, 3, 30, 32);圆柱体 var g = new THREE.SphereGeometry( 2, 32, 32 );//球体 var m = new THREE.MeshBasicMaterial({map:text});//添加图片在上面 cube = new THREE.Mesh(g,m); scene.add(cube); } function animate(){ requestAnimationFrame(animate); cube.rotation.y +=Math.PI/180;//沿y轴旋转 //cube.rotation.x +=Math.PI/180;沿x轴旋转 render.render(scene,cam); } </script> </head> <body> <div id="sce"></div> </body> </html>
效果