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

「-m_mesh1js」(2013/05/03 (金) 20:08:55) の最新版変更点

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

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

#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 sinit = function(){
    var width = 450, height = 120;

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

    var sphereGeo = new THREE.SphereGeometry(30,16,16);
    var sphereBasic = new THREE.Mesh(
      sphereGeo.clone(),
      new THREE.MeshBasicMaterial( { color: 0xff0000 } )
    );
    scene.add( sphereBasic );
    sphereBasic.position.set(-100,30,0);

    var sphereLambert = new THREE.Mesh(
      sphereGeo.clone(),
      new THREE.MeshLambertMaterial( { color: 0xff0000, ambient:0xff0000 } )
    );
    scene.add( sphereLambert );
    sphereLambert.position.set(0,30,0);

    var spherePhong = new THREE.Mesh(
      sphereGeo.clone(),
      new THREE.MeshPhongMaterial( { color: 0xff0000, ambient:0xff0000, specular: 0xffffff, shininess:10 } )
    );
    scene.add( spherePhong );
    spherePhong.position.set(100,30,0);
    spherePhong.material.specular.setHSL(0, 1, 0.85);

    // 床
    var oneWidth = 60, oneHeight = 60, wUnits = 11, hUnits = 11;
    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.MeshBasicMaterial({color: 0x999999, wireframe:true }),
        new THREE.MeshBasicMaterial({color: 0x4d4d4d, wireframe:true })
      ])
    );
    ground.rotation.x = -Math.PI/2;
    scene.add(ground);
  


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

    // ライト
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    scene.add( light );
    light.position.set(80,100,60).normalize();
    light.position.default = light.position.clone();  // convenience

    // 環境光
    var light2 = new THREE.AmbientLight( 0xffffff );
    light2.color.multiplyScalar(0.4);
    scene.add( light2 );


    // カメラ
    var scale = 0.7;
    var camera = new THREE.OrthographicCamera(
      -width/2*scale, width/2*scale, height/2*scale, -height/2*scale, 1, 1000
    );
    camera.position.set(0,60,200);
    camera.lookAt( new THREE.Vector3(0,30,0) );

    // レンダラ
    var renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( width, height );
    renderer.setClearColor(0xffffff);
    var container = $('#d0');
    container.append( renderer.domElement );

    render();

    function render(){
       renderer.render(scene, camera);
    }

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

    var lightBasePos = light.position;
    $('#sLitPos').append($('<div>').slider({
        min: 0,
        max: 360,
        value: 0,
        slide: function(event, ui){
          if(flg){
            light.position.copy(light.position.default);
            light.position.applyAxisAngle( new THREE.Vector3(0,1,0), ui.value/360*2*Math.PI );
            render();
            flg = false;
          }
        }
      })
    );

    $('#sColorB').append($('<div>').css({'width':'100px', 'background':'#ff0000'}).slider({
        min: 0,
        max: 100,
        value: 0,
        slide: function(event, ui){
          if(flg){
            var cc = sphereBasic.material.color;
            cc.setHSL(ui.value/100, 1, 0.5);
            $(this).css({'background':'#'+cc.getHexString()});
            render();
            flg = false;
          }
        }
      })
    );
    $('#sColorL').append($('<div>').css({'width':'100px', 'background':'#ff0000'}).slider({
        min: 0,
        max: 100,
        value: 0,
        slide: function(event, ui){
          if(flg){
            var cc = sphereLambert.material.color;
            cc.setHSL(ui.value/100, 1, 0.5);
            $(this).css({'background':'#'+cc.getHexString()});
            render();
            flg = false;
          }
        }
      })
    );
    $('#sColorP').append($('<div>').css({'width':'100px', 'background':'#ff0000'}).slider({
        min: 0,
        max: 100,
        value: 0,
        slide: function(event, ui){
          if(flg){
            var cc = spherePhong.material.color;
            cc.setHSL(ui.value/100, 1, 0.5);
            $(this).css({'background':'#'+cc.getHexString()});
            render();
            flg = false;
          }
        }
      })
    );



    $('#sAmbieL').append($('<div>').css({'width':'100px', 'background':'#'+sphereLambert.material.ambient.getHexString()}).slider({
        min: 0,
        max: 100,
        value: 0,
        slide: function(event, ui){
          if(flg){
            var cc = sphereLambert.material.ambient;
            cc.setHSL(ui.value/100, 1, 0.5);
            $(this).css({'background':'#'+cc.getHexString()});
            render();
            flg = false;
          }
        }
      })
    );
    $('#sAmbieP').append($('<div>').css({'width':'100px', 'background':'#'+spherePhong.material.ambient.getHexString()}).slider({
        min: 0,
        max: 100,
        value: 0,
        slide: function(event, ui){
          if(flg){
            var cc = spherePhong.material.ambient;
            cc.setHSL(ui.value/100, 1, 0.5);
            $(this).css({'background':'#'+cc.getHexString()});
            render();
            flg = false;
          }
        }
      })
    );


    $('#sSpecuP').append($('<div>').css({'width':'100px', 'background':'#'+spherePhong.material.specular.getHexString()}).slider({
        min: 0,
        max: 100,
        value: 0,
        slide: function(event, ui){
          if(flg){
            var cc = spherePhong.material.specular;
            cc.setHSL(ui.value/100, 1, 0.85);
            $(this).css({'background':'#'+cc.getHexString()});
            render();
            flg = false;
          }
        }
      })
    );

    var sShiniPVal = $('#sShiniPVal');
    $('#sShiniP').prepend( $('<div>').css('width','100px').slider({
        min: 0,
        max: 100,
        value: 10,
        slide: function(event, ui){
          if(flg){
            spherePhong.material.shininess = ui.value;
            sShiniPVal.text(ui.value);
            render();
            flg = false;
          }
        }
      })
    );


    //$('#sSpecuP').click(function(){
    //  if(this.checked){
    //    spherePhong.material.metal = true;
    //  } else {
    //    spherePhong.material.metal = false;
    //  }
    //});

  };

  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 sinit = function(){
    var width = 450, height = 120;

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

    var sphereGeo = new THREE.SphereGeometry(30,16,16);
    var sphereBasic = new THREE.Mesh(
      sphereGeo.clone(),
      new THREE.MeshBasicMaterial( { color: 0xff0000 } )
    );
    scene.add( sphereBasic );
    sphereBasic.position.set(-100,30,0);

    var sphereLambert = new THREE.Mesh(
      sphereGeo.clone(),
      new THREE.MeshLambertMaterial( { color: 0xff0000, ambient:0xff0000 } )
    );
    scene.add( sphereLambert );
    sphereLambert.position.set(0,30,0);

    var spherePhong = new THREE.Mesh(
      sphereGeo.clone(),
      new THREE.MeshPhongMaterial( { color: 0xff0000, ambient:0xff0000, specular: 0xffffff, shininess:10 } )
    );
    scene.add( spherePhong );
    spherePhong.position.set(100,30,0);
    spherePhong.material.specular.setHSL(0, 1, 0.85);

    // 床
    var oneWidth = 60, oneHeight = 60, wUnits = 11, hUnits = 11;
    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.MeshBasicMaterial({color: 0x999999, wireframe:true }),
        new THREE.MeshBasicMaterial({color: 0x4d4d4d, wireframe:true })
      ])
    );
    ground.rotation.x = -Math.PI/2;
    scene.add(ground);
  


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

    // ライト
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    scene.add( light );
    light.position.set(80,100,60).normalize();
    light.position.default = light.position.clone();  // convenience

    // 環境光
    var light2 = new THREE.AmbientLight( 0xffffff );
    light2.color.multiplyScalar(0.4);
    scene.add( light2 );


    // カメラ
    var scale = 0.7;
    var camera = new THREE.OrthographicCamera(
      -width/2*scale, width/2*scale, height/2*scale, -height/2*scale, 1, 1000
    );
    camera.position.set(0,60,200);
    camera.lookAt( new THREE.Vector3(0,30,0) );

    // レンダラ
    var renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( width, height );
    renderer.setClearColor(0xffffff);
    var container = $('#d0');
    container.append( renderer.domElement );

    render();

    function render(){
       renderer.render(scene, camera);
    }

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

    var lightBasePos = light.position;
    $('#sLitPos').append($('<div>').slider({
        min: 0,
        max: 360,
        value: 0,
        slide: function(event, ui){
          if(flg){
            light.position.copy(light.position.default);
            light.position.applyAxisAngle( new THREE.Vector3(0,1,0), ui.value/360*2*Math.PI );
            render();
            flg = false;
          }
        }
      })
    );

    $('#sColorB').append($('<div>').css({'width':'100px', 'background':'#ff0000'}).slider({
        min: 0,
        max: 100,
        value: 0,
        slide: function(event, ui){
          if(flg){
            var cc = sphereBasic.material.color;
            cc.setHSL(ui.value/100, 1, 0.5);
            $(this).css({'background':'#'+cc.getHexString()});
            render();
            flg = false;
          }
        }
      })
    );
    $('#sColorL').append($('<div>').css({'width':'100px', 'background':'#ff0000'}).slider({
        min: 0,
        max: 100,
        value: 0,
        slide: function(event, ui){
          if(flg){
            var cc = sphereLambert.material.color;
            cc.setHSL(ui.value/100, 1, 0.5);
            $(this).css({'background':'#'+cc.getHexString()});
            render();
            flg = false;
          }
        }
      })
    );
    $('#sColorP').append($('<div>').css({'width':'100px', 'background':'#ff0000'}).slider({
        min: 0,
        max: 100,
        value: 0,
        slide: function(event, ui){
          if(flg){
            var cc = spherePhong.material.color;
            cc.setHSL(ui.value/100, 1, 0.5);
            $(this).css({'background':'#'+cc.getHexString()});
            render();
            flg = false;
          }
        }
      })
    );



    $('#sAmbieL').append($('<div>').css({'width':'100px', 'background':'#'+sphereLambert.material.ambient.getHexString()}).slider({
        min: 0,
        max: 100,
        value: 0,
        slide: function(event, ui){
          if(flg){
            var cc = sphereLambert.material.ambient;
            cc.setHSL(ui.value/100, 1, 0.5);
            $(this).css({'background':'#'+cc.getHexString()});
            render();
            flg = false;
          }
        }
      })
    );
    $('#sAmbieP').append($('<div>').css({'width':'100px', 'background':'#'+spherePhong.material.ambient.getHexString()}).slider({
        min: 0,
        max: 100,
        value: 0,
        slide: function(event, ui){
          if(flg){
            var cc = spherePhong.material.ambient;
            cc.setHSL(ui.value/100, 1, 0.5);
            $(this).css({'background':'#'+cc.getHexString()});
            render();
            flg = false;
          }
        }
      })
    );


    $('#sSpecuP').append($('<div>').css({'width':'100px', 'background':'#'+spherePhong.material.specular.getHexString()}).slider({
        min: 0,
        max: 100,
        value: 0,
        slide: function(event, ui){
          if(flg){
            var cc = spherePhong.material.specular;
            cc.setHSL(ui.value/100, 1, 0.85);
            $(this).css({'background':'#'+cc.getHexString()});
            render();
            flg = false;
          }
        }
      })
    );

    var sShiniPVal = $('#sShiniPVal');
    $('#sShiniP').prepend( $('<div>').css('width','100px').slider({
        min: 0,
        max: 100,
        value: 10,
        slide: function(event, ui){
          if(flg){
            spherePhong.material.shininess = ui.value;
            sShiniPVal.text(ui.value);
            render();
            flg = false;
          }
        }
      })
    );


    //$('#sSpecuP').click(function(){
    //  if(this.checked){
    //    spherePhong.material.metal = true;
    //  } else {
    //    spherePhong.material.metal = false;
    //  }
    //});

  };

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