본문 바로가기
카테고리 없음

Three.js - Reading constructor 에러 해결 방법

자바스크립트 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 를 본격적으로 학습해 보고 싶으시다면 아래 상품 정보를 참조해 주세요.

Three.js로 3D 그래픽 만들기:WebGL을 위한 자바스크립트 3D 라이브러리, 에이콘출판

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."