必威体育Betway必威体育官网
当前位置：首页 > IT技术

Three.js fbx文件导入

时间:2019-07-16 22:12:09来源:IT技术作者:seo实验室小编阅读:52次「手机版」
　

fbx

源码 下载

https://download.csdn.net/download/qq_34206863/10859181

其实可以先看看官方案例

你想要的东西 官方里面都有，就看你找不找得到了。。。。

话不多说

我们先看看这个例子吧

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - FBX loader</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, Minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #000;
				color: #fff;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display:block;
			}
			#info a {
				color: #046;
				font-weight: bold;
			}
		</style>
	</head>

	<body>
		<p id="info">
			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - FBXLoader<br />
			Character and animation from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">Mixamo</a>
		</p>

		<script src="../build/three.js"></script>

		<script src="js/libs/inflate.min.js"></script>
		<script src="js/loaders/FBXLoader.js"></script>

		<script src="js/controls/OrbitControls.js"></script>

		<script src="js/Detector.js"></script>
		<script src="js/libs/stats.min.js"></script>

		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLmessage();

			var container, stats, controls;
			var camera, scene, renderer, light;

			var clock = new THREE.Clock();

			var mixers = [];

			init();
			animate();

			function init() {

				container = document.createElement( 'p' );
				document.body.APPendChild( container );

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
				camera.position.set( 100, 200, 300 );

				controls = new THREE.OrbitControls( camera );
				controls.target.set( 0, 100, 0 );
				controls.update();

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xa0a0a0 );
				scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );

				light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
				light.position.set( 0, 200, 0 );
				scene.add( light );

				light = new THREE.DirectionalLight( 0xffffff );
				light.position.set( 0, 200, 100 );
				light.castShadow = true;
				light.shadow.camera.top = 180;
				light.shadow.camera.bottom = -100;
				light.shadow.camera.left = -120;
				light.shadow.camera.right = 120;
				scene.add( light );

				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );

				// ground
				var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
				mesh.rotation.x = - Math.PI / 2;
				mesh.receiveShadow = true;
				scene.add( mesh );

				var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
				grid.material.opacity = 0.2;
				grid.material.transparent = true;
				scene.add( grid );

				// model
				var loader = new THREE.FBXLoader();
				loader.load( 'models/fbx/Samba Dancing.fbx', function ( object ) {

					object.mixer = new THREE.AnimationMixer( object );
					mixers.push( object.mixer );

					var action = object.mixer.clipAction( object.animations[ 0 ] );
					action.play();

					object.traverse( function ( child ) {

						if ( child.isMesh ) {

							child.castShadow = true;
							child.receiveShadow = true;

						}

					} );

					scene.add( object );

				} );

				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.shadowMap.enabled = true;
				container.appendChild( renderer.domElement );

				window.addeventlistener( 'resize', onWindowResize, false );

				// stats
				stats = new Stats();
				container.appendChild( stats.dom );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				if ( mixers.length > 0 ) {

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

						mixers[ i ].update( clock.getDelta() );

					}

				}

				renderer.render( scene, camera );

				stats.update();

			}

		</script>

	</body>
</html>

首先我们找到这个例子，然后对其解析，化为自己的知识

image.png

我们看到引入的js库有以上几类

首当其先的为three.js

然后是inflate.min.js，我也不知道这是干撒的，但是当我百度这个找到了后，怀着崇敬的心情以及准备自我翻译作用的时候，我看到了汉字+五十音的时候，心中崩腾过了emmm。2只羊驼。只好勉强看汉字，应该是压缩用的吧。。。知道的麻烦给个准信。。。

image.png

接着是FBXLoader.js库，看名字就知道是fbx文件的加载库

所以，我们这个时候应该看看源码。

image.png

恩，一来就看到要求fbx格式以及一串的支持。

看正文

