我的THREE.js之旅01
来源:互联网 发布:延保服务 知乎 编辑:程序博客网 时间:2024/05/22 17:02
教材: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>
0 0
- 我的THREE.js之旅01
- 我的THREE.js之旅01
- 我的THREE.js之旅02: 使用THREE.js加载OSM的地图
- 我的THREE.js之旅03: 使用THREE.js绘制地球和云层
- three.js 01-01 之基本骨架
- three.js 01-03 之添加光源
- three.js 01-04 之简单动画
- three.js 02-01 之场景基本功能
- three.js 03-01 之 AmbientLight 光源
- three.js 04-01 之 MeshBasicMaterial 材质
- three.js 05-01 之 PlaneGeometry 几何体
- Webgl之three.js
- 前端之js-three
- 我的three.js学习记录(一)
- 我的three.js学习记录(二)
- 我的three.js学习记录(三)
- Three.js的学习心得
- 33 Three.js的材质THREE.MeshBasicMaterial
- poj1623 象限四分树
- offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 等区别
- Apache配置虚拟主机
- 2015-第14周项目1-小玩文件
- 2、flume的log4j的数据导入
- 我的THREE.js之旅01
- JVM系列文章(二):垃圾回收机制
- 2015-第14周项目2-用文件保存的学生名单
- Scut初识之HelloWorld
- 笔记:tomcat启动脚本
- windos 下程序启动与运行自动化
- 从hdfs批量导出数据到hbase表中
- 使用消息队列的 10 个理由
- 叮个隆冬呛啊啊啊