Fit

<Fit /> uniformly scales and positions its children as a group. By default, it fits its children into a 1 × 1 × 1 box at the world origin.

Alternatively, the children can be fit into a Box3 or an Object3D.

Or the children can simply be resized. With <Fit /> the children are scaled relative to the center of their calculated bounding box.

Usage

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { Fit, OrbitControls } from '@tresjs/cientos'
import { BoxGeometry, MeshNormalMaterial } from 'three'

const positions: number[][] = []
for (let y = 100; y <= 120; y += 10) {
  for (let x = 100; x <= 120; x += 10) {
    positions.push([x, y, 9999])
  }
}
const geom = new BoxGeometry()
const mat = new MeshNormalMaterial()
</script>

<template>
  <TresCanvas clear-color="#4F4F4F">
    <TresPerspectiveCamera :position="[1, 1, 1]" />
    <OrbitControls />
    <Fit>
      <TresMesh
        v-for="(p, i) in positions"
        :key="i"
        :position="p"
        :args="[geom, mat]"
      />
    </Fit>
    <TresGridHelper :args="[1, 1]" />
  </TresCanvas>
</template>

Props

Name	Description
into	If into is: omitted or explicitly undefined: position/scale children to fit into a 1 × 1 × 1 Box3 at world origin. null: turn off <Fit />; reset scale/position of children. number: convert argument to Vector3(number, number, number). [number, number, number]: convert argument to Vector3. Vector3: position/scale children to fit inside a Box3 of size Vector3 at target objects' cumulative center. Box3: position/scale children to fit inside Box3. Object3D: position/scale children to fit inside calculated Box3. See THREE.Box3.setFromObject. <Fit /> must not contain the Object3D and vice-versa. default: new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5))
precise	See precise argument in THREE.Box3.setFromObject default: false