🎡著作権フリー(CC0)の3dファイル、OBJファイルのドラゴンをthree.jsで読み込むためにはまずデシメートをする

あたり総研

2021年1月2日 12:39

無料のOBJファイルがたくさんあるサイトがあるのでダウンロードする。しかもみたところCC0(著作権フリー)

すべてのスキャン画像は、著作権の制限なくダウンロードし、使用することができます。

https://threedscans.com/info/

こんな感じで彫刻がたくさんおいてあるサイト

ドラゴンをダウンロード

非常にでかい、ただこれを大**きさを小さくして容量が変わるわけではな**いので、ポリゴンを減らす必要があり

容量は１９MBになったがまだ容量でかいのでさらにデシメートする。とにかくデシメート

ダウンロードできたのはOBJだけだったので、OBJのサンプルを動かせるようにする。ここに昔サンプルを作った

きもちわるいが、これを置き換えれば済むのだろうか。

前回の奥義を使いGITHUBの入れ物を使おうとしたが、本命の石膏像は４１MBあってGITHUB様の２５GBの制限を超えてしまうので、こちらの骸骨君を使うことにした。

なんか、骸骨っぽいものは表示されている。あと柄

Three.jsのコードを見てみる

ちょいと正面にして、すこし大きくしたい。物理的におっきくするか、カメラを移動させるか、回転させるかみたいなことだと思う。動いているサンプルなので、原点を変えればいいに違いない。

			import * as THREE from 'https://unpkg.com/three/build/three.module.js';
			import { OBJLoader } from 'https://unpkg.com/three/examples/jsm/loaders/OBJLoader.js';
			let container;
			let camera, scene, renderer;
			let mouseX = 0, mouseY = 0;
			let windowHalfX = window.innerWidth / 2;
			let windowHalfY = window.innerHeight / 2;
			let object;
			init();
			animate();

			function init() {
				container = document.createElement( 'div' );
				document.body.appendChild( container );
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
				camera.position.z = 250;
				// scene
				scene = new THREE.Scene();
				const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
				scene.add( ambientLight );
				const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
				camera.add( pointLight );
				scene.add( camera );
				// manager
				function loadModel() {
					object.traverse( function ( child ) {
						if ( child.isMesh ) child.material.map = texture;
					} );
					object.position.y = - 95;
					scene.add( object );
				}
				const manager = new THREE.LoadingManager( loadModel );
				manager.onProgress = function ( item, loaded, total ) {
					console.log( item, loaded, total );
				};
				// texture
				const textureLoader = new THREE.TextureLoader( manager );
				const texture = textureLoader.load( 'https://threejs.org/examples/textures/uv_grid_opengl.jpg' );
				// model
				function onProgress( xhr ) {
					if ( xhr.lengthComputable ) {
						const percentComplete = xhr.loaded / xhr.total * 100;
						console.log( 'model ' + Math.round( percentComplete, 2 ) + '% downloaded' );
					}
				}
				function onError() {}
				const loader = new OBJLoader( manager );
				loader.load( 'https://raw.githubusercontent.com/setapolo/fbxes/main/12140_Skull_v3_L2.obj', function ( obj ) {
					object = obj;
				}, onProgress, onError );
				//
				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );
				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				//
				window.addEventListener( 'resize', onWindowResize, false );
			}
			function onWindowResize() {
				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
			}
			function onDocumentMouseMove( event ) {
				mouseX = ( event.clientX - windowHalfX ) / 2;
				mouseY = ( event.clientY - windowHalfY ) / 2;
			}
			//
			function animate() {
				requestAnimationFrame( animate );
				render();
			}
			function render() {
				camera.position.x += ( mouseX - camera.position.x ) * .05;
				camera.position.y += ( - mouseY - camera.position.y ) * .05;
				camera.lookAt( scene.position );
				renderer.render( scene, camera );
			}