Change dimensions of a object without stretching

Questions
,
1

Hi there everyone! I’ve a .glb file that is of empty room. I converted it into tsx with gltfjsx. All I want to do is to change its length, width and height according to inputs that I’ve created in web page when user changes them the dimensions should change. They are changing very well but one thing I noticed that they are just stretching and fitting the given dimension not increasing and decreasing.

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 Model(props: JSX.IntrinsicElements['group']) {
  const { nodes, materials } = useGLTF('/finalRoom.glb') as GLTFResult
  return (
    <group {...props} dispose={null} scale={[width,height,length]}>
      <group position={[0, 1.14, 0]} scale={[1.68, 1.1, 1.68]}>
        <mesh geometry={nodes.Cube_1.geometry} material={materials['Material.005']} />
        <mesh geometry={nodes.Cube_2.geometry} material={materials['Material.006']} />
      </group>
    </group>
  )
}

useGLTF.preload('/finalRoom.glb')

This is what my approach is. I’m using @react-three/fiber, @react-three/drei

2

You cannot use scale directly in such case. In case of rooms - consider splitting the model into two parts - a floor and a wall.

Then in code build the room out of the floor and wall elements. That way you’ll be able to adjust the scale (ie. length) of every wall independently to scale of the floor and other walls, preventing stretching.

(Scale is just a simple, naive increasing / decreasing distance of every vertex in the model by a certain distance, proportionally to their original offset from the centre of the model. So if you keep the room in a single model - walls will inevitably stretch, because inner wall edges are closer to the centre than the outer walls.)

1 Like
3

can you please give a small example for it like how can I build room with code ??? I’m confused with @react-three/fiber