Front-end/Three
기초틀과 transform
ekki88
2025. 2. 3. 10:35
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)