웹프로그래밍/THREE.js
-
THREE.js - PointerLockControls(1인칭 카메라 회전 콘트롤)웹프로그래밍/THREE.js 2020. 12. 19. 02:33
FPS게임에서 주로 사용하는 3차원 공간 1인칭 카메라 회전 콘트롤을 가능하게 해주는 THREE.js 플러그인(?) 입니다. 여기서 말하는 1인칭 카메라 회전 이란 마우스 이동으로 카메라의 바라보는 방향을 회전시키는, 마우스의 움직임이 내 눈(시선)의 방향을 대신하는 기능 입니다. 아래 동영상은 1인칭 카메라회전을 사용한 간단한 예 입니다. THREE.js 에서는 위와같은 1인칭 카메라회전 기능을 아주 간단하게 적용할 수 있도록 PointerLockControls 라는 플러그인이 준비되어 있습니다. PointerLockControls 적용시키기 플러그인 불러오기 import {PointerLockControls} from "exmples/jsm/controls/PointerLockControls.js";..
-
THREE.js Texture Animation웹프로그래밍/THREE.js 2020. 1. 9. 08:07
r111 THREE.js 에서는 애니메이션 GIF 파일을 텍스쳐로 사용할수 없습니다. 구글링을 통해 텍스쳐를 애니메이션 GIF 파일처럼 적용하는 소스를 발견하여 이곳에 소개해 봅니다. function TextureAnimator(texture, tilesHoriz, tilesVert, numTiles, tileDispDuration) { // note: texture passed by reference, will be updated by the update function. this.tilesHorizontal = tilesHoriz; this.tilesVertical = tilesVert; // how many images does this spritesheet contain? // usually eq..
-
THREE.js 에서 음악/효과음 사용하기 - Audio웹프로그래밍/THREE.js 2020. 1. 8. 11:29
r111 THREE.js 에서 Audio는 HTML5 규약인 Web Audio API 를 사용합니다. THREE.js 에서 Audio는 배경음 같은 화면 전체에서 골고루 흘러나오는 일반적인 Audio 와 3차원 공간속 특정 위치(또는 특정 위치의 사물)에서 나오는 PositionalAudio 를 제공합니다. THREE.js 에서 Audio를 사용하기 위해서는 AudioListener 라는 소리감지 매개체를 Camera에 설치해 주어야 합니다. AudioListener : Camera 와 마찬가지로, Scene으로 구성된 가상의 3차원 공간에서 나는 소리들을 사람에게 들려주는 매개체 이다. AudioListener 생성 var 소리감지기 = new THREE.AudioListener(); 카메라.add( ..
-
360도 구형 파노라마 사진을 6P 스카이박스로 변환하기웹프로그래밍/THREE.js 2020. 1. 7. 12:03
r111 THREE.js로 구현할 3차원 공간의 배경은 6장의 사진으로 만든 스카이박스(SkyBox)로 만듭니다. 참고 : 스카이박스(SkyBox) 배경 설치하기 스카이박스를 만드는 방법은 여러가지가 있겠지만, 먼저 360도 구형 파노라마 사진을 만든뒤 스카이박스로 변환하는 방법이 개인적으로는 간편한것 같습니다. 360도 구형 파노라마를 스카이박스로 변환하는 또 여러가지 방법들 가운데 블렌더를 이용하는 한 방법을 소개합니다. - 블렌더에 대한 소개나 사용방법은 이곳에서 다루지 않습니다. 원문출처 : https://aerotwist.com/tutorials/create-your-own-environment-maps/ Aerotwist - Create your own environment maps ## In..
-
스카이박스(skybox) 배경 설치하기웹프로그래밍/THREE.js 2020. 1. 6. 11:52
r111 3차원 공간을 구성하면서 여러 오브젝트들로 주변을 꾸미기도 하지만 멀리있는 하늘 같은 배경도 필요합니다. 그러한 배경을 스카이박스(skybox) 라고 합니다. 스카이박스는 6장의 연결된 사진으로 이루어집니다. 위와같은 연결된 6장의 사진을 각 면으로 하는 아주 커다란 육면체로, 만들고있는 3차원 공간을 덮는 개념입니다. THREE.js 에서는 CubeTextureLoader()를 이용하여 Scene.background 로 쉽게 스카이박스를 설치할수 있습니다. 장면.background = new THREE.CubeTextureLoader() .setPath( 'textures/cubeMaps/' ) // 이미지파일들 경로 .load( [ 'px.png', //우 'nx.png', //좌 'py.p..
-
Light(빛, 광원) 의 종류웹프로그래밍/THREE.js 2020. 1. 5. 17:04
r111 THREE.js 에서 제공하는 light(빛)의 종류를 간단하게 요약해 봅니다. AmbientLight 광원(빛의 시작점)이 없이 모든 오브젝트의 모든면을 골고루 비춰주는 빛. AmbientLight( color : Integer, // RGB값. 기본값은 0xFFFFFF intensity : Float // 숫자가 커질수록 밝아짐. 기본값 1. ) HemisphereLight 하늘과 땅(바닥) 두 곳의 광원을 가지는 빛. HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float ) DirectionalLight 무한대의 먼거리에서 모든오브젝트에 일괄적으로 같은각도로 비추는 빛 = 태양. DirectionalLig..
-
Mesh 모델의 Material(재질) 종류웹프로그래밍/THREE.js 2020. 1. 4. 11:34
r111 오브젝트를 구성하는 Geometry(뼈대)와 Material(재질/살갖) 중에서 Material의 종류를 알아보겠습니다. MeshBasicMaterial 가장 간단하고 기본적인 재질로 빛의 영향을 받지 않는다. 생성 : new MeshBasicMaterial( parameters : Object ) MeshDepthMaterial 간단한 음영효과를 가지는 재질. 카메라에서 가까운쪽이 밝고 먼쪽이 어두워진다. 생성 : new MeshDepthMaterial( parameters : Object ) MeshLambertMaterial 빛의 영향은 받으나 반사광이 없는 재질. 생성 : new MeshLambertMaterial( parameters : Object ) MeshPhongMaterial ..
-
Scene(장면)에 Object(물체) 추가하기웹프로그래밍/THREE.js 2020. 1. 3. 15:32
r111 THREE.js 장면(Scene)안에 다양한 2D, 3D 물체(오브젝트)를 추가할수 있습니다. THREE.js의 기본 3D 오브젝트는 Geometry(뼈대) 와 Material(재질, 살갖)으로 구성된 Mesh Object를 기본으로 합니다. 또한 SpriteMaterial 만으로 구성된 Sprite 라는 2D 오브젝트도 제공합니다. Geometry : 틀, 뼈대 - 기본 모양과 크기 정보. Material : 재질, 특성 - 색상, 투명도, 텍스쳐이미지 등등.. 장면에 3D 메쉬오브젝트 추가하기 - 가장 기본적인 박스모델(BoxGeometry) 추가해 보기 var 장면 = new THREE.Scene(); // "장면"이라는 Scene 생성 // 가로/세로/앞뒤 모두 1미터 크기의 박스 뼈대 ..