자바스크립트 3차원 라이브러리 Three.js 가 버전이 점점 변화됨에 따라
이제 과거에 개발했던 소스들은 작동이 되질 않습니다.
Three.js 의 CDN URL 이 바뀌었을 뿐 아니라,
3차원 모델을 불러오는 방법이 약간 바뀌었기 때문인데요.
오늘은 과거에 크레이가 개발한 '무한 돈 뽑기 기계'페이지가 오류가 발생해서 해결한 사례를 공유드리고자 합니다.
CDN URL이 바뀌다!
우선 과거에 CDN 주소를 통해 three.js 를 불러오는 방법이 아래와 같았었는데요.
<script src="https://threejs.org/build/three.min.js"></script>이제 이렇게 사용해야 합니다.
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@v0.149.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.149.0/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
:OrbitControls, GTLFLoader 사용법 약간 변경
OrbitControls 는 마우스 제어를 통해 3차원 공간을 돌려볼 수 있는 모듈이고,
GTLFLoader 은 3차원 모델 .glb 파일을 불러올 수 있는 모듈입니다.
원래는 아래와 같은 방식으로 사용했었는데요.
let controls = new THREE.OrbitControls (camera, renderer.domElement);
let modelLoader = new THREE.GLTFLoader();아래와 같이 바꿔서 사용해야 합니다.
// 2개의 모듈을 애드온으로 불러옵니다.
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
// 불러온 애드온 모듈을 통해 컨트롤러와 모델 로더를 생성합니다.
let controls = new OrbitControls (camera, renderer.domElement);
let modelLoader = new GLTFLoader();위 내용만으로는 감이 안 올수 있어 크레이의 '무한 돈 뽑기 기계' 소스를 첨부합니다.
이 예제는 아래 URL에서 직접 확인하실 수 있습니다.
http://dreamplan7.cafe24.com/canvas7/canvas5.htm
<!DOCTYPE html>
<html>
<head>
<title>GLTF Loader</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@v0.149.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.149.0/examples/jsm/"
}
}
</script>
<!-- 캔버스 -->
<canvas id="MyCanvas" width=640 height=180></canvas>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const renderer = new THREE.WebGLRenderer( { canvas: MyCanvas } );
const camera = new THREE.PerspectiveCamera(50, 640 / 180, 1, 1000);
const scene = new THREE.Scene();
let Mesh;
let light;
let light_sun;
let mixer;
function init() {
scene.background = new THREE.Color('black');
camera.position.set(1, 2, 2);
camera.lookAt( 0, 0, 0 );
}
function setLight() {
light = new THREE.AmbientLight(0xffffff); // soft white light
scene.add(light);
light_sun = new THREE.DirectionalLight ( 0x808080, 1.0 );
var shadowBlur=10;
light_sun.castShadow=true;
light_sun.shadow.camera.left=-shadowBlur;
light_sun.shadow.camera.right=shadowBlur;
light_sun.shadow.camera.top=shadowBlur;
light_sun.shadow.camera.bottom=-shadowBlur;
scene.add( light_sun );
}
function loadGLTF() {
let modelLoader = new GLTFLoader();
modelLoader.load('http://dreamplan7.cafe24.com/canvas7/model/pulley.glb', (gltf) => {
Mesh = gltf.scene;
Mesh.scale.set(1,1,1);
scene.add(Mesh);
Mesh.position.x = 0;
Mesh.position.y = 0;
Mesh.position.z = 0;
mixer = new THREE.AnimationMixer(Mesh);
const clips = gltf.animations;
clips.forEach(function(clip) {
const action = mixer.clipAction(clip);
action.play();
});
});
}
const clock = new THREE.Clock();
let controls = new OrbitControls (camera, renderer.domElement);
controls.target.set( 0, 0, 0 );
function animate() {
requestAnimationFrame(animate);
if(mixer)
mixer.update(clock.getDelta());
controls.update();
renderer.render(scene, camera);
}
init();
setLight();
loadGLTF();
animate();
</script>
</body>
</html>아무쪼록 필요하신 분에게 도움이 되셨으면 합니다.
이상 크레이의 짧은 팁이었습니다!
three.js 를 본격적으로 학습해 보고 싶으시다면 아래 상품 정보를 참조해 주세요.
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."