THREE.js 스니펫

 

 

model transform

private setupModels() {
    const geoBox = new THREE.BoxGeometry(1)
    const material = new THREE.MeshStandardMaterial()
    const box = new THREE.Mesh(geoBox, material)

    const matrixS = new THREE.Matrix4().makeScale(.5, .5, .5)
    const matrixR = new THREE.Matrix4().makeRotationX(THREE.MathUtils.degToRad(45))
    const matrixT = new THREE.Matrix4().makeTranslation(0, 2, 0)

    box.applyMatrix4(matrixS)
    box.applyMatrix4(matrixR)
    box.applyMatrix4(matrixT)

    //크기 회전 이동 순서로 적용
    box.position.set(0, 2, 0)
    box.rotation.x = THREE.MathUtils.degToRad(45)
    box.scale.set(0.5, .5, .5)

    this.scene.add(box)

    const axesOfScene = new THREE.AxesHelper(5)
    this.scene.add(axesOfScene)
}

 

 

 

Geometry

 

interface IGeometryHelper {
  createGeometry: () => THREE.BufferGeometry
  createGUI: (update: () => void) => void
}

class TextGeometryHelper implements IGeometryHelper {
  private args = {
    text: 'font',
    size: 0.5,
    depth: 0.1,
    curveSegments: 3,
    bevelEnabled: true,
    bevelThickness: .1,
    bevelSize: .01,
    bevelOffset: 0,
    bevelSegments: 3
  };
  private font: Font

  constructor(font: Font) {
    this.font = font
  }

  createGeometry(): TextGeometry {
    const length = 12, width = 8;
    const shape = new THREE.Shape();
    shape.moveTo(0, 0);
    shape.lineTo(0, width);
    shape.lineTo(length, width);
    shape.lineTo(length, 0);
    shape.lineTo(0, 0);

    return new TextGeometry(
      this.args.text, {
      font: this.font,
      ...this.args
    })
      .scale(0.1, 0.1, 0.1)
  }
  createGUI(update: () => void) {
    const gui = new GUI()
    gui.add(this.args, "text").onChange(update)
    // gui.add(this.args, "segments", 1, 100, 1).onChange(update)
  }

}

 

 

시작

import { OrbitControls } from 'three/examples/jsm/Addons.js'
import './style.css'
import * as THREE from "three"

class App {
  private domApp: Element
  private renderer: THREE.WebGLRenderer
  private scene: THREE.Scene
  private camera?: THREE.PerspectiveCamera

  constructor() {
    console.log('Hello three.js')

    this.domApp = document.querySelector('#app')!

    this.renderer = new THREE.WebGLRenderer({ antialias: true })
    this.renderer.setPixelRatio(window.devicePixelRatio)
    this.domApp.appendChild(this.renderer.domElement)
    this.scene = new THREE.Scene()

    this.setupCamera()
    this.setupLight()
    this.setupModels()
    this.setupEvents()
  }

  private setupCamera() {
    const domApp = this.domApp
    const width = domApp.clientWidth
    const height = domApp.clientHeight

    this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100)
    this.camera.position.z = 5

    new OrbitControls(this.camera, this.domApp as HTMLElement)
  }

  private setupLight() {
    const color = 0xffffff
    const intensity = 1
    const light = new THREE.DirectionalLight(color, intensity)
    light.position.set(-1, 2, 4)
    this.scene.add(light)
  }

  private setupModels() {
    const axesOfScene = new THREE.AxesHelper(10)
    this.scene.add(axesOfScene)

  }

  private setupEvents() {
    window.onresize = this.resize.bind(this)
    this.resize()
    this.renderer.setAnimationLoop(this.render.bind(this))
  }

  private resize() {
    const domApp = this.domApp
    const width = domApp.clientWidth
    const height = domApp.clientHeight

    const camera = this.camera
    if (camera) {
      camera.aspect = width / height
      camera.updateProjectionMatrix()
    }

    this.renderer.setSize(width, height)
  }

  private update(time: number) {
    time *= 0.001 // ms -> s

  }

  private render(time: number) {
    this.update(time)
    this.renderer.render(this.scene, this.camera!)
  }
}

new App()