( function () {
//构造函数
	THREE.FBXLoader = function ( manager ) {

		this.manager = ( manager !== undefined ) "https://img-blog.csdnimg.cn/20181218165633466" alt="image.png">
这就是它的介绍，至于源码有兴趣的看看吧。
剩下的库有兴趣自己看看源码吧，找不到，去three.js官网下载压缩包，撒都有。
然后我们开始了解如何构造的
开始
上图emmm，不用说了
兼容
这句我想知道什么意思，查了一下原来是检查兼容性。一句话就解决了。。给个赞！
container = document.createElement( 'p' );
        document.body.appendChild( container );
//相机
        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
        camera.position.set( 100, 200, 300 );
//控制器     相应鼠标左键右键点击
        controls = new THREE.OrbitControls( camera );
        controls.target.set( 0, 100, 0 );
        controls.update();
//舞台（场景）
        scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xa0a0a0 );
        scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
//灯光
        light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
        light.position.set( 0, 200, 0 );
        scene.add( light );

        light = new THREE.DirectionalLight( 0xffffff );
        light.position.set( 0, 200, 100 );
        light.castShadow = true;
        light.shadow.camera.top = 180;
        light.shadow.camera.bottom = -100;
        light.shadow.camera.left = -120;
        light.shadow.camera.right = 120;
        scene.add( light );



// ground
        var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
        mesh.rotation.x = - Math.PI / 2;
        mesh.receiveShadow = true;
        scene.add( mesh );

        var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
        grid.material.opacity = 0.2;
        grid.material.transparent = true;
        scene.add( grid );



明显的构建广场。最后就是加载model
// model
      //得到加载器
        var loader = new THREE.FBXLoader();
     //开始加载，并且异步加载，别问我，我也不知道，方法体里参数是
    //(url,onLoad,onprogress,onERROR)
    //所以对应咯
        loader.load( '../fbx/aa.FBX', function ( object ) {
            //动画
            object.mixer = new THREE.AnimationMixer( object );
            mixers.push( object.mixer )；
            var action = object.mixer.clipAction( object.animations[ 0 ] );
            action.play();
            //那个，纹理maybe，理解错了 请指出
            object.traverse( function ( child ) {

                if ( child.isMesh ) {

                    child.castShadow = true;
                    child.receiveShadow = true;

                }

            } );

            scene.add( object );

        } );



好了，看不看得懂，不要紧，要懂得基本操作就好了，是在不行，自己去例子里面现学现卖。当然懂了最好
最后我们实际运行一下。
这鱼是在游的
ok，一切完美。
对了这些代码需要在服务器上执行，没有服务器？你的ide没有自带么？(webstorm)
最后，给个“毒”福利。
希望你们在看例子的时候
https://threejs.org/examples/#webgl_loader_fbx
能听这首歌  Its love  -张碧晨
很带感！！！

        
相关阅读


速达3000 自动导入工具
版本更新:
2019-01-31:增加功能 库存明细自动导出或打印,每个货品打印一份或一个文件
   本工具的主要用途就是将数据导入的速
批量导入的详细设计说明
在后台设计产品中，批量导入功能要被频繁地使用，批量导入功能设计的好，可以提高使用者的效率。一、批量导入功能的需求分析批量导入的
Oracle命令行导入导出dmp文件（命令行exp/imp）（1）
首先可以通过 –help命令查看命令行语句的关键字信息：
如以下的exp -help(下图仅显示本命令部分信息)

以及：imp-help(下图仅显示本
sqlyog导入excel数据的方法步骤
在Excel中录入好数据以后可能会需要把数据给导入到sqlyog里面，具体要怎么导入excel数据呢?下面是由seo实验室小编分享的sqlyog导入
Excel中表格进行电话导入手机通讯录的操作方法
这种适用于将Excel或者电子表格中的通讯录或者是其它数据批量的导入到手机通讯录当中。今天，seo实验室小编就教大家在Excel中表格
赞()
分享到:

猜你喜欢

栏目导航

推荐阅读

热门阅读

seo实验室提供seo优化服务，有网站优化、网站建设、运营推广等需求请联系我们!
Copyright © 2001-2017 .seo实验室 版权所有 网站地图