[Three.js] Three.js Script 방식 정리

Three.js를 사용하기 위해 자바스크립트의 Script 태그에 대한 정리를 하려고 한다. 기초 지식이 좀 짧아서 이렇게라도 정리를 해야 나중에 더 이해를 할 수 있을것 같아서 말이다.

Three.js Script 방식

아래와 같이, three.js를 import 할 때, script type의 importmap이 module보다 위에서 선언이 되어야 한다. 그래야 module 스크립트 단에서 모듈 전체 또는 모듈 일부분의 멤버를 가져올 수 있기 때문이다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Exercise</title>
	<script type="importmap">
		{
            "imports": {
                        "three": "https://unpkg.com/three/build/three.module.js",
                        "three/addons/": "https://unpkg.com/three/examples/jsm/"
                        }
        }
	</script>

	<script type="module">
		import * as THREE from 'three';
		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
	</script>
</head>
<body>	
</body>
</html>

저작자표시

'IT > Three.js' 카테고리의 다른 글

[Three.js] Three.js OrbitControls WASD 카메라 이동하는 방법 (0)	2024.12.16
[Three.js] Three.js OrbitControls 카메라 부드러운 이동하기 (0)	2024.12.16
[Three.js] Three.js 그리드(grid) 생성 및 예제(gridHelper) (1)	2024.12.13
[Three.js] Three.js 장면(Scene) 생성 및 예제 (0)	2024.12.13
[Three.js] Three.js 알아보기 (1)	2024.11.13