在运行时缩放刚体

问题描述 投票:0回答:1

我正在尝试重新创建一个名为“轨道”的小游戏(只是为了好玩)。在这个游戏中,玩家将一个圆圈射入竞技场。该圆圈停在竞技场中的某个位置并扩大尺寸,直到与竞技场边界或另一个圆圈碰撞。 (见下图)

Orbital game overview

我遇到的问题是,当圆扩大时,应用于圆的刚体尺寸不会增加。它只是保持我第一次创建刚体时的大小。

所以问题是:如何重新渲染刚体或动态更新其尺寸? 我正在使用 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 属性而不是缩放属性,但没有任何效果。哦,如果改变我的圆的初始大小,刚体改变它的大小就好了,问题是当试图在运行时改变它时

如果有人能告诉我如何在运行时重新渲染或更新刚体,我将不胜感激!

reactjs collision-detection physics rigid-bodies rapier
1个回答
0
投票
  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>
© www.soinside.com 2019 - 2024. All rights reserved.