forked: clone()して球のなかに球

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);
}

forked: clone()して球のなかに球

// 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; }