Forked from: djankey's Three.js particles View Diff (1) forked: Three.js particles adenekanadem Follow 2017-07-12 07:45:09 License: MIT License Fork0 Fav0 View675 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 88 lines HTML 11 lines CSS 11 lines forked: Three.js particles // forked from djankey's "Three.js particles " http://jsdo.it/djankey/t8j5 // GLOBALS var container, scene, camera, renderer, stats, controls, particles, particleSystem, particleCount = 5000; function init() { // SCENE scene = new THREE.Scene(); scene.fog = new THREE.FogExp2( 0x000000, 0.00005 ); // CAMERA camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 3000); camera.position.set( 0, 300, 1000); scene.add(camera); // RENDERER if ( Detector.webgl) { renderer = new THREE.WebGLRenderer( {antialias:true} ); } else { renderer = new THREE.CanvasRenderer(); } // CONTAINER container = document.createElement('div'); document.body.appendChild(container); container.appendChild(renderer.domElement); // PARTICLES particles = new THREE.Geometry(); var pMaterial = new THREE.ParticleBasicMaterial({color: 0xFFFFFF, size: 25, map: THREE.ImageUtils.loadTexture('http://jsrun.it/assets/8/u/p/6/8up6b.jpg'), blending: THREE.AdditiveBlending, transparent: true}); var delta = 20; for(var p = 0; p < particleCount; p++) { var pX = Math.random() * 400 - 200, pY = Math.random() * 400 - 200, pZ = Math.random() * 400 - 200; if(pX<delta && pX>0) pX +=delta; else if(pX>-delta && pX<=0) pX -=delta; if(pY<delta && pY>0) pY +=delta; else if(pY>-delta && pY<=0) pY -=delta; if(pZ<delta && pZ>0) pZ +=delta; else if(pZ>-delta && pZ<=0) pZ -=delta; var particle = new THREE.Vector3(pX, pY, pZ); particles.vertices.push(particle); } particleSystem = new THREE.ParticleSystem(particles, pMaterial); particleSystem.sortParticles = true; scene.add(particleSystem); // STATS stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; //stats.domElement.style.bottom = '0px'; stats.domElement.style.zIndex = 100; container.appendChild(stats.domElement); // CONTROLS controls = new THREE.TrackballControls(camera, renderer.domElement ); // RESIZE window.addEventListener('resize', resizeHandler, false); resizeHandler(); // ANIMATE animate(); } function resizeHandler() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function animate() { requestAnimationFrame(animate); controls.update(); stats.update(); particleSystem.rotation.y += 0.003; renderer.render( scene, camera ); } // Init window.addEventListener('load', init, false); <!-- stats.js --> <script type="text/javascript" src="http://jsrun.it/assets/1/u/8/z/1u8zg"></script> <!-- Three.js --> <script type="text/javascript" src="http://jsrun.it/assets/w/3/o/t/w3ot6"></script> <!-- Detector.js --> <script type="text/javascript" src="http://jsrun.it/assets/x/c/X/T/xcXTR"></script> <!-- TrackballControls.js --> <script type="text/javascript" src="http://jsrun.it/assets/j/T/n/u/jTnux"></script> forked: Three.js particles body { font-family: Monospace; background-color: #000000; overflow: hidden; } * { margin: 0; padding: 0; border: 0; } // forked from djankey's "Three.js particles " http://jsdo.it/djankey/t8j5 // GLOBALS var container, scene, camera, renderer, stats, controls, particles, particleSystem, particleCount = 5000; function init() { // SCENE scene = new THREE.Scene(); scene.fog = new THREE.FogExp2( 0x000000, 0.00005 ); // CAMERA camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 3000); camera.position.set( 0, 300, 1000); scene.add(camera); // RENDERER if ( Detector.webgl) { renderer = new THREE.WebGLRenderer( {antialias:true} ); } else { renderer = new THREE.CanvasRenderer(); } // CONTAINER container = document.createElement('div'); document.body.appendChild(container); container.appendChild(renderer.domElement); // PARTICLES particles = new THREE.Geometry(); var pMaterial = new THREE.ParticleBasicMaterial({color: 0xFFFFFF, size: 25, map: THREE.ImageUtils.loadTexture('http://jsrun.it/assets/8/u/p/6/8up6b.jpg'), blending: THREE.AdditiveBlending, transparent: true}); var delta = 20; for(var p = 0; p < particleCount; p++) { var pX = Math.random() * 400 - 200, pY = Math.random() * 400 - 200, pZ = Math.random() * 400 - 200; if(pX<delta && pX>0) pX +=delta; else if(pX>-delta && pX<=0) pX -=delta; if(pY<delta && pY>0) pY +=delta; else if(pY>-delta && pY<=0) pY -=delta; if(pZ<delta && pZ>0) pZ +=delta; else if(pZ>-delta && pZ<=0) pZ -=delta; var particle = new THREE.Vector3(pX, pY, pZ); particles.vertices.push(particle); } particleSystem = new THREE.ParticleSystem(particles, pMaterial); particleSystem.sortParticles = true; scene.add(particleSystem); // STATS stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; //stats.domElement.style.bottom = '0px'; stats.domElement.style.zIndex = 100; container.appendChild(stats.domElement); // CONTROLS controls = new THREE.TrackballControls(camera, renderer.domElement ); // RESIZE window.addEventListener('resize', resizeHandler, false); resizeHandler(); // ANIMATE animate(); } function resizeHandler() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function animate() { requestAnimationFrame(animate); controls.update(); stats.update(); particleSystem.rotation.y += 0.003; renderer.render( scene, camera ); } // Init window.addEventListener('load', init, false); <!-- stats.js --> <script type="text/javascript" src="http://jsrun.it/assets/1/u/8/z/1u8zg"></script> <!-- Three.js --> <script type="text/javascript" src="http://jsrun.it/assets/w/3/o/t/w3ot6"></script> <!-- Detector.js --> <script type="text/javascript" src="http://jsrun.it/assets/x/c/X/T/xcXTR"></script> <!-- TrackballControls.js --> <script type="text/javascript" src="http://jsrun.it/assets/j/T/n/u/jTnux"></script> body { font-family: Monospace; background-color: #000000; overflow: hidden; } * { margin: 0; padding: 0; border: 0; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author adenekanademola225 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/AwNu/js"></script> canvas canvas, html5 javascript library&test particles three.js webgl Discussion Questions on this code? Tags canvas canvas, html5 javascript library&test particles three.js webgl