분류 전체보기
-
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..
-
cordova browsersync gen2 플러그인 (live reload)프로그래밍/코르도바(CORDOVA) 2019. 12. 3. 15:25
코르도바가 9.0 버전으로 업그레이드 된 뒤로 플러그인이 작동되지 않았으나 최근에 9.0버전에 작동되도록 포크된 플러그인이 새로 나왔습니다. cordova-plugin-browsersync-gen2 사용방법은 같습니다. 코르도바(Cordova) 작업중 소스코드를 수정하면서 바로바로 적용된 화면을 보고싶을때. 프로젝트에 cordova-plugin-browsersync 플러그인을 설치한다.코르도바 실행시 -- --live-reload 옵션을 사용한다. $ cordova plugin add cordova-plugin-browsersync $ cordova plugin add cordova-plugin-browsersync-gen2$ cordova run browser --live-reload
-
리눅스 민트(기타 리눅스)를 메인 데스크탑으로 사용하지 말아야 하는 이유리눅스/민트(Mint) 2019. 11. 16. 18:10
리눅스 민트를 처음 접한지도 벌써 3~4년은 된것 같다. 처음 윈도우즈 10 이 나오면서 윈도우즈 7 에서 10 으로 업그레이드 하면서 스트레스 받다가 우연히 리눅스 민트를 알게 되었고 지금까지 수도없이 리눅스(민트)와 윈도우즈10 을 왔다갔다 하며 사용하는 중이다. 최근들어 나도 리눅스를 메인 데스크탑으로 사용해볼까? 하고 물어보는 사람들이(전공이 개발자가 아닌) 늘어나는듯 해서 절대 함부로 가볍게 발을 들여놓으면 얼마나 큰 고통을 받게되는지 정리해 보려고 한다. 개발자가 아닌 일반인이 처음으로 리눅스를 메인 데스크탑으로 사용하기 시작하면 대부분 다음과 같은 단계를 거치게 된다.(아마도... 나처럼...) 리눅스의 가벼운 퍼포먼스에 놀란다. 아주 사소한, 윈도우에서는 경험할수 없었던 정말 사소한 버그(..
-
엘리먼트의 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"); ..