three.js. random particles demo mrdoob Follow 2010-06-20 02:23:24 License: MIT License Fork27 Fav22 View4607 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 98 lines HTML 0 lines CSS 9 lines three.js. random particles demo three.js (lib) stats.js (lib) var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight, stats, container, particle, camera, scene, renderer, mouseX = 0, mouseY = 0, windowHalfX = window.innerWidth / 2, windowHalfY = window.innerHeight / 2; init(); setInterval(loop, 1000 / 60); function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.Camera(0, 0, 1000); camera.focus = 200; scene = new THREE.Scene(); renderer = new THREE.CanvasRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); for (var i = 0; i < 1000; i++) { particle = new THREE.Particle(new THREE.ColorFillMaterial(Math.random() * 0x808008 + 0x808080, 1)); particle.size = Math.random() * 10 + 5; particle.position.x = Math.random() * 2000 - 1000; particle.position.y = Math.random() * 2000 - 1000; particle.position.z = Math.random() * 2000 - 1000; scene.add(particle); } container.appendChild(renderer.domElement); stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; container.appendChild(stats.domElement); document.addEventListener('mousemove', onDocumentMouseMove, false); document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); } // function onDocumentMouseMove(event) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY; } function onDocumentTouchStart(event) { if(event.touches.length == 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX; mouseY = event.touches[0].pageY - windowHalfY; } } function onDocumentTouchMove(event) { if(event.touches.length == 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX; mouseY = event.touches[0].pageY - windowHalfY; } } // function loop() { camera.position.x += (mouseX - camera.position.x) * .05; camera.position.y += (-mouseY - camera.position.y) * .05; renderer.render(scene, camera); stats.update(); } three.js. random particles demo body { background-color: #000000; margin: 0px; overflow: hidden; } a { color:#0078ff; } var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight, stats, container, particle, camera, scene, renderer, mouseX = 0, mouseY = 0, windowHalfX = window.innerWidth / 2, windowHalfY = window.innerHeight / 2; init(); setInterval(loop, 1000 / 60); function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.Camera(0, 0, 1000); camera.focus = 200; scene = new THREE.Scene(); renderer = new THREE.CanvasRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); for (var i = 0; i < 1000; i++) { particle = new THREE.Particle(new THREE.ColorFillMaterial(Math.random() * 0x808008 + 0x808080, 1)); particle.size = Math.random() * 10 + 5; particle.position.x = Math.random() * 2000 - 1000; particle.position.y = Math.random() * 2000 - 1000; particle.position.z = Math.random() * 2000 - 1000; scene.add(particle); } container.appendChild(renderer.domElement); stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; container.appendChild(stats.domElement); document.addEventListener('mousemove', onDocumentMouseMove, false); document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); } // function onDocumentMouseMove(event) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY; } function onDocumentTouchStart(event) { if(event.touches.length == 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX; mouseY = event.touches[0].pageY - windowHalfY; } } function onDocumentTouchMove(event) { if(event.touches.length == 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX; mouseY = event.touches[0].pageY - windowHalfY; } } // function loop() { camera.position.x += (mouseX - camera.position.x) * .05; camera.position.y += (-mouseY - camera.position.y) * .05; renderer.render(scene, camera); stats.update(); } body { background-color: #000000; margin: 0px; overflow: hidden; } a { color:#0078ff; } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/728D/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/mrdoob/728D" title="three.js. random particles demo">three.js. random particles demo - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Tweet twitter Tags 3D [particle][パーティクル] animation canvas javascript,animation particle three.js Favorite by daijimachine.. nanamuh xui xor tyfkda kyosuke.w gaziya angelo katsumasa.os.. dapumptu ethertank sabotenbroth.. is_tks Se-Jun.Park fingaholic novomir m1m0r1 siouxcitizen.. laishin17: 3Danimationcanvasjavascript,animationthree.js[particle][パーティクル] Docfive: 3d kikuchy: Particlethree.jsThree.jsを使った3Dレンダリングのサンプル cepharos: particlethree.js Forked sort new page view favorite forked forked: three.js. random parti.. afrancogueva.. 00 1views 99/1/9 forked: three.js. random parti.. walzer.op 00 13views 99/1/9 forked: three.js. random parti.. sugikota74 00 12views 99/1/9 1 2 3 4 5 6 7 8 9NEXT>>