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

「-g_OBJmtl」(2013/05/07 (火) 18:16:31) の最新版変更点

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

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

#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/MTLLoader.js"></script>
<script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/OBJMTLLoader.js"></script>
<script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/OrbitControls.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 = 320, height = 240;

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

    // Loadingテキスト
    //   texture canvas
    var texCanvas = document.createElement('canvas');
    texCanvas.width = width, texCanvas.height = height;
    var ctx = texCanvas.getContext('2d');
    ctx.rect(0,0, width,height);
    ctx.fillStyle = "#000000";
    ctx.fill();
    ctx.fillStyle = "#ffffff";
    ctx.font = "normal normal 50px sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("Loading...", width/2,height/2, width);
    //   texture
    var tex = new THREE.Texture( texCanvas );
    tex.needsUpdate = true;
    //   sprite
    var material = new THREE.SpriteMaterial( {
      map: tex, useScreenCoordinates: true, alignment: THREE.SpriteAlignment.topLeft,
      opacity:0.5, color: 0xffffff
    } );
    var textSprite = new THREE.Sprite( material );
    textSprite.position.set( 0, 0, 0 );
    textSprite.scale.set( texCanvas.width, texCanvas.height, 0 );
    scene.add( textSprite );

    // 床
    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);

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

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

    // カメラ
    var camera = new THREE.PerspectiveCamera( 30, 320/240, 1, 10000 );
    camera.position.set(25,143,76);
    camera.lookAt(new THREE.Vector3(0,123,0));

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

    // カメラコントローラ
    controls = new THREE.OrbitControls( camera, container[0] );
    controls.center.set(0,123,0);

    // 突貫工事
    THREE.MTLLoader.loadTexture = function ( url, mapping, onLoad, onError ) {
      var isCompressed = /\.dds$/i.test( url );
      if ( isCompressed ) {
        var texture = THREE.ImageUtils.loadCompressedTexture( url, mapping, onLoad, onError );
      } else {
        var image = new Image();
        var texture = new THREE.Texture( image, mapping );
        var loader = new THREE.ImageLoader();
        loader.addEventListener( 'load', function ( event ) {
          texture.image = THREE.MTLLoader.ensurePowerOfTwo_( event.content );
          texture.needsUpdate = true;
          loading();     // ←突貫工事
          if ( onLoad ) onLoad( texture );
        } );
        loader.addEventListener( 'error', function ( event ) {
          if ( onError ) onError( event.message );
        } );
        loader.crossOrigin = this.crossOrigin;
        loader.load( url, image );
      }
      return texture;
    };

    // モデル読み込み
    var OBJMtl;
    var loader = new THREE.OBJMTLLoader();
    // コールバック自分で書く
    loader.addEventListener( 'load', function ( event ) {
      OBJMtl = event.content;
      OBJMtl.scale.multiplyScalar(0.75);
      loading();
    });
    // 読み込み開始
    loader.load(
      '../../threejs?cmd=upload&act=open&pageid=101&file=wor.obj',
      '../../threejs?cmd=upload&act=open&pageid=101&file=wor.mtl'
    );

    var loaded = 0;
    function loading(){
      loaded++;
      if(loaded >= 2){
        scene.add( OBJMtl );
        scene.remove( textSprite );
        renderer.render( scene, camera );
      }
    }

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

    // マウスが動いたイベント
    container.mousemove(function(e){
      if(flg){
        controls.update();
        renderer.render( scene, camera );
        flg = false;
      }
    });

  };

  if ( Detector.webgl ){
    sinit();
  }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/MTLLoader.js"></script>
<script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/OBJMTLLoader.js"></script>
<script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/OrbitControls.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 = 320, height = 240;

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

    // Loadingテキスト
    //   texture canvas
    var texCanvas = document.createElement('canvas');
    texCanvas.width = width, texCanvas.height = height;
    var ctx = texCanvas.getContext('2d');
    ctx.rect(0,0, width,height);
    ctx.fillStyle = "#000000";
    ctx.fill();
    ctx.fillStyle = "#ffffff";
    ctx.font = "normal normal 50px sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("Loading...", width/2,height/2, width);
    //   texture
    var tex = new THREE.Texture( texCanvas );
    tex.needsUpdate = true;
    //   sprite
    var material = new THREE.SpriteMaterial( {
      map: tex, useScreenCoordinates: true, alignment: THREE.SpriteAlignment.topLeft,
      opacity:0.5, color: 0xffffff
    } );
    var textSprite = new THREE.Sprite( material );
    textSprite.position.set( 0, 0, 0 );
    textSprite.scale.set( texCanvas.width, texCanvas.height, 0 );
    scene.add( textSprite );

    // 床
    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);

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

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

    // カメラ
    var camera = new THREE.PerspectiveCamera( 30, 320/240, 1, 10000 );
    camera.position.set(25,143,76);
    camera.lookAt(new THREE.Vector3(0,123,0));

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

    // カメラコントローラ
    controls = new THREE.OrbitControls( camera, container[0] );
    controls.center.set(0,123,0);

    // 読み込み突貫工事
    THREE.MTLLoader.loadTexture = function ( url, mapping, onLoad, onError ) {
      var isCompressed = /\.dds$/i.test( url );
      if ( isCompressed ) {
        var texture = THREE.ImageUtils.loadCompressedTexture( url, mapping, onLoad, onError );
      } else {
        var image = new Image();
        var texture = new THREE.Texture( image, mapping );
        var loader = new THREE.ImageLoader();
        loader.addEventListener( 'load', function ( event ) {
          texture.image = THREE.MTLLoader.ensurePowerOfTwo_( event.content );
          texture.needsUpdate = true;
          loading();     // ←突貫工事
          if ( onLoad ) onLoad( texture );
        } );
        loader.addEventListener( 'error', function ( event ) {
          if ( onError ) onError( event.message );
        } );
        loader.crossOrigin = this.crossOrigin;
        loader.load( url, image );
      }
      return texture;
    };

    // テクスチャ突貫工事
    THREE.MTLLoader.ensurePowerOfTwo_ = function ( image ) {
      return image;
    };

    // モデル読み込み
    var OBJMtl;
    var loader = new THREE.OBJMTLLoader();
    // コールバック自分で書く
    loader.addEventListener( 'load', function ( event ) {
      OBJMtl = event.content;
      OBJMtl.scale.multiplyScalar(0.75);
      loading();
    });
    // 読み込み開始
    loader.load(
      '../../threejs?cmd=upload&act=open&pageid=101&file=wor.obj',
      '../../threejs?cmd=upload&act=open&pageid=101&file=wor.mtl'
    );

    var loaded = 0;
    function loading(){
      loaded++;
      if(loaded >= 2){
        scene.add( OBJMtl );
        scene.remove( textSprite );
        renderer.render( scene, camera );
      }
    }

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

    // マウスが動いたイベント
    container.mousemove(function(e){
      if(flg){
        controls.update();
        renderer.render( scene, camera );
        flg = false;
      }
    });

  };

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

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