Blender camera not looking in the right direction while animating in threejs

Questions
, ,
1

Hello, I have a baked model which is exported from Blender with camera animation. When importing the model in gltf viewer, the Blender camera animation works fine but using threejs it is constantly looking in the direction of y axis.
Can anyone help me with this?

Added a base camera to record the activity of the blender camera

BakedSceneCamera.glb (178.3 KB)


/**
 * Canvas
 */
const canvas = document.querySelector('canvas.webgl')

/**
 * Scene
 */
const scene = new THREE.Scene()
// scene.background = new THREE.Color(0x545454);

/**
 * Texture Loader
 */
const textureLoader = new THREE.TextureLoader()

/**
 * GLTF Loader
 */
const gltfLoader = new GLTFLoader()

/**
 * Model
 */
let model, mixer, action, blenderCamera, controls;
gltfLoader.load(
    '/models/BakedScene/BakedSceneCamera.glb',
    (gltf) => {
        model = gltf.scene

        blenderCamera = gltf.cameras[0]

        const helper = new THREE.CameraHelper(blenderCamera);
        scene.add(helper)

        // Animation
        mixer = new THREE.AnimationMixer(blenderCamera)
        action = mixer.clipAction(gltf.animations[0])

        scene.add(model)
        scene.add(blenderCamera)
        // scene.add(fireflies)
    }
)

/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () => {
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * Base Camera
 */
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.set(9, 8, 11)
camera.lookAt(0, 0, 0)
scene.add(camera)

// Animating camera 
const animateCamera = e => {
    if (model && action) {
        action.play()
    }
}

window.addEventListener('wheel', animateCamera);

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true,
    alpha: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.outputEncoding = THREE.sRGBEncoding

/**
 * Animate
 */
const clock = new THREE.Clock()

const tick = (time) => {

    // Update mixer
    if (mixer) {
        mixer.update(clock.getDelta())
    }

    // Render
    if (blenderCamera) {
        renderer.render(scene, camera)
    }

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()
1 Like
2

hi total nobe here , did you finde any solution yet?thanks

3

because the xyz coordinates of blender and threejs are different