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

「-g_text」(2013/04/21 (日) 00:00:54) の最新版変更点

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

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

#javascript(){{
<script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/three.min.js"></script>
<script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/Detector.js"></script>
<script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/helvetiker_regular.typeface.js"></script>
<script type="text/javascript"><!--
var flg = false;
var flg2 = false;
var flg3 = false;
$(function(){
  var init = function(){
    // シーン
    var scene = new THREE.Scene();

    // テキスト
    var text = new THREE.Mesh(
      new THREE.TextGeometry( 'Leg', {
        size: 40,            // 高さ40
        height:20,           // 厚さ20
        curveSegments: 1,    // 字曲線分割数1。カクカク。
                             // フォント指定なしだとhelvetikerの非ボールド、非イタリック
        bevelEnabled: true, bevelSize: 3, bevelThickness: 5, bevelSegments: 2
                             // ベベル有効、3太らせる、5伸ばす、ベベル分割数2
      }),
      new THREE.MeshLambertMaterial( { color: 0x00ff00 } )
    );
    scene.add( text );

    // 床
    var n_yuka = 5, yuka_w = 60;
    for(var i=-n_yuka; i<=n_yuka ; i++){
      for(var j=-n_yuka; j<=n_yuka ; j++){
        if((i+j)%2==0){
          var plane = new THREE.Mesh(
            new THREE.PlaneGeometry(yuka_w, yuka_w, 1, 1),
            new THREE.MeshBasicMaterial({color: 0x999999, wireframe: true})
          );
        }else{
          var plane = new THREE.Mesh(
            new THREE.PlaneGeometry(yuka_w, yuka_w, 1, 1),
            new THREE.MeshBasicMaterial({color: 0x4d4d4d, wireframe: true})
          );
        }
        plane.position.x = j*yuka_w;
        plane.position.z = i*yuka_w;
        plane.rotation.x = -Math.PI/2;
        plane.rotation.y = 0;
        plane.rotation.z = 0;
        scene.add(plane);
      }
    }

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

    // ライト
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    scene.add( light );
    light.position.set(20,40,50);
    light.position.normalize();

    // カメラ
    var camera = new THREE.PerspectiveCamera( 30, 320/240, 1, 1000 );
    camera.position.set(-18,60,270);
    camera.lookAt(scene.position);

    // レンダラ
    var renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( 320, 240 );
    var container = $('#d0');
    container.append( renderer.domElement );
    renderer.render( scene, camera );

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

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

#javascript(){{
<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" src="http://cdn56.atwikiimg.com/threejs/pub/helvetiker_regular.typeface.js"></script>
<script type="text/javascript"><!--
var flg = false;
var flg2 = false;
var flg3 = false;
$(function(){
  var init = function(){
    // シーン
    var scene = new THREE.Scene();

    // テキスト
    var text = new THREE.Mesh(
      new THREE.TextGeometry( 'Leg', {
        size: 40,            // 高さ40
        height:20,           // 厚さ20
        curveSegments: 1,    // 字曲線分割数1。カクカク。
                             // フォント指定なしだとhelvetikerの非ボールド、非イタリック
        bevelEnabled: true, bevelSize: 3, bevelThickness: 5, bevelSegments: 2
                             // ベベル有効、3太らせる、5伸ばす、ベベル分割数2
      }),
      new THREE.MeshLambertMaterial( { color: 0x00ff00 } )
    );
    scene.add( text );

    // 床
    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(20,40,50);
    light.position.normalize();

    // カメラ
    var camera = new THREE.PerspectiveCamera( 30, 320/240, 1, 1000 );
    camera.position.set(-18,60,270);
    camera.lookAt(scene.position);

    // レンダラ
    var renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( 320, 240 );
    var container = $('#d0');
    container.append( renderer.domElement );
    renderer.render( scene, camera );

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

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