Skip to content

Instantly share code, notes, and snippets.

@kjunichi
Last active October 18, 2016 07:14
Show Gist options
  • Save kjunichi/b243c6dc09854facd368bd154438eb48 to your computer and use it in GitHub Desktop.
Save kjunichi/b243c6dc09854facd368bd154438eb48 to your computer and use it in GitHub Desktop.
2016/10/18

Three.jsで複数のmeshを連携して扱う

const root = new THREE.Object3D();

// 部分的にお回転操作を行うパーツは別途Object3Dを用意して、この配下にaddする。
const frontLeftWheelRoot = new THREE.Object3D();

// 非同期で各パーツが読み込まれることに注意


// THREE.MultiMaterialでマテリアルを生成する。
const bodyFaceMaterial = new THREE.MultiMaterial( bodyMaterials );
const wheelFaceMaterial = new THREE.MultiMaterial( wheelMaterials );

bodyMesh = new THREE.Mesh( bodyGeometry, bodyFaceMaterial );
// パーツ間で大きさをそろえる。
const s = modelScale;
bodyMesh.scale.set( s, s, s );

root.add( bodyMesh );

const delta = new THREE.Vector3();

// front left wheel

delta.multiplyVectors( wheelOffset, new THREE.Vector3( s, s, s ) );

frontLeftWheelRoot.position.add( delta );

frontLeftWheelMesh = new THREE.Mesh( wheelGeometry, wheelFaceMaterial );
frontLeftWheelMesh.scale.set( s, s, s );

frontLeftWheelRoot.add( frontLeftWheelMesh );
root.add( frontLeftWheelRoot );

全体を動かす

root.position.x += Math.sin( this.carOrientation ) * forwardDelta;
root.position.z += Math.cos( this.carOrientation ) * forwardDelta;

multiplyVectors

外積?

行列やベクトルにベクトルを掛ける

バイナリのローダー解析

THREE.CubeCamera

veyron.loadPartsBinary( "obj/veyron/parts/veyron_body_bin.js", "obj/veyron/parts/veyron_wheel_bin.js" );

this.loadPartsBinary = function ( bodyURL, wheelURL ) {

	var loader = new THREE.BinaryLoader();

	loader.load( bodyURL, function( geometry, materials ) {

		createBody( geometry, materials )

	} );
	loader.load( wheelURL, function( geometry, materials ) {

		createWheels( geometry, materials )

	} );

};

THREE.BinaryLoader

load: function ( url, onLoad, onProgress, onError ) {

var jsonloader = new THREE.XHRLoader( this.manager ); jsonloader.load( url, function ( data ) { var json = JSON.parse( data );

var bufferLoader = new THREE.XHRLoader( scope.manager );
bufferLoader.setResponseType( 'arraybuffer' );
bufferLoader.load( bufferUrl, function ( bufData ) {

  scope.parse( bufData, onLoad, texturePath, json.materials );

}, onProgress, onError );

THREE.Geometry THREE.Geometry.call( this ); parseの内部でTHREE.Geometryを継承したModelを作成

parseMetaData init_vertices init_normals handlePadding init_uvs

関連

アクセス解析タグ

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment