프론트엔드 첫걸음

이쯤되면 외울때도 됐는데.. 캔버스 기본적으로 width 300, height 150 설정되어있다. 이것이 css로 조절되는 것이다. canvas 자체의 width, height를 css width와 height에 맞춰 확대 or 축소되는 것.. ex1. 캔버스 길이 놔두고 css길이만 수정 -> 컨텍스트에 그린 것이 height 비에 맞춰 수정됨 canvas.style.width = 300 + "px"; canvas.style.height = 300 + "px"; //canvas height 150-> 300 강제로 2배 늘림 ctx.fillRect(10, 10, 50, 50); // => 세로로 2배 긴 사각형됨 ex2. 컨텍스트에 그린것이 왜곡되지 않도록 캔버스 기본길이 수정 canvas.style..

import * as THREE from "three"; import { OrbitControls } from "three/addons/controls/OrbitControls.js"; window.addEventListener("load", function () { init(); }); function init() { const renderer = new THREE.WebGLRenderer({ antialias: true, }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const scene = new THREE.Scene(); const camera = n..

https://threejs.org/docs/?q=Buffer#api/en/core/BufferGeometry three.js docs threejs.org BufferGeometry안에 정점에 대한 정보를 담아서 Geometry를 만들 수 있다. const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, innerWidth / innerHeight, 0.1, 1000 ); camera.position.z = 5; const renderer = new THREE.WebGLRenderer(); renderer.setSize(innerWidth, innerHeight); renderer.setPixelRatio(device..

gsap으로 rotation을 바꾸고 렌더함수를 루프시키면 렌더링될 때 마다 바뀐 rotation으로 렌더링된다 만약 그냥 자연스럽게 회전하는 것이 아니라 단순히 각도만 바꿔주려면 renderer(scene,camera)를 렌더함수에 넣지 않고 gsap 함수 호출 후 renderer(scene,camera) 만 사용하면 된다. See the Pen gsap rotating cube by JEONG (@cona) on CodePen.

설명 궤도 컨트롤을 사용하면 카메라가 대상 주위를 선회할 수 있습니다. 사용자의 마우스 이벤트를 감지하여, 카메라를 이동시키거나 회전시키는 등의 작업을 수행합니다. 그러나 이러한 변화를 실제로 적용하려면 매 프레임마다 update 메서드를 호출하여 카메라의 변화를 적용해 주어야 합니다. update를 호출해야 할 때 카메라 시점 수동으로 바꿀 때 OrbitControls가 카메라의 위치, 시점을 바꾸는 역할을 하기 때문에, 사용자가 직접 카메라의 위치를 바꾸는 경우 변경 후에 OrbitControls 클래스의 update() 메서드를 호출하여 카메라의 위치와 시점 등을 업데이트해야 합니다. (그래야 OrbitControls 클래스가 제공하는 인터랙션 기능과 수동으로 변경된 카메라 위치나 시점 등이 일치함..

function handleResize() { camera.aspect = window.innerWidth / window.innerHeight; //카메라의 종횡비 수정 camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); //렌더러 사이즈 수정 renderer.render(scene, camera); //재렌더링 } window.addEventListener('resize', handleResize);

함수와 변수 x를 받아서 함수에 변수 x 를 넣은 값을 반환하는 함수 fnc1 가 있다고하자. const fnc1 = (paraFnc, x) => paraFnc(x); 이것을 화살표 함수 2 개를 쓴 함수로 바꿔서 사용할 수 있다. const fnc2 = (paraFnc) => x => paraFnc(x); 왜냐면 이 화살표 2개짜리 함수는 아래의 함수와 같기 때문이다. function fnc3 (paraFnc) { return function(x) { return paraFnc(x) } } //fnc3 함수는 paraFnc함수를 받아서, // x를 받아 paraFn(x)를 반환하는 익명함수를 반환한다. 테스트 결과는 다음과 같다. //파라미터로 들어갈 함수 const double = x => x * 2..

[출처] https://medium.com/free-code-camp/how-do-javascript-rest-parameters-actually-work-227726e16cc8 How JavaScript rest parameters actually work My last article covered spread syntax and Object.assign in detail, but glossed over rest parameters in the interest of time. I do, however… medium.com 내부동작을 살펴보면 이렇다. someFunction = (...args) => args; 위 someFunction 함수는 아래와 같다. (옛날 문법으로 풀어서 보기) someFunc..

https://medium.com/free-code-camp/pipe-and-compose-in-javascript-5b04004ac937 A quick introduction to pipe() and compose() in JavaScript Functional programming’s been quite the eye-opening journey for me. This post, and posts like it, are an attempt to share my insights and… medium.com arrow 함수와 rest parameter, reduce 함수를 이해한 상태이면 아래와 같은 compose 함수를 이해할 수 있다. // 함수들과 x를 받아서 차례로 함수들에 결과를 대입하게 하는 ..

svg 파일은 비율이 있어서 화면에 가득차게 연출하면 화면의 일부가 잘린다. 이때 aspectRatio를 어떻게 할 것인지 설정을 바꾸어 어떤부분을 잘리게 해서 화면에 보여줄지 설정할 수 있다. preserveAspectRatio: 'xMidYMin slice', 이 경우 x축 중앙에 맞추고, Y축은 위쪽이 보이도록 ( Y축의 0값 부분이 잘리도록) 하는 설정이다 현재 lottie file을 사용해서 개발하고 있는데 rendererSetting에서 아래와 같이 설정해 줄 수 있다. rendererSettings: { preserveAspectRatio: 'xMidYMin slice', }, xMaxYMin slice 해주면 우측 위 방향의 프레임을 보존하는 형태로 잘린다.