졸업작품에서 three.js를 사용하여 3D 전시회를 구현해보고 싶어 코딩애플님의 유튜브 영상을 보고 짧게나무 three.js를 사용해보았다.
-
원하는 3D 이미지 다운받기
https://sketchfab.com/feed
sketchfab에 다양한 이미지들이 많아 이 곳에서 다운 받았다.
다운받은 후 이 폴더를 작업폴더로 가져온다. -
index.html에서 간단히 작업
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.141.0/build/three.module.js",
"GLTFLoader" : "https://unpkg.com/three@0.141.0/examples/jsm/loaders/GLTFLoader.js"
}
}
</script>
<script type="module">
import {GLTFLoader} from 'GLTFLoader';
import * as THREE from 'three';
//1.장면 만들기, 이 scene 위에 그림 그릴 수 있음(add)
let scene=new THREE.Scene();
//2.브라우저에 띄우기
let renderer=new THREE.WebGLRenderer({
//어디에 띄울지
canvas: document.querySelector('#canvas'),
antialias: true,//테두리 부드럽게
});
renderer.outputEncoding=THREE.sRGBEncoding;
//카메라, 조명, 배경 세팅
let camera=new THREE.PerspectiveCamera(30,1);
camera.position.set(0,0,5)
scene.background=new THREE.Color('white');
let light=new THREE.DirectionalLight( 0xffffff, 0.8 ); //(color, intensity)
scene.add(light);
let loader= new GLTFLoader();
loader.load('dog/scene.gltf', function(gltf){
//load 된 후 실행될 콜백함수
scene.add(gltf.scene);
//애니메이션 적용
function animate(){
requestAnimationFrame(animate)
gltf.scene.rotation.y+=0.01;
renderer.render(scene, camera);
}
animate();
})
</script>
</body>
</html>간단히 index.html에서 작업 후 liveserver를 켜서 확인해본 결과
이렇게 결과가 잘 나온다.
✓ 여기선 애니메이션을 혼자 0.01씩 돌아가도록 했지만 마우스로 직접 조절가능하도록 만들고 싶다면 orbitControl함수를 사용하면 되겠다.
프론트엔드 개발자