คุณสมบัติทางกายภาพ (Bounding Boxes)

การดีบักคุณสมบัติทางกายภาพด้วย 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>

ผลลัพธ์การทำงาน

ดูผ่านเว็บไซต์ได้ที่

• http://sunskillstudio.com/workshop/bounding/