Hi there everyone!
I’m trying to restrict the drag area of my 3d models within the floor of my FinalRoom.glb
model. I’ve converted it into tsx with gltfjsx
and got this as output:
import * as THREE from "three";
import React, { useRef } from "react";
import { useGLTF } from "@react-three/drei";
import { GLTF } from "three-stdlib";
type GLTFResult = GLTF & {
nodes: {
Cube_1: THREE.Mesh;
Cube_2: THREE.Mesh;
};
materials: {
["Material.005"]: THREE.MeshStandardMaterial;
["Material.006"]: THREE.MeshStandardMaterial;
};
};
export function FinalRoom(props: JSX.IntrinsicElements["group"] | any) {
const { nodes, materials } = useGLTF("/models/finalRoom.glb") as GLTFResult;
return (
<group
{...props}
dispose={null}
castShadow
receiveShadow
position={[0, -3, 0]}
>
<group
position={[0, 0, 0]}
scale={[
(props.width * 1.68) / 4000,
(props.height * 1.1) / 4000,
(props.length * 1.68) / 4000,
]}
>
{/* FLOOR */}
<mesh
geometry={nodes.Cube_1.geometry}
material={materials["Material.005"]}
material-side={THREE.FrontSide}
receiveShadow
material-color={props.shiny ? "beige" : "#ffffff"}
onPointerEnter={() => props.setShiny(true)}
onPointerLeave={() => props.setShiny(false)}
/>
{/* WALLS */}
<mesh
geometry={nodes.Cube_2.geometry}
material={materials["Material.006"]}
material-side={THREE.FrontSide}
castShadow
material-color={"#818181"}
/>
</group>
</group>
);
}
useGLTF.preload("/models/finalRoom.glb");
Now can anyone please tell me how can I make other models come only on floor when I import them and make them stay within the floor area. and yeah the floor area is dynamic user can change it as per their requirement. if it was static it was not this complicated for me but I’m not even getting how to make other models draggable just draggable and after that restricting the area is too much complicated.