TO

WebGL을 지원하지 않는 일부 기기나 브라우저를 위해 메세지를 표현하는 코드이다. WebGL 지원 감지 모듈을 가져오고 렌더링을 시도하기 전에 다음을 실행한다.import WebGL from 'three/addons/capabilities/WebGL.js';if ( WebGL.isWebGL2Available() ) { // Initiate function or other initializations here animate();} else { const warning = WebGL.getWebGL2ErrorMessage(); document.getElementById( 'container' ).appendChild( warning );}

장면 만들기실제로 three.js를 사용하여 표시하려면 장면, 카메라, 렌더러 세 가지가 필요다. 이를 통해 카메라를 사용하여 장면을 렌더링할 수 있다.main.js —import * as THREE from 'three';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.domE..

프로젝트 구조three.js 프로젝트를 제작하기 위해선 최소 HTML 파일 하나와 three.js 코드를 실행하기 위한 JavaScript 파일이 필요하다. 아래의 구조와 네이밍을 똑같이 할 필요는 없으나, 설명을 위해 해당 카테고리에서 사용할 예정이다.index.html main.jsimport * as THREE from 'three';... public/ public / 폴더에 있는 파일은 변경되지 않은 채 바로 웹사이트에 푸시되기 때문에 보통 텍스처, 오디오, 3D 모델이 여기에 들어간다.이제 기본 프로젝트 구조를 설정했으므로 로컬에서 프로젝트를 실행하고 웹 브라우저를 통해 액세스 해보자. 설치 및 로컬 개발은 npm과 빌드 도구를 사용하거나 CDN에서 three.js를 가져오는 두 방법에..