HTML5画布阅读Three js Phong材料
2013-09-06 21:01
435 查看
创建阅读Three js发光的材料,我们可以用meshphongmaterial材料可配置的镜面,颜色,发光,和光亮。镜面反射属性定义光应用于材料的最轻的颜色,颜色的属性定义的物质基础颜色和发光性能,确定材料颜色的阴影。
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <div id="container"></div> <script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script> <script defer="defer"> // revolutions per second var angularSpeed = 0.2; var lastTime = 0; // this function is executed on each animation frame function animate(){ // update var time = (new Date()).getTime(); var timeDiff = time - lastTime; var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000; cylinder.rotation.x += angleChange; cylinder.rotation.z += angleChange; lastTime = time; // render renderer.render(scene, camera); // request new frame requestAnimationFrame(function(){ animate(); }); } // renderer var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // camera var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); camera.position.z = 700; // scene var scene = new THREE.Scene(); // cylinder // API: THREE.CylinderGeometry(bottomRadius, topRadius, height, segmentsRadius, segmentsHeight) var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 400, 50, 50, false), new THREE.MeshPhongMaterial({ // light specular: '#a9fcff', // intermediate color: '#00abb1', // dark emissive: '#006063', shininess: 100 })); cylinder.overdraw = true; scene.add(cylinder); // add subtle ambient lighting var ambientLight = new THREE.AmbientLight(0x222222); scene.add(ambientLight); // directional lighting var directionalLight = new THREE.DirectionalLight(0xffffff); directionalLight.position.set(1, 1, 1).normalize(); scene.add(directionalLight); // start animation animate(); </script> </body> </html>
相关文章推荐
- HTML5画布Three.js图像纹理
- HTML5画布WebGL,文件Three.js控制的锥
- HTML5画布阅读Three js基本材料
- HTML5画布Three.js环境照明 又一个不一样的感觉
- HTML5画布知识:在Three.js文件实现WebGL Plane
- HTML5 画布上的 Three.js 环境灯光(HTML5 Canvas Three.js Ambient Lighting)
- HTML5画布WebGL Three.js球体
- three.js 04-07 之 MeshPhongMaterial 材质
- Three.js源码阅读笔记-5
- 用js+html5画布功能做转盘
- 37 Three.js高级材质THREE.MeshPhongMaterial
- Three.js源码阅读笔记(基础的核心Core对象)
- Three.js源码阅读笔记(Object3D类)
- Three.js源码阅读笔记(光照部分)
- Three.js源码阅读笔记-4
- Three.js源码阅读笔记(物体是如何组织的)
- Three.js源码阅读笔记(物体是如何组织的)
- HTML5画布kineticjs BLOB教程
- Blender加材料和纹理后Three.js却…
- Three.js源码阅读笔记(光照部分)