我的THREE.js之旅01
2015-06-22 14:21
513 查看
教材: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>
相关文章推荐
- visual studio code 调试 sails.js
- Javascript原型与对象等知识
- JavaScript 2048小游戏
- 高性能JavaScript笔记一(加载和执行、数据访问、DOM编程)
- javascript
- javascript面向对象
- 什么时候需要使用eval转换json
- javascript学习笔记(变量篇)
- 北京络捷斯特物流系统(四)
- 【JavaScript】分秒倒计时器
- js模块化开发----sea.js
- Net中JSON序列化和反序列化处理(日期时间特殊处理)
- grails默认转换json日期格式
- JSON 树查找的一个思路(待续)
- Grails json转对象
- Jsp查看编码进行转换
- 北京络捷斯特物流系统(三)
- JS实现希尔排序
- 【JavaScript 8—基础知识点】:DOM
- 【JavaScript 8—基础知识点】:DOM