js加载fbx模型文件

html

<div class="ui-layout-center">
    <div class="container-div">
        <div class="row" style=" background: #fff;" >
            <div class="ibox float-e-margins" style="margin: 15px;padding: 20px;min-height: 650px;">
                <p class="contain"></p>
                <p class="attach"></p>
                <p class="attach2 row"></p>
            </div>
        </div>
    </div>
</div>

js

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/three.js}"></script>
<script th:src="@{/js/FBXLoader.js}"></script>
<script th:src="@{/js/OrbitControls.js}"></script>
<script th:src="@{/js/stats.min.js}"></script>
<script th:src="@{/js/fflate.min.js}"></script>
<script th:src="@{/js/dat.gui.min.js}"></script>

   function viewFbx(){
        var mixers = [];
        var renderer;
        var drawWidth = 1650; // 初始化模块宽高
        var drawHeight = 800;
        var modelLocation = $("#modelLocation").val();
        function initRender() {
            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(drawWidth, drawHeight);
            //告诉渲染器需要阴影效果
            renderer.setClearColor(0xeeeeee);
            $(".draw").append(renderer.domElement);
            renderer.setFaceCulling(THREE.CullFaceNone, THREE.FrontFaceDirectionCW);
        }
        var camera;
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, drawWidth / drawHeight, 0.1, 1000);
            camera.position.set(0, 40, 50);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
        }
        var scene;
        function initScene() {
            scene = new THREE.Scene();
        }
        //初始化dat.GUI简化试验流程
        var gui;
        function initGui() {
            //声明一个保存需求修改的相关数据的对象
            gui = {};
            var datGui = new dat.GUI();
            //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
        }
        var light;
        function initLight() {
            scene.add(new THREE.AmbientLight(0x444444));
            light = new THREE.DirectionalLight(0xffffff);
            light.position.set(-50, 20, 50);
            light.castShadow = true; //告诉平行光需要开启阴影投射
            scene.add(light);
            light2 = new THREE.DirectionalLight(0xffffff);
            light2.position.set(50, 100, 50);
            light2.castShadow = true; //告诉平行光需要开启阴影投射
            scene.add(light2);
        }
        function initModel(url) {
            var loader = new THREE.FBXLoader();
            loader.load(url, function (object) {
                object.mixer = new THREE.AnimationMixer(object);
                mixers.push(object.mixer);
                object.traverse(function (child) {
                    if (child.isMesh) {
                        child.castShadow = true;
                        child.receiveShadow = true;
                    }
                });
                scene.add(object);
            });
        }

        //初始化性能插件
        var stats;
        function initStats() {
            stats = new Stats();
        }
        //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
        var controls;
        function initControls() {
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            // 如果使用animate方法时，将此函数删除
            //controls.addEventListener( 'change', render );
            // 使动画循环使用时阻尼或自转 意思是否有惯性
            controls.enableDamping = true;
            //动态阻尼系数 就是鼠标拖拽旋转灵敏度
            //controls.dampingFactor = 0.25;
            controls.enableZoom = true; //是否可以缩放
            controls.autoRotate = true; //是否自动旋转
            controls.autoRotateSpeed = 0.5;
            controls.minDistance = 2; //设置相机距离原点的最远距离
            controls.maxDistance = 200; //设置相机距离原点的最远距离
            controls.enablePan = true; //是否开启右键拖拽
        }

        function render() {
            renderer.render(scene, camera);
        }

        //窗口变动触发的函数
        function onWindowResize() {
            camera.aspect = drawWidth / drawHeight;
            camera.updateProjectionMatrix();
            render();
            renderer.setSize(drawWidth, drawHeight);
        }

        function animate() {
            render(); //更新控制器
            stats.update(); //更新性能插件
            controls.update();
            requestAnimationFrame(animate);
        }

                initGui();
                initRender();
                initScene();
                initCamera();
                initLight();
                initModel(modelLocation);
                initControls();
                initStats();
                animate();
                window.onresize = onWindowResize;
    }