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

threejs加载.Fbx .OBJ 3D模型文件文件下载与启动在threejs官网下载threejs的文件,可以选择直接下载，也可以跳转到GitHub拉取拉取下来的完整文件就是这个样子拉取成功后我们在本地安装启动服务，这样就能很快速的查看threejs的各种例子了npm i -g http-serverhttp-server可以先看看官网里的例子，你想要的东西官方里面都有开始开发后期在开发的时候

李归尘

9524人浏览 · 2022-02-09 11:30:46

李归尘 · 2022-02-09 11:30:46 发布

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

文件下载与启动

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

官网导航

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

threejs完整包

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

npm i -g http-server
http-server

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

开始开发

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

build与jsm

下面我们直接上代码

<!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>