핵심은 transform :translateX() 인 듯?
[링크 : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX]
[링크 : https://jforj.tistory.com/317]
| html custom tag (0) | 2025.05.14 |
|---|---|
| polypill (0) | 2025.03.05 |
| webgl + three.js를 이용한 GL 공부하기 (feat 클로드) (0) | 2024.10.18 |
| 웹 브라우저에서 웹 캠 띄우기 (0) | 2024.09.24 |
| three.js (0) | 2024.09.19 |
시대가 좋아지긴 했다.
맨날 카메라에서 옮기고, Depth에서 막히고 그랬는데
웹에서 이렇게 작동하는 소스를 바로 생성이 가능하다니.
이걸 다시 분석하고 이해해서 원하는걸 만들어 봐야겠다.
그나저나 쉐이더까지 뚝딱이라니.. 무섭네
| polypill (0) | 2025.03.05 |
|---|---|
| css 캐로젤 (0) | 2024.11.12 |
| 웹 브라우저에서 웹 캠 띄우기 (0) | 2024.09.24 |
| three.js (0) | 2024.09.19 |
| XMLHttpRequest 가로채기 (0) | 2024.07.19 |
예전에 본 것 같긴한데 해본적은 없는 것 같아서 검색
[링크 : https://velog.io/@davelee/browser에서-webcam-이용하기]
| const constraints = { audio: true, video: { width: 1280, height: 720 }, }; navigator.mediaDevices .getUserMedia(constraints) .then((mediaStream) => { const video = document.querySelector("video"); video.srcObject = mediaStream; video.onloadedmetadata = () => { video.play(); }; }) .catch((err) => { // always check for errors at the end. console.error(`${err.name}: ${err.message}`); }); |
[링크 : https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia]
| Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers. navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (navigator.getUserMedia) { navigator.getUserMedia( { audio: true, video: { width: 1280, height: 720 } }, (stream) => { const video = document.querySelector("video"); video.srcObject = stream; video.onloadedmetadata = (e) => { video.play(); }; }, (err) => { console.error(`The following error occurred: ${err.name}`); }, ); } else { console.log("getUserMedia not supported"); } |
[링크 : https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia] deprecated
| css 캐로젤 (0) | 2024.11.12 |
|---|---|
| webgl + three.js를 이용한 GL 공부하기 (feat 클로드) (0) | 2024.10.18 |
| three.js (0) | 2024.09.19 |
| XMLHttpRequest 가로채기 (0) | 2024.07.19 |
| web worker (0) | 2024.07.19 |
javascript로 3d 그래픽을 그리는 라이브러리라는데
webGL을 이용한건진 잘 모르겠다.
[링크 : https://threejs.org/]
fog도 그냥 설정해주는거 보면 꽤나 추상화된 gl 라이브러리라고 보면 되려나?
[링크 : https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_buffergeometry.html]
| webgl + three.js를 이용한 GL 공부하기 (feat 클로드) (0) | 2024.10.18 |
|---|---|
| 웹 브라우저에서 웹 캠 띄우기 (0) | 2024.09.24 |
| XMLHttpRequest 가로채기 (0) | 2024.07.19 |
| web worker (0) | 2024.07.19 |
| mirage.js - api mockup (0) | 2024.07.19 |
웹 소켓으로 float 형을 보내고 받는 예제를 만들어 달라고 gpt에 요청했더니
처음보는 객체...? 메소드가 보여서 검색
그런데 push 하면 안느리려나? 조금 걱정되네
Int32Array나 Float32Array로 좀더 해보고 안되면 DataView로 해봐야겠다.
| socket.onmessage = function(event) { const data = event.data; const floatData = []; const intData = []; const floatSize = 4; // float32는 4바이트 const intSize = 4; // int32는 4바이트 const floatArrayLength = 4; const intArrayLength = 4; const view = new DataView(data); // float32 배열 추출 for (let i = 0; i < floatArrayLength; i++) { floatData.push(view.getFloat32(i * floatSize, true)); } // int32 배열 추출 for (let i = 0; i < intArrayLength; i++) { intData.push(view.getInt32(floatArrayLength * floatSize + i * intSize, true)); } document.getElementById("floatData").textContent = JSON.stringify(floatData); document.getElementById("intData").textContent = JSON.stringify(intData); }; |
[링크 : https://chatgpt.com/share/fb063d40-1441-457c-a209-0f594d2c482d]
[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/DataView/DataView]
[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/DataView/getFloat32]
| Uncaught TypeError: object.at is not a function (0) | 2025.03.04 |
|---|---|
| javascript ... (rest parameter) (0) | 2024.08.12 |
| qr decoder (0) | 2024.04.19 |
| QR decoder로 로또 추첨하기 (0) | 2024.04.16 |
| javascript 집합(set) 내용 출력하기 (0) | 2024.04.16 |
이건 연산자 인가 아닌가..
[링크 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters]
| Uncaught TypeError: object.at is not a function (0) | 2025.03.04 |
|---|---|
| js DataView() (0) | 2024.08.21 |
| qr decoder (0) | 2024.04.19 |
| QR decoder로 로또 추첨하기 (0) | 2024.04.16 |
| javascript 집합(set) 내용 출력하기 (0) | 2024.04.16 |
mirage.js 에서 사용하는 기술 같은데 써볼일 있으려나?
[링크 : https://github.com/shenzhenjinma/hook-chrome-ajax/blob/develop/background.js]
| 웹 브라우저에서 웹 캠 띄우기 (0) | 2024.09.24 |
|---|---|
| three.js (0) | 2024.09.19 |
| web worker (0) | 2024.07.19 |
| mirage.js - api mockup (0) | 2024.07.19 |
| 웹 브라우저 쿠키 (0) | 2024.03.27 |
자바 스크립트의 메인 쓰레드가 아닌 브라우저의 백그라운드 쓰레드로 돌리는 기능.
탭이 비활성화 되어도 멀티 쓰레드로 작동이 된다고.
[링크 : https://samori.tistory.com/87]
[링크 : https://medium.com/hcleedev/web-web-worker-사용법과-주의할-점-webpack-메모리-문제-테스트-모킹-2d77c5b23afe]
| three.js (0) | 2024.09.19 |
|---|---|
| XMLHttpRequest 가로채기 (0) | 2024.07.19 |
| mirage.js - api mockup (0) | 2024.07.19 |
| 웹 브라우저 쿠키 (0) | 2024.03.27 |
| let's encrypt 방식 (0) | 2024.02.02 |
신기하게도(?) 크롬의 XMLHttpRequest 나 fetch 명령을 가로채서
서버 구동없이 클라이언트에서 api 목업을 한다고 한다.
네트워크로 나가지만 않을뿐 결국에는 함수의 결과물을 리턴해주는 식으로 간소화 하는건가..?
[링크 : https://miragejs.com/]
| XMLHttpRequest 가로채기 (0) | 2024.07.19 |
|---|---|
| web worker (0) | 2024.07.19 |
| 웹 브라우저 쿠키 (0) | 2024.03.27 |
| let's encrypt 방식 (0) | 2024.02.02 |
| ajax session 인증 (0) | 2024.01.26 |
색상을 포함한 스타일 지정 가능한 라이브러리 찾는중
예제를 봐서는 멀티시트도 지원
| electron asar 파일 (0) | 2025.08.26 |
|---|---|
| web qr decoder (0) | 2024.04.04 |
| node.js 웹소켓 채팅 서버 예제 (0) | 2022.07.14 |
| ubuntu 18.04 / nodej.s 18.x 실패 (0) | 2022.05.19 |
| 웹소켓 (0) | 2022.03.25 |
|
