전체 글
-
스카이박스(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미터 크기의 박스 뼈대 ..
-
THREE.js 기본웹프로그래밍/THREE.js 2020. 1. 2. 15:32
r111 THREE.js 의 경로 THREE.js를 사용하면서 플러그인(콘트롤, 클래스, 소스 등등)을 포함할때 서로 해당경로를 참조하기 때문에 다운받은 THREE.js를 작업하려는 폴더나 서버에 압축된 경로 그대로 풀어놓아야 한다. THREE.js 다운로드 : https://threejs.org/ three.js – JavaScript 3D library threejs.org THREE.js 삽입 // 내경로 - THREE.js 압축을 풀어놓은 경로 THREE.js 의 기본 THREE.js의 가장 큰 틀은 다음의 세가지 이다. Camera - 사람에게 보여지는 화면을 담당. Renderer - 3D공간 안에서의 모든 그래픽 연산을 담당. Scene - 3D공간 그 자체. 참고 : THREE.js 내부에..
-
THREE.js 기초 참고자료 링크 모음웹프로그래밍/THREE.js 2020. 1. 2. 10:27
https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene three.js docs threejs.org : 두말할것도 없는 THREE.js 기초이자 기본. 또한 버전업에 따른 최신의 코드를 확인하고 익힐수 있는곳. : 인터넷에 올라와 있는 수많은 예제들이 구버전의 소스들로 이루어진게 너무도 많다. 그러므로 정확한 코드의 사용법을 수시로 공식사이트에서 확인해봐야 한다. https://threejsfundamentals.org/ Three.js Fundamentals Learn Three.js threejsfundamentals.org : 이곳의 강좌만 정독해도 THREE.js는 거의다 익힐수 있다는 생각이 들정도로 THREE.j..
-
AR 폭죽 불꽃놀이웹앱/AR폭죽 불꽃놀이 2019. 12. 30. 13:35
설치없이 웹브라우저로 즐기는 AR폭죽 불꽃놀이. 내가 만드는 나만의 불꽃쇼 우리만 볼수있는 우리만의 불꽃쇼. 내가 바라보는 세상은 화려하고 아름답다. AR. 증강현실. 이라고 거창하게 이름을 붙여 보았지만, 실은 스마트폰의 카메라와 모션 센서를 활용하여 THREE.js 로 간단(?)하게 만들어진 웹페이지 입니다. horangi.kr/apps/fireWorks/now/ AR폭죽 불꽃놀이 horangi.kr:40020 모바일의 모션센서와 카메라 기능을 사용하기 때문에 당연히 PC로 접속하면 실행되지 않습니다. 가칭 "AR폭죽 불꽃놀이"의 기능은 다음과 같습니다. 카메라를 사용하여 실시간 주변을 본다. 내 위치로부터 반경 200미터 안에서 무작위로 폭죽이 발사된다. - 무작위 이지만 사실은 카메라로 바라보는 ..
-
THREE.Aoudio 에 On이벤트 연결하기웹프로그래밍/THREE.js 2019. 12. 17. 14:38
THREE.js 에서 오디오 재생 관련하여 재생이 끝난 시점을 알아내어 처리할 작업이 있어서 구글링을 통해 알아낸 방법이다. // r111 // 이벤트 형식 선언 THREE.Audio.prototype.onEnded = function() { this.isPlaying = false; this.dispatchEvent( { type: 'ended' } ); // ended }; // 이벤트 등록 var mySound = new THREE.Audio( listener ); audioLoader.load( 'url...', function(buffer){ mySound.setBuffer( buffer ); mySound.addEventListener( 'ended', function(){ console.lo..