ThreeJS编写载入gltf模型源码【3D货车模型动画】

使用Three.JS开发网页载入gltf模型显示,包括动画,载入得模型包括3D货车gltf模型,3D小黄鸭模型,3D人行走动画模型,3D怪兽模型,3D轮廓边模型等,完全不需要安装任何插件,输入打开网址就可以查看网上3D产品在线展示。

展示源码功能包括:

1.场景默认显示带贴图质感和动画得3D货车在行驶;

2.可以通过鼠标控制视点切换,鼠标按下旋转视点,滑轮缩放,整个场景的背景是全景黑色背景;

3.右上角具有一个控制菜单,可以选择显示gltf格式模型,可以选择不同材质纹理贴图格式的模型,支持切换测试载入glb格式【gltf的二进制格式模型】;

注:本地预览建议部署WEB服务器,配置localhost/127.0.0.1等网络访问地址运行,建议用火狐浏览器,谷歌浏览器等。

ThreeJS编写载入gltf模型源码【3D货车模型动画】

核心源码如下

//使用载入gltf模型封装类
loader = new GLTFLoader();

var dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( ‘js/libs/draco/gltf/’ );
loader.setDRACOLoader( dracoLoader );

loader.setDDSLoader( new DDSLoader() );

var url = sceneInfo.url.replace( /%s/g, state.extension );

if ( state.extension === ‘glTF-Binary’ ) {

url = url.replace( ‘.gltf’, ‘.glb’ );

}

var loadStartTime = performance.now();

loader.load( url, function ( data ) {

gltf = data;

var object = gltf.scene;

console.info( ‘Load time: ‘ + ( performance.now() – loadStartTime ).toFixed( 2 ) + ‘ ms.’ );

if ( sceneInfo.cameraPos ) {

camera.position.copy( sceneInfo.cameraPos );

}

if ( sceneInfo.center ) {

orbitControls.target.copy( sceneInfo.center );

}

if ( sceneInfo.objectPosition ) {

object.position.copy( sceneInfo.objectPosition );

if ( spot1 ) {

spot1.target.position.copy( sceneInfo.objectPosition );

}

}

if ( sceneInfo.objectRotation ) {

object.rotation.copy( sceneInfo.objectRotation );

}

if ( sceneInfo.objectScale ) {

object.scale.copy( sceneInfo.objectScale );

}

if ( sceneInfo.addEnvMap ) {

object.traverse( function ( node ) {

if ( node.material && ( node.material.isMeshStandardMaterial ||
( node.material.isShaderMaterial && node.material.envMap !== undefined ) ) ) {

node.material.envMap = envMap;
node.material.envMapIntensity = 1.5; // boombox seems too dark otherwise

}

} );

scene.background = background;

}

object.traverse( function ( node ) {

if ( node.isMesh || node.isLight ) node.castShadow = true;

} );

var animations = gltf.animations;

if ( animations && animations.length ) {

mixer = new THREE.AnimationMixer( object );

for ( var i = 0; i < animations.length; i ++ ) {

var animation = animations[ i ];

// There’s .3333 seconds junk at the tail of the Monster animation that
// keeps it from looping cleanly. Clip it at 3 seconds
if ( sceneInfo.animationTime ) {

animation.duration = sceneInfo.animationTime;

}

var action = mixer.clipAction( animation );

if ( state.playAnimation ) action.play();

}

}

scene.add( object );
onWindowResize();

}, undefined, function ( error ) {

console.error( error );

} );

WEBGL学习网(WebGLStudy.COM)专注提供WebGL 、ThreeJS、BabylonJS等WEB3D开发案例源码下载。
声明信息:
1. 本站部分资源来源于用户上传和网络,如有侵权请邮件联系站长:1218436398@qq.com!我们将尽快处理。
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源打赏售价用于赞助本站提供的服务支出(包括不限服务器、网络带宽等费用支出)!
7.欢迎加QQ群学习交流:549297468 ,或者搜索微信公众号:WebGL学习网
WEBGL学习网 » ThreeJS编写载入gltf模型源码【3D货车模型动画】

发表评论

提供优质的WebGL、ThreeJS源码

立即查看 了解详情