web mmd viewer
1.0.0
نموذج لمشروع باستخدام three.js والمحرك العالمي
من خلال محرك العالم، يمكنك بناء مشهد لـ three.js في شكل تعريفي.
البرمجة النصية ممكنة أيضًا من خلال نظام مراسلة المحرك العالمي - المشابه لنظام Unity
ونتيجة لذلك، يصبح من البديهي جدًا إنشاء مشهد لـ three.js.
// 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 ;
}
}
} ) )
;
}
} 
ائتمان:
ائتمان:
ائتمان:
