<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="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 >
<div id="canvas-frame"></div>
</body>
</html>
用webgl画个太阳系（线框图）,布布扣,bubuko.com
时间： 2024-12-13 02:48:54