<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript" src="three.min.js"></script> <title>WebGl</title> </head> <body> <div id="main"> <script> var camera, scene, renderer; var geometry, material, mesh; init(); animate(); function init() { //镜头属性 camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; scene = new THREE.Scene(); //var pointLight =new THREE.PointLight(0x00FFAA); // pointLight.position.x = 10; //pointLight.position.y = 50; //pointLight.position.z = 130; geometry = new THREE.CubeGeometry( 400, 400, 400 ); material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true, transparent: true, opacity: 0.8 } ); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); // scene.add(pointLight); renderer = new THREE.CanvasRenderer(); renderer.setSize( window.innerWidth-100, window.innerHeight-100 ); document.body.appendChild( renderer.domElement ); } function animate() { // note: three.js includes requestAnimationFrame shim requestAnimationFrame( animate ); mesh.rotation.x += 0.02; mesh.rotation.y += 0.02; renderer.render( scene, camera ); } </script> </div> </body> </html>
挺好玩的