ภาพรวมเรขาคณิต (Overview of Geometry)

ภาพรวมเรขาคณิต (Overview of Geometry)

ในบทความเกี่ยวกับเรขาคณิต เราจะพูดถึงเรื่องนั้นเพื่อใช้ Geometry จัดหาอาร์เรย์ของจุดยอด Vector3 (ตำแหน่ง) จากนั้นคุณสร้างวัตถุ Face3 ที่ระบุโดยทำดัชนีจุดยอด 3 จุด ในแต่ละ Face3 คุณสามารถระบุใบหน้าปกติหรือจุดปกติสำหรับจุดยอดแต่ละจุดของใบหน้าได้ คุณยังสามารถระบุสีของใบหน้าหรือสีจุดยอดแต่ละรายการได้ ในที่สุด คุณสามารถสร้างอาร์เรย์คู่ขนานของพิกัดพื้นผิว (UV) หนึ่งอาร์เรย์สำหรับแต่ละใบหน้าที่มีอาร์เรย์ของ UV หนึ่งชุดสำหรับจุดยอดแต่ละอันของใบหน้า

ข้อกำหนดเบื้องต้น

ข้อกำหนดสำหรับบทความนี้คือ คุณควรได้ทำตามบทความ แกนและการควบคุมวงโคจร มาก่อน

เรขาคณิต (Geometry)

ในบทความที่แล้ว เราได้ปรับทิศทางในสภาพแวดล้อม 3 มิติของเรา และในบทความนี้ เราจะสร้าง รูปทรงเรขาคณิตพื้นฐานบางอย่าง

กลับไปที่เอกสาร 3D แล้วฉันจะค้นหาประเภทรูปทรงเรขาคณิตพื้นฐานที่สุดที่นั่น คือซึ่งเป็นจุด (Points) ดังนั้น Points จึงเป็นคลาสสำหรับแสดง points และตอนนี้ต้องใช้เรขาคณิตและวัสดุ ซึ่งเพียงแค่ ได้รับคะแนน TEKS

เรามาดูกันว่าเรขาคณิตคืออะไร

เรขาคณิตเป็นทางเลือกที่เป็นมิตรกับผู้ใช้สำหรับแอตทริบิวต์การจัดเก็บรูปทรงเรขาคณิตของบัฟฟอร์ด เช่น ตำแหน่งจุดยอดใบหน้าและสี ตัวสร้างเรขาคณิตไม่ได้ทำอะไรเลย แต่มีคุณสมบัติที่สำคัญบางอย่าง ที่สำคัญที่สุดคือจุดยอด จุดยอดของเรขาคณิตคืออาร์เรย์ของจุดยอด และจุดยอดเหล่านี้เป็นตำแหน่งของจุดยอดทุกจุดใน

Vector3

คลาสที่แสดงเวกเตอร์ 3 มิติ เวกเตอร์ 3 มิติคือชุดของตัวเลขที่เรียงลำดับกัน (มีป้ายกำกับว่า x, y และ z) ซึ่งสามารถใช้เพื่อเป็นตัวแทนของสิ่งต่างๆ เช่น:

จุดในพื้นที่ 3 มิติ

ทิศทางและความยาวในพื้นที่ 3 มิติ ใน three.js ความยาวจะเป็นระยะทางแบบยุคลิดเสมอ (ระยะทางเส้นตรง) จาก (0, 0, 0) ถึง (x, y, z) และทิศทางจะถูกวัดจาก (0, 0, 0) ไปทาง ( x, y, z). เลขสามตัวที่สั่งโดยพลการใดๆ

มีสิ่งอื่น ๆ ที่เวกเตอร์ 3 มิติสามารถนำมาใช้แทนได้ เช่น เวกเตอร์โมเมนตัม และอื่นๆ อย่างไรก็ตาม สิ่งเหล่านี้เป็นการใช้งานทั่วไปที่สุดใน three.js การวนซ้ำผ่านอินสแตนซ์ Vector3 จะให้ผลลัพธ์ส่วนประกอบ (x, y, z) ตามลำดับที่เกี่ยวข้อง

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

        <points>
          <geometry>
            <vector3 attachArray='vertices'/>
          </geometry>
        </points>

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] }}
      >
        <Orbit />
        <axesHelper args={[5]} />
        <Box position={[-1, 1, 2]} />
        <points>
          <geometry>
            <vector3 attachArray='vertices' />
            <vector3
              args={[0, 1, 1]}
              attachArray='vertices'
            />
            <vector3
              args={[0, 1, -1]}
              attachArray='vertices'
            />
          </geometry>
        </points>
      </Canvas>
    </div>
  );
}

export default App;

ทดสอบเปลี่ยนจาก points เป็น line

line คือส่วนของเส้นตรงเกิดจากการสร้างจุดหลาย ๆ จุดต่อเนื่องกัน โดยสิ่งที่ต้องรู้คือ จุดแรก และจุดสิ้นสุด แต่สิ่งที่ต้องการทราบคือ จุดต่อไปว่า จะอยู่ ณตำแหน่งใด

        <line>
          <geometry>
            <vector3
              args={[0, 1, 1]}
              attachArray='vertices'
            />
            <vector3 attachArray='vertices'/>
            <vector3
              args={[0, 1, -1]}
              attachArray='vertices'
            />
          </geometry>
        </line>

ทดสอบเปลี่ยนจาก line เป็น mesh

Face3 คือคุณสมบัติของดัชนีวัสดุ ซึ่งจะมีผลเมื่อต้องทำงานกับอาร์เรย์ของวัสดุ แทนที่จะเป็นเพียงวัสดุเดียวเมื่อใช้เรขาคณิตกับวัตถุตาข่าย

        <mesh>
          <geometry>
            <face3
              args={[0, 1, 2]}
              attachArray='faces'
            />
            <vector3
              args={[0, 1, 1]}
              attachArray='vertices'
            />
            <vector3 attachArray='vertices' />
            <vector3
              args={[0, 1, -1]}
              attachArray='vertices'
            />
          </geometry>
        </mesh>

meshBasicMaterial

meshBasicMaterial คือ วัสดุสำหรับการวาดรูปทรงเรขาคณิตด้วยวิธีแรเงาแบบเรียบง่าย (แบบแบนหรือแบบโครงลวด)

import './App.css';
import { Canvas, useFrame, useThree, extend } from 'react-three-fiber';
import { useRef } from 'react';
import {
  OrbitControls
} from 'three/examples/jsm/controls/OrbitControls';
import * as THREE from 'three'
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] }}
      >
        <Orbit />
        <axesHelper args={[5]} />
        <Box position={[-1, 1, 2]} />
        <mesh>
          <meshBasicMaterial side={[THREE.DoubleSide]}/>
          <geometry>
            <face3
              args={[0, 1, 2]}
              attachArray='faces'
            />
            <vector3
              args={[0, 1, 1]}
              attachArray='vertices'
            />
            <vector3 attachArray='vertices' />
            <vector3
              args={[0, 1, -1]}
              attachArray='vertices'
            />
          </geometry>
        </mesh>
      </Canvas>
    </div>
  );
}

export default App;

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

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

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