「-l_point」の編集履歴（バックアップ）一覧はこちら

「-l_point」(2013/04/23 (火) 23:42:17) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

#javascript(){{
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/three_r58.min.js"></script>
<script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/Detector.js"></script>
<script type="text/javascript"><!--
$(function(){
  var init = function(){

    // シーン
    var scene = new THREE.Scene();

    // 箱8コ
    var redbox1 = new THREE.Mesh(
      new THREE.CubeGeometry(20,20,20),
      new THREE.MeshLambertMaterial({color:0xff0000, ambient:0xff0000 })
    );
    scene.add(redbox1);
    redbox1.position.set(0,10,60);

    var redbox2 = redbox1.clone();
    scene.add(redbox2);
    redbox2.position.set(-60,10,0);
    redbox2.rotation = redbox1.rotation;

    var redbox3 = redbox1.clone();
    scene.add(redbox3);
    redbox3.position.set(60,10,0);
    redbox3.rotation = redbox1.rotation;

    var redbox4 = redbox1.clone();
    scene.add(redbox4);
    redbox4.position.set(0,10,-60);
    redbox4.rotation = redbox1.rotation;

    var bluebox1 = new THREE.Mesh(
      new THREE.CubeGeometry(10,10,10),
      new THREE.MeshLambertMaterial({color:0x0000ff, ambient:0x0000ff })
    );
    scene.add(bluebox1);
    bluebox1.position.set(0,5,30);
    bluebox1.rotation = redbox1.rotation;

    var bluebox2 = bluebox1.clone();
    scene.add(bluebox2);
    bluebox2.position.set(-30,5,0);
    bluebox2.rotation = redbox1.rotation;

    var bluebox3 = bluebox1.clone();
    scene.add(bluebox3);
    bluebox3.position.set(30,5,0);
    bluebox3.rotation = redbox1.rotation;

    var bluebox4 = bluebox1.clone();
    scene.add(bluebox4);
    bluebox4.position.set(0,5,-30);
    bluebox4.rotation = redbox1.rotation;

    // 床
    var oneWidth = 8, oneHeight = 8, wUnits = 21, hUnits = 21;
    var groundGeo = new THREE.PlaneGeometry(oneWidth*wUnits, oneHeight*hUnits, wUnits, hUnits);
    for(var i=0, len = groundGeo.faces.length, f=-1; i<len; i++){
      f = -1;
      if((i/wUnits | 0)%2==1){ f = ~f; }
      if((i%wUnits)%2==1){ f = ~f; }
      groundGeo.faces[i].materialIndex = f+1;
    }
    var ground = new THREE.Mesh(
      groundGeo,
      new THREE.MeshFaceMaterial([
        new THREE.MeshLambertMaterial({color: 0x444444 }),
        new THREE.MeshLambertMaterial({color: 0x222222 })
      ])
    );
    ground.rotation.x = -Math.PI/2;
    scene.add(ground);

    // xyz軸
    var axes = new THREE.AxisHelper(100);
    scene.add( axes );

    // 点ライト
    var light3 = new THREE.PointLight( 0xffffff, 5, 100 );
    scene.add( light3 );
    light3.position.set(0,50,0);

    // カメラ
    var camera = new THREE.PerspectiveCamera( 30, 320/240, 1, 1000 );
    camera.position.set(-18,160,200);
    camera.lookAt( new THREE.Vector3(0,-10,0) );

    // レンダラ
    var renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( 320, 240 );
    renderer.setClearColor( 0x0c0c0c );
    var container = $('#d0').css('width','480px');
    container.append($('<div>').css({'width':'320px','float':'left'}).append(renderer.domElement) );
    renderer.render( scene, camera );

    var flg = false;
    var flg2 = false;
    (function(){
      flg = true;
      flg2 = true;
      setTimeout(arguments.callee, 70);
    })();

    // マウスが動いたイベント
    $(document).mousemove(function(e){
      if(flg){
        cp = container[0].getBoundingClientRect();
        redbox1.rotation.y = (e.clientX-cp.left-160) / 72;
        redbox1.rotation.x = (e.clientY-cp.top-210) / 54;
        renderer.render( scene, camera );
        flg = false;
      }
    });

    var pntInt    = $('<div>').attr('id','pntInt');
    var pntIntVal = $('<div>').attr('id','pntIntVal').text('強さ：　5');
    var pntDst    = $('<div>').attr('id','pntDst');
    var pntDstVal = $('<div>').attr('id','pntDstVal').text('距離：　100');

    pntInt.slider({
      min: 0, max: 10, value: 5, step:0.1,
      slide: function(event, ui){
        if(flg2){
          light3.intensity = ui.value;
          pntIntVal.text('強さ：　' + ui.value);
          renderer.render( scene, camera );
          flg2 = false;
        }
      }
    });
    pntDst.slider({
      min: 1, max: 200, value: 100, step:1,
      slide: function(event, ui){
        if(flg2){
          light3.distance = ui.value;
          pntDstVal.text('距離：　' + ui.value);
          renderer.render( scene, camera );
          flg2 = false;
        }
      }
    });

    var sContainer = $('<div>').css({'margin-left':'320px', 'padding':'3px'});
    sContainer.append(pntInt,pntIntVal,pntDst,pntDstVal);
    container.append( sContainer, $('<div>').css('clear','left') );

  };

  if ( Detector.webgl ){
    init();
  }else{
    $('#d0').html('<span style="color:red;">あなたが使用中のブラウザはWebGL非対応もしくはWebGLが有効になっていません。</span>');
  }

});
//--></script>
}}

