묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결PixiJS로 만드는 2D 그래픽과 게임 with Cursor(AI)
선생님 안녕하세요 질문있습니다.
아무도 질문을 안남긴것으로보아 이 강의는 인기가 없나보네요.. 저는 강의 출시하시자마자 구매해놓고 묵혀놨다가 이제야 조금씩 꺼내보고있는데요 궁금한게있습니다.cursor에게 시키면서 코드를 짜고계신데, 제가 솔직히 이해를 못하겠는 코드라면 어떻게해야하나요? 취미로 하는거라면 괜찮은데 이걸로 밥벌어먹고 살고있다면요?..ㅠㅠ 앞으로의 공부방향과 중점을 어디에 둬야하는지를 잘 모르겠습니다. 그리고 저는 애플클론코딩 강의도 들었던 학생인데요, framer-motion이라는 아무 강력한 css 라이브러리가있잖아요? 이걸 사용하면 애플클론코딩에서했던 그런것들을 간소화시키고 더 쉽게 구현할 수 있는거같습니다.선생님도 framer-motion 자주 사용하시나요?또 유튜브는 안하시나요? 리액트+framer-motion으로 인터랙티브효과 주는것도 한번쯤 보여주셨으면 좋겠습니다.
-
미해결React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
material 파트까지 들은 후 생긴 궁금증
안녕하세요 선생님. material까지 강의를 들으면서 두 가지 궁금한 점이 생겼습니다. 로컬 서버에서 ctrl+s 하면 자동으로 핫로딩되어 코드 변경사항이 화면에 반영되는 것으로 알고 있습니다. (리액트의 경우는 root부터 리렌더링) 그런데 핫로딩을 했을 때 바로 반영되는 코드가 있고, 직접 브라우저에서 새로고침해줘야 반영되는 코드가 있었습니다. <핫로딩 시 안변함 (only 새로고침으로만 변경사항 반영됨)> material wireframe 적용camera fov, far 속성그 외 등등 <핫로딩 시 변함> Geometry 종류 변경 transform 속성 변경 (position, scale, rotation)mesh color 변경materal 종류 변경그 외 등등 위와 같은 차이가 발생하는 이유를 잘 모르겠습니다. 내부 동작면에서 뭔가 다른게 있는 걸까요? (three.js 코드를 까보면 좀 명확해지려나요...) Mesh의 정의를 어떻게 내려야할지 잘 모르겠습니다. 아래 두 가지 중 어느 쪽이 더 맞는 설명일까요?Geometry와 material을 감싼 껍데기 Geometry와 material로 이루어진 하나의 물체 또, 종종 3D 모델링에서 정육면체, 삼각형 등을 오브젝트라고 부르는 걸 들은 적 있는 것 같은데, 해당 오브젝트라는 명칭이 맞는 명칭인가요? 그렇다면, Mesh = 오브젝트 라고 부를 수 있을까요? 감사합니다.
-
미해결React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
zoom과 fov의 차이점이 잘 이해가 안됩니다.
섹션3- 3D 구성요소 알아보기 강의 에서 설명주신것중 강의에서는 fov와 zoom의 수치를 감소시키거나 증가시켰을때, 선이라고 해야하나요? Cam이 찍고있는 좁아지고 넓어지는 그 선의 범위가 fov와 zoom이 같은 것 같아서 헷갈립니다!혹시 어떤 차이가 있는지 알려주실 수 있으실까요?
-
해결됨React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
1강 관련하여 의견을 여쭙고 싶은 게 있습니다.
안녕하세요 선생님. 무료보기 시청 후 바로 결제해서 달리고 있습니다. 하루 1강씩 뚫어보려고 합니다 😋 다름이아니라 DOM, SVG, Canvas를 비교해서 설명해주신 부분에서 의견을 여쭙고 싶은 내용이 있었습니다. Canvas의 2D Context보다 3D Context(WebGL)가 더 빠른 이유 이전에 2D Context를 공부하면서, 3D Context는 하드웨어 가속이 가능하기 때문에 더 빠르다는 글을 읽은 적이 있었습니다. 그런데 렌더링 자체는 Canvas 2D도 하드웨어 가속으로 처리되는 걸로 알고 있어서요. (간단한 작업은 CPU에서 처리한다는 글도 읽은 적 있었는데 어느 쪽이 맞는 말인지 사실 잘 모르겠습니다...) 아래 두 가지 중 어느 쪽이 WebGL Context가 2D Context보다 더 빠른 이유에 더 적합할까요?2D Context는 일부 CPU에서 렌더링하기도 하지만, WebGL은 전부 GPU에서 렌더링한다.WebGL은 셰이더를 GPU에서 실행시키기 때문에 2D Context보다 CPU 처리량이 적다.수많은 개체를 애니메이션 할 때 더 적합한 쪽 : WebGL API vs DOM(or SVG) + transform 속성 DOM 계산은 기본적으로 비용이 많이 발생하니, 수많은 개체를 '렌더링' 할 때에는 WebGL이 훨씬 유리할 것 같았는데, 위치를 옮긴다던가, 크기를 변경하는 애니메이션을 적용할 때에는 강사님께서는 WebGL과 transform 속성 중 어느 쪽을 더 선호하시나요? WebGL도 transform 속성도 레이아웃 재계산을 발생시키지 않지만, 전자는 JS로 조작해야하고, 후자는 조작은 css로 하지만 브라우저 레이어를 활용하는 것으로 알고 있어서요. 어느 쪽이 더 효율적일까요...?강의 중 보여주신 아래 그림에서, SVG의 사각형과 텍스트만 테두리가 좀 흐리게 보이고 있는데 이런 현상이 왜 발생하는걸까요? 이론 적으로는 SVG가 가장 깔끔해야할 것 같은데 픽셀이 깨질 정도로 확대하지 않는 이상은 SVG 쪽이 더 흐릿하게 보이는 것 같아 여쭤봅니다. 사실 강의도 강의지만, 평소에 고민하던 것을 여쭤본 것이기도 해서 가볍게 답변해주시더라도 너무 감사할 것 같습니다. 힘내서 완강해보겠습니다..! 감사합니다.
-
해결됨React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
onClick 이벤트함수로 raycaster 방향이 자동으로 set되나요?
const shoesClick = () => { const intersects = raycaster.intersectObjects( gltf.scene.children, true ); };강의에서는 위와 같이 raycaster.intersectObject 메서드 호출시에 scene에 children을 넘겨주시는데 클릭 이벤트의 eventObject 를 넘겨주지 않았는데도 raycaster에 마우스 방향을 set 가능한가요?
-
해결됨React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
화면에 렌더링은 되는데 코드에서 빨간줄이 떠요
{ "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ], "compilerOptions": { "baseUrl": ".", "paths": { "@components/*": ["src/components/*"] } }, "types": ["node"] }import { Canvas } from "@react-three/fiber"; import { OrbitControls } from "@react-three/drei"; import ShowRoom from "@components/three/ShowRoom"; export default function Home() { return ( <> <Canvas> <axesHelper args={[5]} /> <gridHelper /> <OrbitControls /> <directionalLight position={[3, 3, 3]} /> <ShowRoom /> </Canvas> </> ); }//vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import path from "path"; // https://vite.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: [ { find: "@src", replacement: path.resolve(__dirname, "src"), }, { find: "@components", replacement: path.resolve(__dirname, "src/components"), }, ], }, });vite config, tsconfig.json을 바꿨는데 home.tsx에서 import ShowRoom from "@components/three/ShowRoom"; 불러오는데 Cannot find module '@components/three/ShowRoom' or its corresponding type declarations.ts(2307)못찾는다는 에러가 생깁니다뭐를 잘못했는지 모르겠습니다ㅠㅠㅠ
-
해결됨React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
문제 해결했습니다.
import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' import path, {resolve} from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], // resolve:{ // alias: [ // { // find: "@src", // replacement: path.resolve(__dirname, "src") // // @src 를 쓰면 src 폴더를 의미하게 된다. // // ../../ 이런거 안 써도 된다. // }, // { // find: "@components", // replacement: path.resolve(__dirname, "src/components") // } // ] // } resolve: { alias: { '@components': path.resolve(__dirname, 'src/components'), '@src': path.resolve(__dirname, 'src') } } })chatGPT 가 알려줬어여 ㅎㅎ
-
해결됨React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
문제 있어요! alias Path @ 문제
{ "compilerOptions": { "baseUrl": ".", "paths": { "@components/*" : ["src/components/*"], "@src/*" : ["src/*"] } }, "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ] } 6분 08초 인데, 제꺼는 강사님꺼와 다르게 tsconfig 가 위와 같이 되어 있고, 여기 부분에서 넘어가 지지 않습니다. import React from "react"; import { Canvas } from "@react-three/fiber" import ShowRoom from "@components/ShowRoom" import { OrbitControls } from "@react-three/drei"; export default function Home(){ return ( <> <Canvas> <OrbitControls/> <directionalLight position={[5, 5, 5]}/> <axesHelper args={[5]}/> <gridHelper/> <ShowRoom/> </Canvas> </> ) } import ShowRoom from "@components/ShowRoom" 여기부분에 에러가 뜹니다에러메세지 [plugin:vite:import-analysis] Failed to resolve import "@components/ShowRoom" from "components/Home.tsx". Does the file exist? vite.config.js 는 아래와 같이 설정 했습니다. import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], resolve:{ alias: [ { find: "@src", replacement: path.resolve(__dirname, "src") // @src 를 쓰면 src 폴더를 의미하게 된다. // ../../ 이런거 안 써도 된다. }, { find: "@components", replacement: path.resolve(__dirname, "src/components") } ] } }) 파일 구조입니다.
-
해결됨React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
dom / svg / canvas
혹시 웹에서 원하는 곳에 이미지를 애니메이션으로 보내거나 웹을 구성할때 canvas로는 좌표를 찍어 위치를 조정하기 쉬워보이는데 dom / svg를 활용할땐 웹에 원하는 곳으로 배치하기 위해선 그리드를 활용해야하나요 보통?
-
해결됨React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
물질을 클릭했을 때 이벤트
물질에게 클릭이벤트를 주어 보이는 시점이 바뀌거나 물체가 이동할수있게 하고싶습니다.
-
해결됨OpenGL 쉐이더 (7) shader 3D 그래픽스 - 텍스처 매핑, 큐브 맵, 환경 매핑, 범프 매핑
질문드려요
opengl 강의는 몇강이 마지막 예정인가요? 그리고 vulkan은 몇강 정도 예상중이신지요?마지막으로 수강평보니까 DX12도 고려하실 의향이 있으신듯하게 답을 다셨던데 현재는 계획은 어떤가요?
-
해결됨OpenGL 쉐이더 (7) shader 3D 그래픽스 - 텍스처 매핑, 큐브 맵, 환경 매핑, 범프 매핑
part8 오픈 일정 - 재질문
이전에 part8 강의 오픈 일정에 대해 문의 드렸었는데 그때 주신 답변이 아래와 같았습니다.'part 8 은 9월 중순경에 릴리즈 될 것으로 보이고,vulkan 은 10월 말까지 완결될 것으로 보입니다.' 강의를 기다렸는데 늦어지시는 것 같아 재차 질문 드리게 되었습니다.part8 과 vulkan 강의 오픈 일정을 알 수 있을까요?
-
해결됨OpenGL 쉐이더 (7) shader 3D 그래픽스 - 텍스처 매핑, 큐브 맵, 환경 매핑, 범프 매핑
part 8 오픈 일정
part8 오픈 일정이 어떻게 되나요?vulkan 강의의 대략적인 오픈 일정도 알 수 있을까요?
-
해결됨OpenGL 쉐이더 (7) shader 3D 그래픽스 - 텍스처 매핑, 큐브 맵, 환경 매핑, 범프 매핑
복수개의 서로 다른 texture를 Picture in Picture 형식으로 rendering하는 최적의 방법
먼저 좋은 강의 감사드립니다.Multi Texture 강의를 듣고 다음과 같은 사항을 렌더링 하는 가장 좋은 방법이 궁금하여 질문 남깁니다. 복수개의 서로 다른 동영상을 다음 그림과 같이 화면에 표출한다고 할 때, Multi Texture 개념을 통한 Rendering이 가능할까요? 현재는 5번의 Draw를 호출하는 형태로 진행하고 있는데, 좀더 효율적인 방법이 있는지 궁금하여 질문 올립니다.감사합니다.