Home Three.js 설치하기
Post
Cancel

Three.js 설치하기

Three.js 설치하기


  1. https://threejs.org/ 로 이동한다.
  2. [Code] - [download] 클릭
    Three.js Main 화면 threejs_main
  3. 원하는 디렉터리로 다운받은 zip 파일을 압축해제
  4. 예제 코드를 작성 후 확인해본다.
    예제 실행 화면 testThreeCube


예제 코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test Installation</title>
		<style>
			body { margin: 0; }
			canvas { display: block; }
		</style>
	</head>
	<body>

		<script type="module">
		    import * as THREE from '../../01_tool/three.js-r155/build/three.module.js';
		    
			const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

			const renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			const geometry = new THREE.BoxGeometry( 1, 1, 1 );
			const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			const cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			camera.position.z = 5;

			function animate() {
				requestAnimationFrame( animate );

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				renderer.render( scene, camera );
			}

			animate();
		</script>
	</body>
</html>
This post is licensed under CC BY 4.0 by the author.