threejs加载.Fbx .OBJ 3D模型文件-Toy模板网

这篇具有很好参考价值的文章主要介绍了threejs加载.Fbx .OBJ 3D模型文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

threejs加载.Fbx .OBJ 3D模型文件

文件下载与启动

在threejs官网下载threejs的文件,可以选择直接下载，也可以跳转到GitHub拉取

threejs加载.Fbx .OBJ 3D模型文件

拉取下来的完整文件就是这个样子

threejs加载.Fbx .OBJ 3D模型文件

拉取成功后我们在本地安装启动服务，这样就能很快速的查看threejs的各种例子了

npm i -g http-server
http-server

可以先看看官网里的例子，你想要的东西官方里面都有

开始开发

后期在开发的时候需要用到build和jsm文件，我们可以单独放进demo里这样比较方便我们使用

threejs加载.Fbx .OBJ 3D模型文件

下面我们直接上代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>FBXLoader3D模型展示</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script type="importmap">
        {
            "imports": {
                "three": "./build/three.module.js"
            }
        }
    </script>
    <script type="module">
        import * as THREE from 'three';
        import Stats from './jsm/libs/stats.module.js';
        import { OrbitControls } from './jsm/controls/OrbitControls.js';
        import { FBXLoader } from './jsm/loaders/FBXLoader.js'

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

        init();
        animate();
        function init() {
            container = document.createElement('div');
            document.body.appendChild(container);
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .2, 1000);
            camera.position.set(0, 1.6, 0);
            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, 20, 0);
            scene.add(light);
            light = new THREE.DirectionalLight(0xffffff);
            light.position.set(0, 20, 10);
            light.castShadow = true;
            scene.add(light);
            var grid = new THREE.GridHelper(5, 20, 0x000000, 0x000000);
            grid.material.opacity = 0.2;
            grid.material.transparent = true;
            scene.add(grid);
            // model

            var loader = new FBXLoader();
            loader.load('fbx/demo1.fbx', function (object) {
                undefined
                object.traverse(function (child) {
                    undefined
                    if (child.isMesh) {
                        undefined
                        child.castShadow = true;
                        child.receiveShadow = true;
                    }
                });
                object.rotation.y = Math.PI / 2;
                //object.rotation.x = -Math.PI/2 - Math.PI/12;
                object.position.set(0, -0.15, 0.3);
                console.log(object.position);
                object.scale.set(.003, .003, .003);
                scene.add(object);
            });

            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;
            container.appendChild(renderer.domElement);
            controls = new OrbitControls(camera, renderer.domElement);
            controls.target.set(0, 0, 0);
            controls.update();
            window.addEventListener('resize', onWindowResize, false);

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

        function onWindowResize() {
            undefined
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        //

        function animate() {
            undefined
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
            stats.update();
        }
    </script>
</body>
</html>