기초틀과 transform

three.js journey강의를 듣고 작성합니다.

 

Three.js 구현하기위한 기본구성 5가지 

import * as THREE from 'three';
import gsap from 'gsap'

const canvas = document.querySelector('canvas.webgl')

//scene
const scene = new THREE.Scene()

//object
const geometry = new THREE.BoxGeometry(1,1,1) //BoxGeometry(width, height, depth)
const material = new THREE.MeshBasicMaterial({color:0xff0000})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

//size
const sizes ={
    width: 800,
    height: 600
}

//camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height) 
// PerspectiveCamera(시야각, width/height);
camera.position.z = 3
scene.add(camera)

//renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera)

 

canvas

scene

: scene.add() 를 통해 장면에 객체를 추가해야만 화면에서 보임 

object (mesh (geometry, material)

: 오브젝트는 메쉬라는 객체유형을 만들어야하는데 메쉬는 지오메트리와 머티리얼의 조합이다 

camera

renderer

 

Transform 속성 

• position 객체의 이동
• scale 객체의 크기조절
• rotation 객체 회전
• quaternion 객체 회전 

 

position 

//position
mesh.position.x = 0.7
mesh.position.y = -0.4
mesh.position.z = 1
mesh.position.set(0.7,-0.4,1)

 

scale 

//scale
mesh.scale.x = 2
mesh.scale.y = 0.5
mesh.scale.z = 0.5
mesh.scale.set(2,0.5,0.5)

 

rotation 

//rotation
mesh.rotation.reorder('YXZ')
mesh.rotation.x = 3.14159
mesh.rotation.y = 3.14159 *0.25

 

 

axeshelper

//axes helper
const axesHelper = new THREE.AxesHelper()
scene.add(axesHelper)

 

group

//group
const group = new THREE.Group()
scene.add(group)
// 만들고 장면 추가필수

const cube1 = new THREE.Mesh(
    new THREE.BoxGeometry(1,1,1),
    new THREE.MeshBasicMaterial({color: 0xff0000})
    )
group.add(cube1)

const cube2 = new THREE.Mesh(
    new THREE.BoxGeometry(1,1,1),
    new THREE.MeshBasicMaterial({color: 0x00ff00})
)
cube2.position.x = -2
group.add(cube2)

const cube3 = new THREE.Mesh(
    new THREE.BoxGeometry(1,1,1),
    new THREE.MeshBasicMaterial({color: 0x0000ff})
)
cube3.position.x = 2
group.add(cube3)