개발 · 컴퓨터공학

three.js 배경색 칠하기

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true }); renderer object 생성자에서 alpha설정을 통해 배경의 투명도 설정을 할 수 있다. renderer.setClearAlpha(0.5); renderer.setClearColor('#00ff00'); setClearAlpha를 통해 투명도를 설정할 수 있고, setClearColor로 색을 지정할 수 있다. scene.background = new THREE.Color('blue'); scene을 통해 배경색을 지정할 수 있는데, 이 경우 renderer의 배경색보다 우선시 된다.

2022. 8. 24. 21:57

개발 · 컴퓨터공학

three.js 반응형 canvas

function setSize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.render(scene, camera); } window.addEventListener('resize', setSize); resize라는 이벤트 리스너에 setSize함수를 추가하여 브라우저 resize할 때 camera와 renderer의 크기를 조절하는 방법을 이용할 수 있다. window.devicePixelRatio를 통해서 화면의 해상도를 확인할 수 있는데, 이를통한 성능적 이슈에도 ..

2022. 8. 23. 21:41

개발 · 컴퓨터공학

three.js Camera - Orthographic

https://threejs.org/docs/index.html?q=camera#api/en/cameras/OrthographicCamera three.js docs threejs.org 이번에는 거리에 영향을 받지 않는 orthographic 카메라를 알아보자. docs의 생성자를 보면 frustum의 구성요소들을 지정하는 값들이 필요하다. const camera = new THREE.OrthographicCamera( -(window.innerWidth / window.innerHeight), window.innerWidth / window.innerHeight, 1, -1, 0.1, 1000 ); camera를 생성하고 보이지 않는 경우 position을 확인하자. camera의 기능들을 잠깐 알아..

2022. 8. 22. 20:44

개발 · 컴퓨터공학

three.js Mesh

그래픽스에서 Mesh는 물체의 꼭짓점을 생각하면 편하다. const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color : 'red' }); 먼저 geometry객체와 material 객체를 만드는데, material에서는 여러 설정 값 중 color를 설정하고 있다. color에는 위 코드처럼 문자열이나, 0xff0000 같은 8진수, #ff0000 로도 설정가능하다. const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); renderer.render(scene, camera); geometry와 material 객체를 통..

2022. 8. 21. 19:15

개발 · 컴퓨터공학

three.js Camera

먼저 Perspective Camera를 알아보자. https://threejs.org/docs/index.html?q=camera#api/en/cameras/PerspectiveCamera three.js docs threejs.org docs를 참고하면 다음과 같이 생성자의 구성을 알 수 있다. perspective 카메라는 절두체(frustom) 범위 안의 물체를 렌더링하는데, 이 절두체의 구성요소 중 fov는 frustom의 각도, aspect는 종횡비를 말한다. near는 가까운 면, far는 먼 면이다. const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window..

2022. 8. 20. 19:15

개발 · 컴퓨터공학

three.js 시작하기

패키지 설치 npm i -D @babel/cli @babel/core @babel/preset-env babel-loader clean-webpack-plugin copy-webpack-plugin core-js cross-env html-webpack-plugin source-map-loader terser-webpack-plugin webpack webpack-cli webpack-dev-server npm i three 위와 같이 three.js 라이브러리를 설치하고, 서버 구동이나 동작은 npm을 이용한다. npm start / npm run build 등으로 npm 서버를 실행하거나 빌드한다. (빌드 할 때 일반적으로 webpack을 사용하기에 stylesheet와 같은 파일도 webpack에서..

2022. 8. 19. 18:15