Three.js의 큰 틀은 3가지가 있다 제목처럼 Renderer, Scene, Camera
출처: youtube 디자인베이스
장면을 만들어서 3D Object를 넣고 카메라로 비춰고 Renderer를 통해서 html 파일안에 보여주는식이다
Renderer
카메라에 담긴 장면을 웹사이트에 구현해주는 Renderer이다
Scene
여러개의 3D 오브젝트, 즉 말 그대로 특정한 장면이 모인 것 (안개, 배경색, 배경 등)
Camera
시야각, 종횡비, 카메라 시작 끝 지점, 카메라 등 3D 공간의을 카메라로 위치 특정 데이터를 비춰서 Renderer 에게 전달해준다
index.js에 Renderer, Scene, Camera 함수 추가
import * as THREE from 'three'
import { WEBGL } from './webgl'
if (WEBGL.isWebGLAvailable()) {
// 장면
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);
} else {
var warning = WEBGL.getWebGLErrorMessage()
document.body.appendChild(warning)
}Renderer에 있는 Scene을 어디, 어떤 태그에 노출할 것인지 작성
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
장면 코드 부분에 background color를 추가할 수 있다
scene.background = new THREE.Color(0x004fff)애니메이션 적용
three.org 에서 코드 인용
function render(time) {
time *= 0.001; // convert time to seconds
cube.rotation.x = time;
cube.rotation.y = time;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
아래 코드를 주석처리하면 페이지가 정상 작동한다
cube.rotation.x = time;
cube.rotation.y = time;canvas 연결을 위해 index.html에 값 추가
<body>
<canvas id="canvas-index"></canvas>
<script src="public/bundle.js"></script>
</body>예제를 보면 아래 대로 canvas id ="C"를 썻다면 스크립트에 적용하라고한다
index.html에서 우리가 지정한 id값을 확인
index.js에 카메라 함수 쪽에 예제 코드를 붙여넣은 뒤 "#c"를 id갑으로 변경
아래 코드는 이미 렌더러에 있으므로 지워준다
const renderer = new THREE.WebGLRenderer({canvas});로컬에서 확인하면 잘 불러와진것을 확인
관심과 격려가 필요한 응애 개발자