노을빛호랑이의 웹개발 놀이 노을빛호랑이의 웹개발 놀이

웹프로그래밍

• 2차원 평면 두지점 간 거리 구하기 -자바스크립트

  웹프로그래밍/자바스크립트 2021. 6. 15. 10:05

  대각선 길이 = \(\sqrt{(C-A)^2 + (D-B)^2}\) 2차원 평면에서 두 좌표 (A,B) 와 (C,D) 사이의 거리를 구하는 자바스크립트 수식 (대각선 길이 구하는 자바스크립트 수식) Math.sqrt( Math.pow( Math.abs(C - A), 2 ) + Math.pow( Math.abs(D - B), 2 ) )

  Read More

• 텔레포트 스크립트 2

  웹프로그래밍/LSL(세컨드라이프) 2021. 5. 28. 15:15

  이곳에 오래전에 등록해 놓은 "텔레포트 스크립트 기본형" 은 해당 오브젝트에 앉아서 위치를 이동하는 스크립트 였고 이곳에 새로 남기는 스크립트는 오브젝트를 클릭하여 원하는 목적지를 다이얼로그 박스에서 선택한뒤 아바타만 바로 옮겨버리는 스크립트 이다. (추가로, 그룹원을 판단하여 그룹원일 경우에만 실행하도록 한다) key teleportee;//클릭한 아바트의 키값 integer elListener;//다이얼로그의 대답을 듣는 리스너 vector goPos;//목적지 위치 벡터값 default { state_entry() { llSay(0, "Touch to teleport"); } touch_start(integer total_num) { //기존에 설정된 리스너가 있을수 있으니 지워준다 llListen..

  Read More

• 이전버전의 .blend 파일을 열때 텍스쳐가 보이지 않는 경우

  웹프로그래밍/LSL(세컨드라이프) 2021. 4. 28. 21:32

  작성시점 환경 blender v2.92 [문제상황] 블렌더 2.8x 이전 버전의 .blend 파일을 그 이후의 버전에서 열때 텍스쳐가 패키지로 포함되어 있는데도 텍스쳐가 보이지 않는다. 위와같은 2.7x 버전대에서 작업된 .blend 파일을 받았다. 그러나 내 2.92버전 블렌더에서 열어보면 위처럼 텍스쳐가 적용되지 않은 모습이다. 살펴보니 텍스쳐는 패키지로 파일내에 포함되어 있다. [원인] 블렌더가 버전업 되면서 제거되거나 변경된 몇가지 기능으로 인해 발생. [해결방법] 텍스쳐를 다시 연결시켜 주어야 함. 1. 각 메터리얼을 선택 위 사진에서는 3개의 매터리얼이 정의되어 있다. 2. "노드사용" 클릭 위 1. 사진의 [표면] 항목의 [노드를 사용]을 클릭한다. 3. "베이스컬러" 옆 작은단추를 눌러 "..

  Read More

• 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";..

  Read More

• POST 형식으로 페이지 이동 - J쿼리(JQurey)

  웹프로그래밍/자바스크립트 2020. 11. 27. 13:20

  자바스크립트로 페이지를 이동시킬경우 location.href 로는 get 형식으로 인수를 전달한다. 그러나 인수의 값이 길거나 또는 인수값을 주소표시줄에 노출시키고 싶지 않은 경우 등등은 POST 형식으로 페이지를 이동시켜야 한다. 자바스크립트로 POST 형식으로 페이지를 이동시키려면 다음의 과정을 실행해야 한다. 오브젝트를 구성요소를 포함하여 만든다. action: 이동할 페이지 URL method: get/post 여기서는 POST를 지정한다. target: 현재창에서 할지 새창으로 열지 등등... 전달할 인수들을 포함시켜 준다. 위에서 만든 폼을 submit() 하여 실행한다. 위와같은 과정을 함수로 만들어 놓고 필요할때 스크립트에 포함해서 사용하면 편하다. function pageGoPost(d)..

  Read More

• 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..

  Read More

• 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( ..

  Read More

• 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..

  Read More