教材：Three.js开发指南 <span style="font-family: Arial, Helvetica, sans-serif;">第一章</span>
</pre><pre name="code" class="html">
<!DOCTYPE html><html><head> <title>example 01.01</title> <script type="text/javascript" src="./libs/three.js"></script> <script type="text/javascript" src="./libs/jquery.js"></script> <script type="text/javascript" src="./libs/stats.min.js"></script> <script type="text/javascript" src="./libs/AsciiEffect.js"></script> <style> body{ margin: 0; overflow: hidden; } </style></head><body><div id="Stats-output"></div><div id="WebGL-output"></div><script type="text/javascript"> $(function(){ var stats1=initStats(); //THREE.Scene 一个容器，用于保存并跟踪我们想要渲染的物体 //THREE.PerspectiveCamera camera定义了我们能够在渲染好的scene里面看到什么 // THREE.WebGLRenderer renderer对象负责计算指定相机角度下浏览器中scene的样子，WebGLRenderer：使用计算机上的显卡来渲染场景 var scene=new THREE.Scene(); var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); var renderer=new THREE.WebGLRenderer(); //设置背景颜色 renderer.setClearColor(0xEEEEEE); //将scene渲染的尺寸大小 renderer.setSize(window.innerWidth,window.innerHeight); //需要生成阴影，这里设置后，还需要设置接收阴影的面，产生阴影的物体与光源 renderer.shadowMapEnabled=true; //创建坐标轴并加入到scene var axes=new THREE.AxisHelper(20); scene.add(axes); //平面大小，宽60（x），高20（z） var planeGeometry=new THREE.PlaneGeometry(60,20,1,1); //平面外观，MeshBasicMaterial：不会对照射有反应，使用MeshLambertMaterial、MeshPhongMaterial试试 var planeMaterial=new THREE.MeshPhongMaterial({color:0xcccccc}); var plane=new THREE.Mesh(planeGeometry,planeMaterial); //生成阴影 plane.receiveShadow=true; //平面位置 plane.rotation.x=-0.5*Math.PI; plane.position.x=15; plane.position.y=0; plane.position.z=0; //加入到scene scene.add(plane); //wireframe:true 网格，false 实体表面？ var cubeGeometry=new THREE.CubeGeometry(4,4,4); var cubeMaterial=new THREE.MeshLambertMaterial({color:0xff0000, wireframe:false}); var cube=new THREE.Mesh(cubeGeometry,cubeMaterial); //生成阴影 cube.castShadow=true; cube.position.x=-4; cube.position.y=3; cube.position.z=0; scene.add(cube); var sphereGeometry=new THREE.SphereGeometry(4,20,20); var sphereMaterial=new THREE.MeshLambertMaterial({color:0x7777ff, wireframe:false}); var sphere=new THREE.Mesh(sphereGeometry,sphereMaterial); //生成阴影 sphere.castShadow=true; sphere.position.x=20; sphere.position.y=4; sphere.position.z=2; scene.add(sphere); camera.position.x=-30; camera.position.y=40; camera.position.z=30; camera.lookAt(scene.position); //添加光源 var spotLight=new THREE.SpotLight(0xffffff); spotLight.position.set(-40,60,-10);//照射位置 //这个光源可以产生阴影 spotLight.castShadow=true; scene.add(spotLight); var step=0; //ascii效果 var effect=new THREE.AsciiEffect(renderer); effect.setSize(window.innerWidth,window.innerHeight); $("#WebGL-output").append(effect.domElement); // $("#WebGL-output").append(renderer.domElement); //renderer.render(scene,camera); renderScene(); //添加动画，持续渲染 function renderScene(){ stats1.update(); //绕坐标轴旋转的红色方块 cube.rotation.x+=0.02; cube.rotation.y+=0.02; cube.rotation.z+=0.02; //让蓝色球弹跳 step+=0.1; sphere.position.x=20+(10*(Math.cos(step))); sphere.position.y=2+(10*Math.abs(Math.sin(step))); requestAnimationFrame(renderScene); effect.render(scene,camera); // renderer.render(scene,camera); } //统计fps function initStats(){ var stats=new Stats(); stats.setMode(0); stats.domElement.style.position='absolute'; stats.domElement.style.left='0px'; stats.domElement.style.right='0px'; $("#Stats-output").append(stats.domElement); return stats; } });</script></body></html>
