three.js实现一个网格
2016-09-01 17:52
453 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title> <script src="Three.js"></script> <style type="text/css"> div#canvas-frame { border: none; cursor: pointer; width: 100%; height: 600px; background-color: #EEEEEE; } </style> <script> var renderer; function initThree() { width = document.getElementById('canvas-frame').clientWidth; height = document.getElementById('canvas-frame').clientHeight; renderer = new THREE.WebGLRenderer({ antialias : true }); renderer.setSize(width, height); document.getElementById('canvas-frame').appendChild(renderer.domElement); renderer.setClearColor(0xFFFFFF, 1.0); } var camera; function initCamera() { camera = new THREE.PerspectiveCamera(90, width / height, 1, 10000); camera.position.x = 0; camera.position.y = 500; camera.position.z = 500; camera.up.x = 0; camera.up.y = 1; camera.up.z = 0; camera.lookAt({ x : 0, y : 0, z : 0 }); } var scene; function initScene() { scene = new THREE.Scene(); } var light; function initLight() { light = new THREE.DirectionalLight(0xFF0000, 1.0, 0); light.position.set(100, 100, 200); scene.add(light); } var cube; function initObject() { var geometry = new THREE.Geometry(); geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) ); geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) ); for ( var i = 0; i <= 20; i ++ ) { var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) ); line.position.z = ( i * 50 ) - 500; scene.add( line ); var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) ); line.position.x = ( i * 50 ) - 500; line.rotation.y = 90 * Math.PI / 180; scene.add( line ); } } function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene, camera); } </script> </head> <body onload="threeStart();"> <div id="canvas-frame"></div> </body> </html>
相关文章推荐
- 每日一个js实例1---纯js与canvas实现心电图网格绘制
- 使用 this 指针和 prototype 实现 js 的 OO 时的一个区别
- 用js+jsp实现在同一个下拉列表中,动态生成多级select选项
- 一个基于WEB的js时间控件的实现
- JS实现求出一个字符串中最多出现的字符和个数
- 用JS实现的一个include函数
- 一个用jS实现的日期控件
- 一个用js实现过滤重复字符的函数
- 一个用js实现的页内搜索代码
- 一个基于WEB的js时间控件的实现
- 用js实现随机返回数组的一个元素
- js实现datagrid 模板列中有多个checkbox 时只许选中一个..........
- 对于一个“纯JS实现GB2312转码”的看法
- 有关打印、收藏等的JS代码(打印等主要使用了一个IE组件来实现)
- 一个用js实现的页内搜索代码
- 有关打印、收藏等的JS代码(打印等主要使用了一个IE组件来实现)
- 利用js实现一个按钮可选择多个事件
- 一个JS实现表格可排序
- 用JS实现的一个include函数
- 用js实现的一个根据内容自动生成表格的函数