#javascript(){{
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/three_r58.min.js"></script>
<script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/Detector.js"></script>
<script type="text/javascript"><!--
$(function(){
  var init = function(){

    // シーン
    var scene = new THREE.Scene();

    // 箱8コ
    var redbox1 = new THREE.Mesh(
      new THREE.CubeGeometry(20,20,20),
      new THREE.MeshLambertMaterial({color:0xff0000, ambient:0xff0000 })
    );
    scene.add(redbox1);
    redbox1.position.set(0,10,60);

    var redbox2 = redbox1.clone();
    scene.add(redbox2);
    redbox2.position.set(-60,10,0);
    redbox2.rotation = redbox1.rotation;

    var redbox3 = redbox1.clone();
    scene.add(redbox3);
    redbox3.position.set(60,10,0);
    redbox3.rotation = redbox1.rotation;

    var redbox4 = redbox1.clone();
    scene.add(redbox4);
    redbox4.position.set(0,10,-60);
    redbox4.rotation = redbox1.rotation;

    var bluebox1 = new THREE.Mesh(
      new THREE.CubeGeometry(10,10,10),
      new THREE.MeshLambertMaterial({color:0x0000ff, ambient:0x0000ff })
    );
    scene.add(bluebox1);
    bluebox1.position.set(0,5,30);
    bluebox1.rotation = redbox1.rotation;

    var bluebox2 = bluebox1.clone();
    scene.add(bluebox2);
    bluebox2.position.set(-30,5,0);
    bluebox2.rotation = redbox1.rotation;

    var bluebox3 = bluebox1.clone();
    scene.add(bluebox3);
    bluebox3.position.set(30,5,0);
    bluebox3.rotation = redbox1.rotation;

    var bluebox4 = bluebox1.clone();
    scene.add(bluebox4);
    bluebox4.position.set(0,5,-30);
    bluebox4.rotation = redbox1.rotation;

    // 床
    var oneWidth = 8, oneHeight = 8, wUnits = 21, hUnits = 21;
    var groundGeo = new THREE.PlaneGeometry(oneWidth*wUnits, oneHeight*hUnits, wUnits, hUnits);
    for(var i=0, len = groundGeo.faces.length, f=-1; i<len; i++){
      f = -1;
      if((i/wUnits | 0)%2==1){ f = ~f; }
      if((i%wUnits)%2==1){ f = ~f; }
      groundGeo.faces[i].materialIndex = f+1;
    }
    var ground = new THREE.Mesh(
      groundGeo,
      new THREE.MeshFaceMaterial([
        new THREE.MeshLambertMaterial({color: 0x444444 }),
        new THREE.MeshLambertMaterial({color: 0x222222 })
      ])
    );
    ground.rotation.x = -Math.PI/2;
    scene.add(ground);

    // xyz軸
    var axes = new THREE.AxisHelper(100);
    scene.add( axes );

    // 点ライト
    var light3 = new THREE.PointLight( 0xffffff, 5, 100 );
    scene.add( light3 );
    light3.position.set(0,50,0);

    // カメラ
    var camera = new THREE.PerspectiveCamera( 30, 320/240, 1, 1000 );
    camera.position.set(-18,160,200);
    camera.lookAt( new THREE.Vector3(0,-10,0) );

    // レンダラ
    var renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( 320, 240 );
    renderer.setClearColor( 0x0c0c0c );
    var container = $('#d0').css('width','480px');
    container.append($('<div>').css({'width':'320px','float':'left'}).append(renderer.domElement) );
    renderer.render( scene, camera );

    var flg = false;
    var flg2 = false;
    (function(){
      flg = true;
      flg2 = true;
      setTimeout(arguments.callee, 70);
    })();

    // マウスが動いたイベント
    $(document).mousemove(function(e){
      if(flg){
        cp = container[0].getBoundingClientRect();
        redbox1.rotation.y = (e.clientX-cp.left-160) / 72;
        redbox1.rotation.x = (e.clientY-cp.top-210) / 54;
        renderer.render( scene, camera );
        flg = false;
      }
    });

    var pntInt    = $('<div>').attr('id','pntInt');
    var pntIntVal = $('<div>').attr('id','pntIntVal').text('強さ：　5');
    var pntDst    = $('<div>').attr('id','pntDst');
    var pntDstVal = $('<div>').attr('id','pntDstVal').text('距離：　100');

    pntInt.slider({
      min: 0, max: 10, value: 5, step:0.1,
      slide: function(event, ui){
        if(flg2){
          light3.intensity = ui.value;
          pntIntVal.text('強さ：　' + ui.value);
          renderer.render( scene, camera );
          flg2 = false;
        }
      }
    });
    pntDst.slider({
      min: 0, max: 200, value: 100, step:1,
      slide: function(event, ui){
        if(flg2){
          light3.distance = ui.value;
          pntDstVal.text('距離：　' + ui.value);
          renderer.render( scene, camera );
          flg2 = false;
        }
      }
    });

    var sContainer = $('<div>').css({'margin-left':'320px', 'padding':'3px'});
    sContainer.append(pntInt,pntIntVal,pntDst,pntDstVal);
    container.append( sContainer, $('<div>').css('clear','left') );

  };

  if ( Detector.webgl ){
    init();
  }else{
    $('#d0').html('<span style="color:red;">あなたが使用中のブラウザはWebGL非対応もしくはWebGLが有効になっていません。</span>');
  }

});
//--></script>
}}