web mmd viewer
1.0.0
Ein Beispielprojekt mit three.js und the-world-engine
Mit der World-Engine können Sie eine Szene aus Three.js in deklarativer Form erstellen.
Scripting ist auch über ein The-World-Engine-Messaging-System möglich – ähnlich dem Unity
Dadurch wird es sehr intuitiv, eine Szene aus three.js zu erstellen.
// src/asset/Bootstrapper.ts
export class Bootstrapper extends BaseBootstrapper {
public override run ( ) : SceneBuilder {
//...
return this . sceneBuilder
//...
. withChild ( instantiater . buildGameObject ( "orbit-camera" , new THREE . Vector3 ( 0 , 0 , 40 ) )
. withComponent ( Camera , c => {
c . cameraType = CameraType . Perspective ;
c . fov = 60 ;
c . far = 1500 ;
c . priority = - 1 ;
} )
. withComponent ( OrbitControls , c => {
c . enabled = true ;
c . target = new THREE . Vector3 ( 0 , 14 , 0 ) ;
c . minDistance = 20 ;
c . maxDistance = 100 ;
c . enableDamping = false ;
} )
. getComponent ( Camera , orbitCamera ) )
. withChild ( instantiater . buildGameObject ( "ambient-light" )
. withComponent ( Object3DContainer , c => c . object3D = new THREE . HemisphereLight ( 0xffffff , 0xffffff , 0.3 ) ) )
. withChild ( instantiater . buildGameObject ( "directional-light" , new THREE . Vector3 ( - 20 , 30 , 100 ) )
. withComponent ( Object3DContainer , c => {
const light = new THREE . DirectionalLight ( 0xffffff , 0.5 ) ;
//...
c . object3D = light ;
} )
. getComponent ( Object3DContainer , directionalLight ) )
. withChild ( instantiater . buildGameObject ( "polar-grid-helper" )
. active ( false )
. withComponent ( Object3DContainer , c => c . object3D = new THREE . GridHelper ( 30 , 10 ) ) )
//...
. withChild ( instantiater . buildGameObject ( "mmd-model" )
. withComponent ( Object3DContainer , c => {
c . startCoroutine ( loadAndRun ( ) ) ;
function * loadAndRun ( ) : CoroutineIterator {
//...
const loader = new MMDLoader ( ) ;
let model : THREE . SkinnedMesh < THREE . BufferGeometry , THREE . Material | THREE . Material [ ] > | null = null ;
loader . load ( modelFile , object => model = object , makeProgressUpdate ( "model" , modelLoadingText ) ) ;
yield new WaitUntil ( ( ) => model !== null ) ;
modelLoadingText . innerText = "model loaded" ;
c . object3D = model ;
const threeCamera = DuckThreeCamera . createInterface ( camera . ref ! , false ) . toThreeCamera ( ) ;
let modelAnimation : THREE . AnimationClip | null = null ;
loader . loadAnimation ( vmdFiles as any , model ! ,
object => modelAnimation = object as THREE . AnimationClip , makeProgressUpdate ( "model animation" , modelAnimationLoadingText ) ) ;
yield new WaitUntil ( ( ) => modelAnimation !== null ) ;
modelAnimationLoadingText . innerText = "model animation loaded" ;
let cameraAnimation : THREE . AnimationClip | null = null ;
loader . loadAnimation ( cameraFile , threeCamera ,
object => cameraAnimation = object as THREE . AnimationClip , makeProgressUpdate ( "camera motion" , cameraLoadingText ) ) ;
yield new WaitUntil ( ( ) => cameraAnimation !== null ) ;
cameraLoadingText . innerText = "camera loaded" ;
const helper = new MMDAnimationHelper ( )
. enable ( "physics" , vmdFiles . length < 2 )
. enable ( "cameraAnimation" , true )
. add ( model ! , { animation : modelAnimation ! } )
. add ( threeCamera , { animation : cameraAnimation ! } ) ;
loadingText . remove ( ) ;
yield null ;
for ( ; ; ) {
helper . update ( c . engine . time . deltaTime ) ;
c . updateWorldMatrix ( ) ;
yield null ;
}
}
} ) )
;
}
} 
Kredit:
Kredit:
Kredit:
