利用調整座標系統
可以讓我們做到物件放在固定的格線上面或者是格子裡面的效果
<Canvas>
<場景>
<TransformControlsRule />
<gridHelper args={[1000, 200, '#151515', '#020202']} position={[0, 0, 0]} />
</Canvas>
function TransformControlsRule({ ...props }) {
const tooltip = useRef()
const transform = useRef()
var min = new THREE.Vector3(-60, -5, -60) // 定義可移動範圍
var max = new THREE.Vector3(60, 40, 60) // 定義可移動範圍
const { target, setTarget } = useTargetStore()
target ? target.position.clamp(min, max) : null
const { mode } = useControls({
mode: {
value: 'translate',
options: ['translate', 'rotate', 'scale']
}
})
const { system } = useControls({
system: {
value: 'world',
options: ['world', 'local']
}
})
useEffect(() => {
if (transform.current) {
const controls = transform.current
const callback = (event) => {
var object = controls.object // control is an instance of TransformControls
object?.position.clamp(min, max)
}
controls.addEventListener('change', callback)
// controls.setMode(mode)
}
})
useFrame((state) => {
// console.log(size)
if (target) {
tooltip.current.position.lerp(new THREE.Vector3().set(target.position.x, target.position.y, target.position.z), 0.5) 定義移動範圍動畫
}
})
return (
<>
{target && (
<TransformControls ref={transform} space={system} object={target} mode={mode} translationSnap={5} //定義可移動範圍一次加多少
rotationSnap={Math.PI / 4}>
{target && (
<group ref={tooltip} scale={1}>
<Html distanceFactor={0.25} position={[0, 10, 0]}>
<div className="tooltip">
{/* {target.position} */}
{/* Setting */}
<p>NAME</p>
Model001
<br />
OK | NO
</div>
</Html>
</group>
)}
</TransformControls>
)}
</>
)
}