Forked from: naoyashiga's clone()して球のなかに球 View Diff (1) forked: clone()して球のなかに球 kurisu Follow 2017-12-02 21:57:03 License: MIT License Fork0 Fav1 View97 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 187 lines HTML 2 lines CSS 10 lines forked: clone()して球のなかに球 Three.js r60 // forked from naoyashiga's "clone()して球のなかに球" http://jsdo.it/naoyashiga/2pMn var camera,geometry,scene,renderer; var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight, mouseX = 0,mouseY = 0, windowHalfX = window.innerWidth / 2, windowHalfY = window.innerHeight / 2; init(); animate(); function init(){ //領域の横幅 var width = window.innerWidth; //領域の縦幅 var height = window.innerHeight; //レンダラーを生成 renderer = new THREE.CanvasRenderer(); //レンダラーのサイズを設定 renderer.setSize(width,height); //レンダラーをDOMに追加 document.body.appendChild(renderer.domElement); //平行投影カメラにおける視線の領域 var left = - window.innerWidth; var right = window.innerWidth; var top = window.innerHeight; var bottom = - window.innerHeight; //クリッピング手前 var near = -2000; //クリッピング奥 var far = 1000; //平行投影カメラを生成 camera = new THREE.OrthographicCamera( left , right , top , bottom , near , far ); camera.position.x = 200; camera.position.y = 100; camera.position.z = 200; //シーンを生成 scene = new THREE.Scene(); var geometry = new THREE.Geometry(); //パーティクル作成 Particle(); //レンダラーをレンダリングする renderer.render(scene,camera); 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; } } /*----------------------------------- Particleを作成 -----------------------------------*/ function Particle(){ var particle,particle2; //パーティクルの形 var PI2 = Math.PI * 2; var arcX = 0; var arcY = 0; var radius = 2; var startAngle = 0; var endAngle = PI2; var anticlockwise = true; var particleColor = 0x4188D2; var material = new THREE.ParticleCanvasMaterial({ color:particleColor, program:function(context){ context.beginPath(); context.arc(arcX, arcY, radius, startAngle, endAngle, anticlockwise); context.closePath(); context.fill(); } }); var material2 = new THREE.ParticleCanvasMaterial({ color:0xa9a9a9, program:function(context){ context.beginPath(); context.arc(arcX, arcY, radius, startAngle, endAngle, anticlockwise); context.closePath(); context.fill(); } }); geometry = new THREE.Geometry(); for(var i= 0;i < 500;i++){ particle = new THREE.Particle(material); //パーティクルの座標 方向ベクトルの決定 particle.position.x = Math.random() * 2 - 1; particle.position.y = Math.random() * 2 - 1; particle.position.z = Math.random() * 2 - 1; //単位ベクトルにする particle.position.normalize(); //ベクトルを引数の値でスカラー倍する var length = 450; particle.position.multiplyScalar(length); particle.scale.x = particle.scale.y = 3; scene.add(particle); //頂点を設定 geometry.vertices.push(new THREE.Vertex(particle.position)); //パーティクルを複製 particle2 = particle.clone(); //別のマテリアルを設定 particle2.material = material2; //particle2.material.color.setHex(0x000000); particle2.position.normalize(); particle2.position.multiplyScalar(length / 2); particle2.scale.x = particle2.scale.y = 3; scene.add(particle2); geometry.vertices.push(new THREE.Vertex(particle2.position)); } } /*----------------------------------- アニメーション繰り返し処理 -----------------------------------*/ function animate(){ render(); //繰り返し処理 requestAnimationFrame(animate); } /*----------------------------------- カメラの視点アニメーション -----------------------------------*/ function render(){ //カメラの位置 camera.position.x += (mouseX - camera.position.x) * .05; camera.position.y += (-mouseY + 200 - camera.position.y) * .05; //注視点を指定 camera.lookAt(scene.position); renderer.render(scene,camera); } <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> forked: clone()して球のなかに球 * { margin: 0; padding: 0; border: 0; } body { background: #f3f3f3; font: 30px sans-serif; } // forked from naoyashiga's "clone()して球のなかに球" http://jsdo.it/naoyashiga/2pMn var camera,geometry,scene,renderer; var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight, mouseX = 0,mouseY = 0, windowHalfX = window.innerWidth / 2, windowHalfY = window.innerHeight / 2; init(); animate(); function init(){ //領域の横幅 var width = window.innerWidth; //領域の縦幅 var height = window.innerHeight; //レンダラーを生成 renderer = new THREE.CanvasRenderer(); //レンダラーのサイズを設定 renderer.setSize(width,height); //レンダラーをDOMに追加 document.body.appendChild(renderer.domElement); //平行投影カメラにおける視線の領域 var left = - window.innerWidth; var right = window.innerWidth; var top = window.innerHeight; var bottom = - window.innerHeight; //クリッピング手前 var near = -2000; //クリッピング奥 var far = 1000; //平行投影カメラを生成 camera = new THREE.OrthographicCamera( left , right , top , bottom , near , far ); camera.position.x = 200; camera.position.y = 100; camera.position.z = 200; //シーンを生成 scene = new THREE.Scene(); var geometry = new THREE.Geometry(); //パーティクル作成 Particle(); //レンダラーをレンダリングする renderer.render(scene,camera); 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; } } /*----------------------------------- Particleを作成 -----------------------------------*/ function Particle(){ var particle,particle2; //パーティクルの形 var PI2 = Math.PI * 2; var arcX = 0; var arcY = 0; var radius = 2; var startAngle = 0; var endAngle = PI2; var anticlockwise = true; var particleColor = 0x4188D2; var material = new THREE.ParticleCanvasMaterial({ color:particleColor, program:function(context){ context.beginPath(); context.arc(arcX, arcY, radius, startAngle, endAngle, anticlockwise); context.closePath(); context.fill(); } }); var material2 = new THREE.ParticleCanvasMaterial({ color:0xa9a9a9, program:function(context){ context.beginPath(); context.arc(arcX, arcY, radius, startAngle, endAngle, anticlockwise); context.closePath(); context.fill(); } }); geometry = new THREE.Geometry(); for(var i= 0;i < 500;i++){ particle = new THREE.Particle(material); //パーティクルの座標 方向ベクトルの決定 particle.position.x = Math.random() * 2 - 1; particle.position.y = Math.random() * 2 - 1; particle.position.z = Math.random() * 2 - 1; //単位ベクトルにする particle.position.normalize(); //ベクトルを引数の値でスカラー倍する var length = 450; particle.position.multiplyScalar(length); particle.scale.x = particle.scale.y = 3; scene.add(particle); //頂点を設定 geometry.vertices.push(new THREE.Vertex(particle.position)); //パーティクルを複製 particle2 = particle.clone(); //別のマテリアルを設定 particle2.material = material2; //particle2.material.color.setHex(0x000000); particle2.position.normalize(); particle2.position.multiplyScalar(length / 2); particle2.scale.x = particle2.scale.y = 3; scene.add(particle2); geometry.vertices.push(new THREE.Vertex(particle2.position)); } } /*----------------------------------- アニメーション繰り返し処理 -----------------------------------*/ function animate(){ render(); //繰り返し処理 requestAnimationFrame(animate); } /*----------------------------------- カメラの視点アニメーション -----------------------------------*/ function render(){ //カメラの位置 camera.position.x += (mouseX - camera.position.x) * .05; camera.position.y += (-mouseY + 200 - camera.position.y) * .05; //注視点を指定 camera.lookAt(scene.position); renderer.render(scene,camera); } <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> * { margin: 0; padding: 0; border: 0; } body { background: #f3f3f3; font: 30px sans-serif; } 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 kurisu 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/0I8q/js"></script> html5_elements&api Discussion Questions on this code? Tags html5_elements&api Favorite by t_miyazaki