웹프로그래밍
-
스카이박스(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..
-
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..
-
엘리먼트의 show, hide 이벤트 감지하기 - J쿼리웹프로그래밍/자바스크립트 2019. 10. 17. 18:29
특정 엘리먼트에 .show() 또는 .hide() 이벤트가 실행될때 별도로 on() 이벤트에 등록시켜 관련된 처리를 하는 방법. //-- show, hide 이벤트 정의 (function ($) { $.each(['show', 'hide'], function (i, ev) { var el = $.fn[ev]; $.fn[ev] = function () { this.trigger(ev); return el.apply(this, arguments); }; }); })(jQuery); //-- on 이벤트 등록 $(셀렉터).on("show", function(){ console.log("menu on"); }); $(셀렉터).on("hide", function(){ console.log("menu off"); ..