3D Model の取り扱い

a graph image

素材を OBJ, MLT 形式へ変換する

  1. NASA から Aura 衛星の 3D データを取得
  2. blender で開いてみる
    aura.png
    • まずは [N] で、大きさの確認。大体 (1,1,1) に収まる大きさみたい
    • 拡大縮小は [A] で全選択して [S]
    • 回転は [A] で全選択して [R-R],[R-X],[R-Y],[R-Z]
    • ワイヤーフレーム表示 [Z]
  3. ポリゴンの削減
    • 右下の立方体のアイコンをクリックして [Properties]
      decimate2.png
    • スパナのアイコンをクリックして、[Decimate]
      decimate1.png
      • Ration を小さくするほど、品質が犠牲になる代わりにポリゴンの数が減る
      • Face Count が、処理後のポリゴン数
      • Apply で実行
  4. obj 形式で保存 [File]-[Export]-[obj]
    export.png
    obj と mtl ができる
    finder.png

Three.js で 3D Model を表示する

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /ThreeJSExam/3dmodel.html


(マウスでグリグリ動くはず)

https://github.com/kagyuu/ThreeJSExam/blob/master/3dmodel.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>3D Cube</title>
    <style>
        body {
            margin : 0px;
        }
    </style>
</head>
<body>
	<script type="text/javascript" src="three.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="MTLLoader.js" charset="UTF-8"></script>
	<script type="text/javascript" src="OBJMTLLoader.js" charset="UTF-8"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script>

// full screen
var container = document.createElement( 'div' );
document.body.appendChild( container );

// mouse
var mouseX = 0;
var mouseY = 0;

var windowX = window.innerWidth;
var windowY = window.innerHeight;
var windowHalfX = windowX / 2;
var windowHalfY = windowY / 2;

// (1) Scene
var scene = new THREE.Scene();

// (2) Light
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );

var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );

var spotlight = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 2 );
spotlight.target.position.set(0,0,0);
spotlight.position.z = 100;
scene.add(spotlight);

// (3) Camera
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;

// (4) Model
var loader = new THREE.OBJMTLLoader();
loader.addEventListener( 'load', function ( event ) {

	var object = event.content;
	
	// Blender の距離 1 と three.js の距離 1 の換算は不明。実際に動かしてみて object.scale で調整する
    //object.scale.x = 0.1;
    //object.scale.y = 0.1;
    //object.scale.z = 0.1;
	
	scene.add( object );

});
loader.load( 'OSTM_Jason-2.obj', 'OSTM_Jason-2.mtl' );

// xyz軸 (補助線)
var axes = new THREE.AxisHelper(1000);
scene.add( axes );


// (5) WebGL Renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x000000);
renderer.clear(true);
container.appendChild( renderer.domElement );

// (6) Animation
function animation() {
	camera.position.x = 100.0 * Math.sin(2.0 * Math.PI * mouseX);
	camera.position.y = 1000.0 * mouseY;
	camera.position.z = 100.0 * Math.cos(2.0 * Math.PI * mouseX);
	
    camera.lookAt(new THREE.Vector3(-1.0 * camera.position.x ,-1.0 * camera.position.y,-1.0 * camera.position.z));
	
    spotlight.position.x = camera.position.x;
	spotlight.position.y = camera.position.y;

    renderer.render( scene, camera );
    requestAnimationFrame(animation)
}

animation();

// (7) Event
$(document).on('mousemove', function(event) {
    mouseX = (event.clientX - windowHalfX) / windowX;
    mouseY = (event.clientY - windowHalfY) / windowY;
});

	</script>
</body>
</html>


HTML


添付ファイル: filedecimate2.png 548件 [詳細] filedecimate1.png 496件 [詳細] filefinder.png 526件 [詳細] fileexport.png 551件 [詳細] fileaura.png 543件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2016-07-07 (木) 22:19:48 (149d)
ISBN10
ISBN13
9784061426061