@react-three/cannon 挂钩将 matrixAutoUpdate 的值更改为 false

Question

我在让相机跟随物体时遇到了一些困难。该对象正在使用来自 @react-three/cannon 的钩子 useSphere。我的球体移动得很好，但相机没有跟随。我将它缩小到我的球体位置没有被更新，因为 matrixAutoUpdate 被设置为 false。我不确定为什么会这样，因为在我测试过的其他 Cannon 示例中，matrixAutoUpdate 保持正确。任何想法都会很棒，我被困了一段时间，在互联网上找不到任何东西。下面是一些代码

import React from "react";
import {useFrame, useThree} from "@react-three/fiber";
import {useKeyboardControls} from "../hooks/useKeyboardControls";
import {FPVControls} from "./FPVControls";
import {Vector3} from "three";
import {useSphere} from "@react-three/cannon";

const SPEED = 6

export const Player = (props) => {
    const {camera} = useThree()

    //sphere movement controls
    const {
        moveForward,
        moveBackward,
        moveLeft,
        moveRight,
        jump
    } = useKeyboardControls()


    const [ref, api] = useSphere(() => ({
        mass: 1,
        type: 'Dynamic',
        ...props
    }))


    useFrame(() => {
        camera.position.copy(ref.current.position)
        const direction = new Vector3()

        const frontVector = new Vector3(
            0,
            0,
            (moveBackward ? 1 : 0) - (moveForward ? 1 : 0)
        )

        const sideVector = new Vector3(
            (moveLeft ? 1 : 0) - (moveRight ? 1 : 0),
            0,
            0
        )

        direction
            .subVectors(frontVector, sideVector)
            .normalize()
            .multiplyScalar(SPEED)
            .applyEuler(camera.rotation)

        api.velocity.set(direction.x, 0, direction.z)
    })

    console.log("ref position", ref)

    return (
        <>
            <FPVControls/>
            <mesh ref={ref}>
                <sphereGeometry  />
                <meshStandardMaterial color={"#f30707"} />
            </mesh>
        </>
    )
}

Answer 1

我发现这对类似的问题很有帮助也许它可以帮助你:

a conversation about a similar issue

这个类似的问题是关于一个位置没有被使用 cannon hooks 更新，关键是订阅 api 位置并将其存储在我理解的 ref 中。

这里有一个AI组件中更精确的例子（第69行，你可以在第79行找到ref）：

usage example

@react-three/cannon 挂钩将 matrixAutoUpdate 的值更改为 false

@react-three/cannon hooks changing value of matrixAutoUpdate to false

javascript

three.js

cannon.js

reactjs

react-three-fiber