การดีบักคุณสมบัติทางกายภาพด้วย Bounding Boxes
ในบทความที่แล้ว เรานำเข้าโมเดลเหล่านี้และ Tahseen และในบทความนี้ เราจะตั้งค่าบางอย่าง กล่อง Barlinnie เพื่อให้เราสามารถเพิ่มและแก้ไขข้อบกพร่องของคุณสมบัติทางกายภาพได้
ข้อกำหนดเบื้องต้น
ข้อกำหนดสำหรับบทความนี้คือ คุณควรได้ทำตามบทความ การเพิ่มโมเดลให้กับฉาก (Models to a Scene) มาก่อน
ตอนนี้ฉันสามารถย้ายแต่ละแบบจำลองของฉันเป็นวัตถุทั้งหมดทำให้เกิดอีกอันหนึ่งที่เสร็จแล้ว มาตั้งค่าส่วนประกอบกล่องขอบเขตของเรากัน ฉันจะสร้างไฟล์ใหม่และโฟลเดอร์ส่วนประกอบของฉันชื่อ BoundingBox
สร้างไฟล์ BoundingBox.jsx
สร้างไฟล์ BoundingBox.jsx ภายในโฟลเดอร์ components และฉันจะนำเข้า use box จาก use can และฉันจะไปข้างหน้าและสร้างพืชผลที่องค์ประกอบนี้จะใช้และตั้งค่าเป็นบางส่วนค่าเริ่มต้นที่เหมาะสม ดังนั้นตำแหน่งจะมีศูนย์ศูนย์ศูนย์ฉันจะให้คุณสมบัติชดเชยที่จะช่วยเราปรับตำแหน่งของแบบจำลองให้สัมพันธ์กับขอบเขตของเรากล่อง. อย่างที่ฉันพูดที่ศูนย์ศูนย์ศูนย์จะใช้มิติบางอย่างสำหรับกล่องขอบเรียกมันว่า Dems ตัวต่อตัว
import { useBox } from 'use-cannon'
const BoundingBox = ({
position = [0,0,0],
offset = [0,0,0],
dims = [1,1,1],
visible = false,
children
}) => {
const [ref, api] = useBox(() => ({ mass: 1, args: dims, position: position }))
return (
<group ref={ref} api={api}>
<mesh scale={dims} visible={visible}>
<boxBufferGeometry />
<meshPhysicalMaterial wireframe/>
</mesh>
<group position={offset}>
{children}
</group>
</group>
)
}
export default BoundingBox

เพิ่มองค์ประกอบ BoundingBox ที่ไฟล์ App.js


ที่ BoundingBox เพิ่ม visible


ที่ไฟล์ Model.jsx แก้ไข จาก {…props} เป็น scale={props.scale}

import { useLoader } from 'react-three-fiber';
import {
GLTFLoader
} from 'three/examples/jsm/loaders/GLTFLoader';
const Model = props => {
const model = useLoader(
GLTFLoader,
props.path
)
console.log(model)
return (
<primitive
object={model.scene}
scale={props.scale}
/>
)
}
export default Model;
ไฟล์ App.js แก้ไขโค้ด

<Draggable transformGroup>
<BoundingBox
visible
position={[4, 4, 0]}
dims={[3, 2, 6]}
offset={[0, 0.4, 0.8]}
>
<Model
path="/tesla_model_3/scene.gltf"
scale={new Array(3).fill(0.01)}
/>
</BoundingBox>
</Draggable>
<Draggable transformGroup>
<BoundingBox
visible
position={[-4, 4, 0]}
dims={[3, 2, 7]}
offset={[0, -0.8, 0.2]}
>
<Model
path="/tesla_model_s/scene.gltf"
scale={new Array(3).fill(0.013)}
/>
</BoundingBox>
</Draggable>

ผลลัพธ์การทำงาน
ดูผ่านเว็บไซต์ได้ที่