แกนและการควบคุมวงโคจร

แกนและการควบคุมวงโคจร (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]} />