HTML three.js 3D Model

2024-12-042024
92.4% (338.3/366)
December
10.8% (3.3/31)
Week 49
33.6% (2.3/7)
Day 04 Wed
35.2% (8.4/24)

訪問者

total: 21381
today: 1
yesterday: 1
now: 1

↑

更新

MenuBar

3D Model の取り扱い
素材を OBJ, MLT 形式へ変換する
Three.js で 3D Model を表示する

3D Model の取り扱い †

a graph image

Three.js は、JSON 形式の 3D Model を読み込める
- 各種3D製作ソフトのファイルを Three.js 用 JSON に変換する方法まとめ, http://psychedesire.blogspot.jp/2012/02/3d-threejs.html
- blender の JSON 形式 Export plugin, http://www.soft-syokunin.com/?p=901
実行時に obj 形式のファイルを読み込み JSON 形式に変換する標準ライブラリがある
- mrdoob-tree.js-2524525/examples/js/loaders/OBJLoader.js
- mrdoob-tree.js-2524525/examples/js/loaders/OBJMTLLoader.js
- obj (形状), mtl (マテリアル・表面)
- JSON にするよりも、こちらのほうが穏当でしょうな
3D編集ソフト
- Blender(Free), http://www.blender.org/
- FBX Converter(Free), http://www.autodesk.com/products/fbx/overview
- Blender は fbx 形式のファイルを読めないので、編集する場合には FBX Converter で変換する
素材集
- 無料で3Dモデルをダウンロードできる60のサイト, http://createlier.sitemix.jp/blog/free-3d-model-60sites/
- NASA, http://www.nasa.gov/multimedia/3d_resources/index.html

↑

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

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

最近のモデルは、細かすぎてなかなかポリゴンが減らない。最新の Aura 衛星 (オゾン層観測) では、どうしても機械的操作では 8 MB 以下にならなかった
ちょっと古い OSTM Jason 衛星 (海面観測) に差し替え。これでも 4.8 MB なんだけどね

↑

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

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

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

HTML three.js 3D Model

目次

訪問者

更新

最新の10件

人気の10件

MenuBar

3D Model の取り扱い †

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

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

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