我正在尝试重新创建一个名为“轨道”的小游戏(只是为了好玩)。在这个游戏中,玩家将一个圆圈射入竞技场。该圆圈停在竞技场中的某个位置并扩大尺寸,直到与竞技场边界或另一个圆圈碰撞。 (见下图)
我遇到的问题是,当圆扩大时,应用于圆的刚体尺寸不会增加。它只是保持我第一次创建刚体时的大小。
所以问题是:如何重新渲染刚体或动态更新其尺寸? 我正在使用 React-Three-Fiber 和 Rapier JS。
目前我尝试使用“args”属性设置圆的初始大小,然后使用刚体上的“scale”属性更改大小。 “scale”正在使用“state”,因此它确实更新了形状,而不是刚体......
这是我的代码,以便您可以更好地理解我想告诉您的内容
import { useRef, useState } from "react";
import { useFrame } from "@react-three/fiber";
import { RigidBody } from "@react-three/rapier";
const Obstacle = ({
size = [4,4,2,32],
position = [0, 0, 0],
color = "red",
id,
hasCollided = false
}) => {
const rigidBody = useRef();
const obstacle = useRef();
const [scale, setScale] = useState(1);
useFrame(() => {
if (obstacle.current.collided == false) {
setScale(scale + 0.1);
}
});
return (
<RigidBody
ref={rigidBody}
colliders="hull"
friction={0}
restitution={1.3}
type="fixed"
position={position}
ccd={true}
onCollisionEnter={() => obstacle.current.collided = true}
scale={[scale, 1, scale]}
canSleep={false}
>
<mesh
ref={obstacle}
collided={hasCollided}
>
<cylinderGeometry args={size} />
<meshStandardMaterial color={color} />
</mesh>
</RigidBody>
);
}
export default Obstacle;
我尝试了多种方法,例如确保刚体无法睡眠,或者更改刚体的类型,更改 args 属性而不是缩放属性,但没有任何效果。哦,如果改变我的圆的初始大小,刚体改变它的大小就好了,问题是当试图在运行时改变它时
如果有人能告诉我如何在运行时重新渲染或更新刚体,我将不胜感激!
const [ref, api] = useRigidBody(() => ({ type: 'dynamic', position: [0,
2, 0], mass: 1, ...props }));
const scale = useRef([1, 1, 1]);
const { contactPairs } = useContactPairs();
useEffect(() => {
contactPairs.forEach((pair) => {
if (pair.bodyA === api || pair.bodyB === api) {
scale.current = scale.current.map((s) => s * 1.1);
api.scale.set(...scale.current);
}
});
}, [contactPairs, api]);
这是之前项目中的一个片段,而不是直接在刚体网格上使用缩放,请尝试使用此方法来缩放模型
return (
<mesh ref={ref}>
.......
</mesh>