maptalks / maptalks.three

A maptalks layer to render with three.js.
https://deyihu.github.io/maptalks.three.website/
MIT License
567 stars 129 forks source link

骨骼glb模型导入后,无法正常显示(面会出现扭曲和错乱) #642

Open jsmask opened 1 month ago

jsmask commented 1 month ago

maptalks-three

把带有骨骼的模型导入进去,面会出现扭曲和错乱,而把一个没有骨骼的模型导入就显示正常,应该部分模型才会这样,因为官方机器人的骨骼却是正常的,暂时不明白什么原因。 代码如下:

function addGltf() {
    clock = new THREE.Clock();
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath("/draco/");
    let loader = new GLTFLoader();
    loader.setDRACOLoader(dracoLoader);
    loader.load('/models/pikachu.glb',(gltf) => {
        animations = gltf.animations;
        model = gltf.scene;
        model.rotation.x = Math.PI / 2;
        model.rotation.y = -Math.PI / 3;
        model.scale.setScalar(.1);
        scene.add(model)
        addAnimations()

        activeAction = actions["Idle"];
        activeAction.play()
        model.position.copy(threeLayer.coordinateToVector3(map.getCenter()));
        animate();
    });
}

function addAnimations() {
    mixer = new THREE.AnimationMixer(model);
    actions = {};

    for (let i = 0; i < animations.length; i++) {
        let clip = animations[i];
        let action = mixer.clipAction(clip);
        actions[clip.name] = action;
        action.clampWhenFinished = true;
        action.loop = THREE.Loop;
    }
}

function animate() {
    let dt = clock.getDelta();
    if (mixer) mixer.update(dt);
    requestAnimationFrame(animate);
    if (threeLayer._needsUpdate) {
        threeLayer.redraw();
    }
}

模型资源地址: https://sketchfab.com/3d-models/pikachu-37c740f674cd4719a1d1d2970bbe8c30