一.构建星星的背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Solar System</title>
<style>
body{
margin:0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="main"></canvas>
<script src="js/three.js"></script>
<script src="js/stats.min.js"></script>
<script type="text/javascript">
'use strict';
/*场景，渲染器，镜头，背景星星*/
var scene = undefined,
renderer = undefined,
camera = undefined,
particleSystem = undefined,
stat = undefined,
control = undefined;
var cameraFar = 3000; //镜头视距
var canvas = document.getElementById('main');
var module = {
/*初始化*/
init: function init() {
var _this = this;
/*stats帧率统计*/
stat = new Stats();
stat.domElement.style.position = 'absolute';
stat.domElement.style.right = '0px';
stat.domElement.style.top = '0px';
document.body.appendChild(stat.domElement);
/*画布大小*/
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
/*renderer*/
renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.shadowMap.enabled = true; //辅助线
renderer.shadowMapSoft = true; //柔和阴影
renderer.setClearColor(0xffffff, 0);
/*scene*/
scene = new THREE.Scene();
/*camera*/
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, cameraFar);
camera.position.set(-200, 50, 0);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
/*背景星星*/
var particles = 20000; //星星数量
/*buffer做星星*/
var bufferGeometry = new THREE.BufferGeometry();
var positions = new Float32Array(particles * 3);
var colors = new Float32Array(particles * 3);
var color = new THREE.Color();
var gap = 1000; // 定义星星的最近出现位置
for (var i = 0; i < positions.length; i += 3) {
// positions
/*-2gap < x < 2gap */
var x = Math.random() * gap * 2 * (Math.random() < .5 ? -1 : 1);
var y = Math.random() * gap * 2 * (Math.random() < .5 ? -1 : 1);
var z = Math.random() * gap * 2 * (Math.random() < .5 ? -1 : 1);
/*找出x,y,z中绝对值最大的一个数*/
var biggest = Math.abs(x) > Math.abs(y) ? Math.abs(x) > Math.abs(z) ? 'x' : 'z' : Math.abs(y) > Math.abs(z) ? 'y' : 'z';
var pos = { x: x, y: y, z: z };
/*如果最大值比n要小（因为要在一个距离之外才出现星星）则赋值为n（-n）*/
if (Math.abs(pos[biggest]) < gap) pos[biggest] = pos[biggest] < 0 ? -gap : gap;
x = pos['x'];
y = pos['y'];
z = pos['z'];
positions[i] = x;
positions[i + 1] = y;
positions[i + 2] = z;
// colors
/*70%星星有颜色*/
var hasColor = Math.random() > 0.3;
var vx = undefined,
vy = undefined,
vz = undefined;
if (hasColor) {
vx = (Math.random() + 1) / 2;
vy = (Math.random() + 1) / 2;
vz = (Math.random() + 1) / 2;
} else {
vx = 1;
vy = 1;
vz = 1;
}
color.setRGB(vx, vy, vz);
colors[i] = color.r;
colors[i + 1] = color.g;
colors[i + 2] = color.b;
}
bufferGeometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
bufferGeometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
bufferGeometry.computeBoundingSphere();
/*星星的material*/
var material = new THREE.PointsMaterial({ size: 6, vertexColors: THREE.VertexColors });
particleSystem = new THREE.Points(bufferGeometry, material);
scene.add(particleSystem);
camera.lookAt(new THREE.Vector3(0, 0, 0));
renderer.render(scene, camera);
},
};
module.init();
</script>
</body>
</html>
