记录一次关于3D模型.fbx文件和.stl文件three.js的的使用

首先先引入需要的组件

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
import { MenuUnfoldOutlined } from '@ant-design/icons';
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'

再写一个容纳模型的盒子

   <div className={styles.modelViewDiv} id="modelViewDiv" style={{ overflow: 'hidden', marginLeft: -166 }}></div>

接着就可以写关于模型的代码了（这个是关于.fbx类型的文件）

    const clock = new THREE.Clock();

    let mixer;
    //sstl为stl模型路径，fbx为fbx模型路径，num为我个人想调整的模型方向的相关值
    function init(sstl, fbx, num) {

        const container = document.getElementById("modelViewDiv");


        camera = new THREE.PerspectiveCamera(45, 1600 / 800, 0.1, 2000);
        camera.position.set(100, 200, 300);

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

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

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

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

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

        scene.add(mesh);

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


        // model
        const loader1 = new STLLoader();
        loader1.load(sstl, function (geometry) {
            //创建纹理
            var mat = new THREE.MeshLambertMaterial({ color: 0x00ffff });
            var mesh = new THREE.Mesh(geometry, mat);
            // mesh.rotation.z = Math.PI /1;
            // mesh.rotation.y= Math.PI / 3;
            // group.translateX(50); // 向右移动50
            // group.translateZ(-50); // 向屏幕内移动50
            let group = new THREE.Group()
            group.add(mesh)
            mesh.position.set(0, 80, 120);
            mesh.scale.set(24, 24, 24); //缩放
            mesh.rotation.x = -Math.PI / 6;
            mesh.rotation.z = -Math.PI
            group.rotation.y = -Math.PI * num
            geometry.center(); //居中显示
            scene.add(group);
        });
        const loader = new FBXLoader();
        // const path = require('./M1A2/M1A2.FBX');
        loader.load(fbx, function (object) {

            object.traverse(function (child) {
                if (child.isMesh) {
                    child.castShadow = true;
                    child.receiveShadow = true;
                }

            });
            object.position.set(0, 20, 0)
            object.scale.set(15, 15, 15)
            scene.add(object);
            setSpinning(false)
        });


        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth * 0.7, window.innerHeight * 0.7);
        renderer.shadowMap.enabled = true;
        container.appendChild(renderer.domElement);

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.target.set(0, 100, 0);
        controls.update();
        window.addEventListener('resize', onWindowResize);

    }

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

    function animate() {

        requestAnimationFrame(animate);

        const delta = clock.getDelta();

        if (mixer) mixer.update(delta);

        renderer.render(scene, camera);

        // stats.update();

    }

    const draw = () => {
        animate()
    }