แกนและการควบคุมวงโคจร (Axes and Orbit Controls)
ข้อกำหนดเบื้องต้น
ข้อกำหนดสำหรับบทความนี้คือ คุณควรได้ทำตามบทความ สร้าง scene ด้วย react-three-fiber มาก่อน
AxesHelper
AxesHelper คือการแสดงภาพ แกนวัตถุ 3 แกนด้วยวิธีง่ายๆ แกน X เป็นสีแดง แกน Y เป็นสีเขียว แกน Z เป็นสีน้ำเงิน
เพิ่ม axesHelper ภายใน Canvas
<axesHelper/>


หยุดการแสดงผล Box ในฉากชั่วคราว
{/* Box */}


มาดูมุมมองที่ดีขึ้นเกี่ยวกับแกนเหล่านี้กัน Right-hand rule ลองปรับตำแหน่งกล้อง camera position ใน canvas ตอนนี้ เราสามารถปรับคุณสมบัติของกล้องใดๆ ก็ได้ภายในวัตถุของกล้องนี้ แต่สำหรับตอนนี้ จะไปที่ กำหนดตำแหน่งกล้อง
camera={{ position: [3,3,3] }}


ต่อไปเราจะกำหนดขนาดของเส้น ดังนั้นในการตอบสนองผ่านไฟเบอร์ (fiber) สิ่งที่คุณต้องการส่งผ่านไปยังตัวสร้างของวัตถุ ผ่านอุปกรณ์ประกอบฉากที่เรียกว่า ARGs และคุณจะต้องส่งผ่านอาร์เรย์ของอาร์กิวเมนต์ที่ปกติจะเป็น ค่าที่คั่นด้วย comma ส่งผ่านไปยังอาร์กิวเมนต์ของฟังก์ชัน ดังนั้น ในกรณีนี้ อาร์กิวเมนต์เดียวที่ใช้คือค่าเดียว ซึ่งก็คือขนาด
<axesHelper args={[5]}/>


OrbitControls
OrbitControls คือการควบคุมวงโคจรช่วยให้กล้องโคจรรอบเป้าหมายได้ โดยการนำเข้าสิ่งนี้ three/examples/jsm/controls/OrbitControls.js จากโฟลเดอร์ node_modules
import './App.css';
import { Canvas, useFrame, useThree, extend } from 'react-three-fiber';
import { useRef } from 'react';
import {
OrbitControls
} from 'three/examples/jsm/controls/OrbitControls';
extend({ OrbitControls });
const Orbit = () => {
const { camera, gl } = useThree();
return (
<orbitControls args={[camera, gl.domElement]} />
)
}
const Box = () => {
const ref = useRef();
useFrame(state => {
ref.current.rotation.x += 0.01;
ref.current.rotation.y += 0.01;
})
return (
<mesh ref={ref}>
<boxBufferGeometry />
<meshBasicMaterial color='blue' />
</mesh>
)
}
function App() {
return (
<div style={{ height: '100vh', width: '100vw' }}>
<Canvas
style={{ background: 'black' }}
camera={{ position: [3, 3, 3] }}
>
{/* Box */}
<Orbit />
<axesHelper args={[5]} />
</Canvas>
</div>
);
}
export default App;

ที่เว็บเบราว์เซอร์ สามารถใช้เมาส์ควบคุม ด้วยการคลิกและลากเมาส์แล้วหมุนไปรอบๆ ฉากที่นี่ และ ยังสามารถเลื่อนเพื่อซูมเข้าและออกแล้วใช้ปุ่มควบคุมบางอย่างเช่น ใช้ลูกศร ขึ้น ลง ขวา ซ้าย ได้

ใส่กล่องของเรากลับเข้าไปในฉาก
<Box />


ตอนนี้ สิ่งที่ต้องการจะทำคือสามารถส่งผ่านส่วนประกอบกล่องที่เป็นนามธรรมนี้ อุปกรณ์ประกอบฉากบางอย่างเช่นตำแหน่งและให้สิ่งเหล่านั้นผ่านไปยัง mesh ให้หมุนโดยอัตโนมัติ
const Box = props => {
<mesh ref={ref} {...props}>
<Box position={[1,1,0]} />

import './App.css';
import { Canvas, useFrame, useThree, extend } from 'react-three-fiber';
import { useRef } from 'react';
import {
OrbitControls
} from 'three/examples/jsm/controls/OrbitControls';
extend({ OrbitControls });
const Orbit = () => {
const { camera, gl } = useThree();
return (
<orbitControls args={[camera, gl.domElement]} />
)
}
const Box = props => {
const ref = useRef();
useFrame(state => {
ref.current.rotation.x += 0.01;
ref.current.rotation.y += 0.01;
})
return (
<mesh ref={ref} {...props}>
<boxBufferGeometry />
<meshBasicMaterial color='blue' />
</mesh>
)
}
function App() {
return (
<div style={{ height: '100vh', width: '100vw' }}>
<Canvas
style={{ background: 'black' }}
camera={{ position: [3, 3, 3] }}
>
<Box position={[1,1,0]} />
<Orbit />
<axesHelper args={[5]} />
</Canvas>
</div>
);
}
export default App;
ที่เว็บเบราว์เซอร์ กล่องจะหมุนโดยอัตโนมัติ สามารถใช้เมาส์ควบคุม ด้วยการคลิกและลากเมาส์แล้วหมุนไปรอบๆ ฉากที่นี่ และ ยังสามารถเลื่อนเพื่อซูมเข้าและออกแล้วใช้ปุ่มควบคุมบางอย่างเช่น ใช้ลูกศร ขึ้น ลง ขวา ซ้าย ได้

<Box position={[-1,1,0]} />
