📽 Three.js Crash Course For Beginners | Create This Awesome 3D Website!
1. 브라우저에서 모델 렌더링하기
1. Scene 만들기
const scene = new THREE.scene()2. Scene에 보여줄 모델 추가하기
const geometry = new THREE.SphereGeometry(3, 64, 64)
//material = 소재, 재질 표현
const material = new THREE.MeshStandardMaterial({
color: "#00ff83"
roughness: 0.5 //shine <-> rough
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)3. 카메라 추가하기
const camera = new THREE.PerspectiveCamera(45, 800 / 600, 0.1, 100)
camera.position.z = 20
scene.add(camera)4. 빛 추가하기 (빛 추가 안하면 모델 안보임)
const light = new THREE.PointLight(0xffffff, 1, 100)
light.intensity = 1.25 //default = 1
light.position.set(10, 10, 10)
scene.add(light)5. 렌더링하기
//index.html
<body>
<canvas class="webgl"></canvas>
</body>//main.js
const canvas = document.querySelector("./webgl")
const renderer = new THREE.WebGLRenderer({canvas})
renderer.setSize(800, 600)
renderer.render(scene, camera)2. viewport 반응형으로 만들기
1. window size 설정
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}2. camera perspective size 설정
const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height, 0.1, 100)
camera.position.z = 20
scene.add(camera)3. renderer size 설정
//main.js
const canvas = document.querySelector("./webgl")
const renderer = new THREE.WebGLRenderer({canvas})
renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera)→ browser refresh 시에만 적응된 full screen 으로 나옴
4. resize eventListener 추가
window.addEventListener("resize",()=>{
//Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
//Update camera, renderer
camera.updateProjectionMatrix()
camera.aspect = sizes.width / sizes.height
renderer.setSize(sizes.width, sizes.height)
})
const loop = () => {
render.render(scene, camera)
window.requestAnimationFrame(loop)
}
loop()
3. enable control
1. OrbitControls import, 생성
import { OrbitControls } from "..."
const controls = new OrbitControls(camera, canvas)→ 마우스 드래그로 모델 컨트롤 가능 (drag and drop으로 회전, scroll로 zoom-in & out, pan 등)
→ drop 시 애니메이션이 즉각 멈추는데, 계속 부드럽게 애니메이팅 시키기 위해 damping 추가
import { OrbitControls } from "..."
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true
//zoom, pan disable
controls.enableZoom = false
controls.enablePan = false
//add AutoRotate
controls.autoRotate = true
controls.autoRotateSpeed = 5
.
.
.
const loop = () => {
controls.update()
render.render(scene, camera)
window.requestAnimationFrame(loop)
}
4. 애니메이션 pixel 깨짐 방지
//main.js
const canvas = document.querySelector("./webgl")
const renderer = new THREE.WebGLRenderer({canvas})
renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera)
//pixel 깨짐 방지, 애니메이션 부드럽게 됨
renderer.setPixelRatio(2)5. timeLine으로 등장 애니메이션 주기
1. import gsap
2. timeline 설정
const tl = gsap.timeline({ default: { duration:1 } })
tl.fromTo(mesh.scale, { z: 0, x:0, y:0 }, { z:1, x:1, y:1})
tl.fromTo("nav", {y: "-100%" }. { y: "0%" })
tl.fromTo(".title", { opacity: 0 }, { opacity: 1})6. 마우스 이동 좌표에 따라 모델링 색 변화 주기
let mouseDown = false
let rgb = []
window.addEventListener("mousedown",() => (mouseDown = true))
window.addEventListener("mouseup",() => (mouseDown = false))
window.addEventListener("mousemove", (e) => {
if(mouseDown){
rgb = [
Math.round((e.pageX / sizes.width) * 255),
Math.round((e.pageY / sizes.height) * 255),
150
]
let newColor = new THREE.Color(`rgb(${rbg.join(",")})`)
gsap.to(mesh.material.color, {
r: newColor.r,
g: newColor.g,
b: newColor.b
})
}
})
프론트엔드 개발자