【Three.js】スペーストラベル
See the Pen space travel by aadebdeb (@aadebdeb) on CodePen.
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>[2017/03/27] space travel</title> <style> body { margin: 0; overflow: hidden; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.3/dat.gui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script> <script> window.onload = function() { init(); render(); } window.onresize = onResize; var camera, scene, renderer; var stats; var controller; var particles; var SPACE_SIZE = 1000; function init() { rotation = new THREE.Euler(); initGui(); initStats(); initScene(); initCamera(); initRenderer(); } function initStats() { stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); } function initGui() { controller = new function() { }; gui = new dat.GUI(); } function initRenderer() { renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0x111111)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; document.body.appendChild(renderer.domElement); } function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 0, 1000); camera.lookAt(scene.position); } function initScene() { scene = new THREE.Scene(); var geometry = new THREE.Geometry(); var material = new THREE.PointsMaterial({ color: 0Xffffff, size: 2, }); for (var i = 0; i < 20000; i++) { var particle = new THREE.Vector3( random(-SPACE_SIZE, SPACE_SIZE), random(-SPACE_SIZE, SPACE_SIZE), random(-SPACE_SIZE, SPACE_SIZE) ); particle.velocityZ = random(0.1, 10); geometry.vertices.push(particle); } particles = new THREE.Points(geometry, material); scene.add(particles); } function random(min, max) { return Math.random() * (max - min) + min; } function render() { requestAnimationFrame(render); var vertices =particles.geometry.vertices; vertices.forEach(function(v) { v.z += v.velocityZ; if (v.z > SPACE_SIZE) { v.z -= SPACE_SIZE * 2; } }); particles.geometry.verticesNeedUpdate = true; stats.update(); renderer.render(scene, camera); } function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } </script> </head> <body> </body> </html>