首页 > 代码库 > 用webgl画个太阳系（线框图）
用webgl画个太阳系（线框图）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Three框架</title> <script src="http://www.mamicode.com/three.min.js"></script> <style type="text/css"> body { color: #808080; font-family:Monospace; font-size:13px; text-align:center; background-color: #000; margin: 0px; overflow: hidden; } #info { position: absolute; top: 0px; width: 100%; padding: 5px; z-index: 100; } a { color: #0080ff; } b { color: lightgreen } #stats { position: absolute; top:0; left: 0 } #stats #fps { background: transparent !important } #stats #fps #fpsText { color: #777 !important } #stats #fps #fpsGraph { display: none } </style> <script> var T = THREE; var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var container; var renderer; var scene; var camera; var light; var cube; var _earth = 1; //1300000 var sun = { r : _earth * 2 } //0.056 var shui = { r: _earth * 0.1, s: 87 } //0.86 var jin = { r: _earth * 0.2, s: 224 } var earth = { r: _earth * 1, s: 365 } //0.15 var huo = { r: _earth * 1, s: 678 } //1330 var mu = { r: _earth * 1.5, s: 365 * 11 } //745 var tu = { r: _earth * 1.1, s: 365 * 29 } //65 var tian = { r: _earth * 0.65, s: 365 * 84 } //60 var hai = { r: _earth * 0.6, s: 365 * 164 } var pArr = [sun,shui,jin,earth,huo,mu,tu,tian,hai]; function initThree() { container = document.getElementById(‘canvas-frame‘); renderer = new T.WebGLRenderer({antialias: true}); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); renderer.autoClear = false; container.appendChild(renderer.domElement); } function initCamera() { camera = new T.PerspectiveCamera(50, SCREEN_WIDTH/SCREEN_HEIGHT,1,1000000000); camera.position.z = sun.r * 30; camera.position.y = sun.r * 5; cameraRig = new THREE.Object3D(); cameraRig.add(camera) scene.add(cameraRig); } function initScene() { scene = new T.Scene(); } function initLight() { } // A begin var meshArr = []; function initObject() { var geometry = new T.Geometry(); for(var i =0;i<1000;i++){ var vertex = new T.Vector3(); vertex.x = T.Math.randFloatSpread(2000); vertex.y = T.Math.randFloatSpread(2000); vertex.z = T.Math.randFloatSpread(2000); geometry.vertices.push(vertex); } var particles = new THREE.PointCloud( geometry, new THREE.PointCloudMaterial( { color: 0x888888 } ) ); scene.add( particles ); var l=0; for(var i=0;i<pArr.length;i++){ var color ; var p; if(i == 0){ color = 0xFF0000; }else{ color = 0xFFFFFF; } p = new T.Mesh(new T.SphereGeometry(pArr[i].r,16,8), new THREE.MeshBasicMaterial( { color: color, wireframe: true } )); if(i != 0){ p.position.x = l + pArr[i].r; } pArr[i].l = l+= pArr[i].r * 2; scene.add(p); meshArr.push(p); } } // A end function threeStart() { initThree(); initScene(); initCamera(); initLight(); initObject(); renderer.clear(); renderer.render(scene, camera); animate(); } function render(){ renderer.clear(); var now = Date.now() ; for(var i =0;i<meshArr.length;i++){ if(i == 0){ meshArr[i].position.x = 0; meshArr[i].position.y = 0; meshArr[i].position.z = 0; continue; } var r = now /pArr[i].s; console.log(r); meshArr[i].position.x = Math.cos(r) * pArr[i].l; meshArr[i].position.y = Math.sin(r) * pArr[i].l; meshArr[i].position.z = Math.sin( r ) * pArr[i].l; } camera.position.x = sun.r * 2; camera.position.y = - sun.r; camera.position.z = sun.r * 20; cameraRig.lookAt(meshArr[0].position); renderer.render( scene, camera ); } function animate() { requestAnimationFrame( animate ); render(); } </script> </head> <body onl oad="threeStart();"> <div id="canvas-frame"></div> </body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。