<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three.js 沙漏形状的星系旋转动画</title>
<style>
body {
overflow: hidden;
}
p {
position: absolute;
top: 8px;
left: 30px;
font-family: "Source Sans Pro";
}
</style>
</head>
<body>
<p>Drag to rotate</p>
<script src='js/three.min.js'></script>
<script src='js/OrbitControls.js'></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
var spheres = [];
var mouse = new THREE.Vector2(),
INTERSECTED;
controls = new THREE.OrbitControls(camera);
camera.position.z = 1000;
window.addEventListener("resize", function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColor("#fff", 1.0);
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 1, 1);
scene.add(directionalLight);
for (var i = -100; i < 100; i++) {
var sphereGeometry = new THREE.SphereGeometry(Math.random() * 20, 32, 32);
var sphereMaterial = new THREE.MeshPhongMaterial({
color: "#000000"
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.displacement = i * i / 18;
sphere.delay = Math.random() * 8;
scene.add(sphere);
sphere.position.x = Math.random() * 25 - 5 * i;
sphere.position.y = sphere.displacement;
sphere.position.z = 0;
spheres.push(sphere);
}
var render = function() {
requestAnimationFrame(render);
var timer = Date.now() * 0.002;
spheres.forEach(function(sphere) {
sphere.position.y = sphere.displacement * Math.sin(timer + sphere.delay);
sphere.position.z = sphere.displacement * Math.cos(timer + sphere.delay);
});
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>