블렌더 texture paint 시 미러모드
미해결
Three.js로 시작하는 3D 인터랙티브 웹
눈을 하나씩 그리고 싶은데 그릴 때 마다 미러모드가 작동하는 것 처럼 그려져요
- blender
- 인터랙티브-웹
- three.js
김혜빈
댓글 0
좋아요 0
조회수 194
묻고 답해요
173만명의 커뮤니티!! 함께 토론해봐요.
파트 4 오픈 일정 문의
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.03
안녕하세요! 1~3 파트 까지 완강했고.. 다른 강의자보다 범쌤 강의가 저에게 너무 잘 맞아서.. 범쌤 다음 강의만 기다리고 있습니다 ㅠ ㅅ ㅠ 다음 강의 오픈 일정 예정이 언제쯤 일까요?! ㅠ
- javascript
- 애니메이션
- 인터랙티브-웹
- gsap
- scrolltrigger
한봉경
댓글 2
좋아요 1
조회수 172
생성자 함수를 클래스 함수로 변경 하고 this 오류 관련
미해결
인터랙티브 웹 개발 제대로 시작하기
init() { window.addEventListener('scroll', () => { this.scrollRunHandler(); this.scrollPosition(this.mainElem); }); } scrollRunHandler() { clearTimeout(this.scrollState); if (!this.scrollState) { this.mainElem.classList.add('running'); } this.scrollState = setTimeout(() => { this.scrollState = false; this.mainElem.classList.remove('running'); }, 500); } scrollPosition = (elem) => { if (elem.lastScrollTop > window.scrollY) { // 스크롤을 아래로 this.mainElem.dataset.direction = 'backward'; } else { // 스크롤 위로 this.mainElem.dataset.direction = 'forward'; } elem.lastScrollTop = window.scrollY; } 생성자 함수를 클래스 함수로 변경하면서 this가 character를 가리켜야 되는데 window를 가리키는 문제가 생겨서 변수를 그냥 넣어줘서 작동은 하는데 이렇게 하는게 맞는지 궁금합니다.
- HTML/CSS
- javascript
- 인터랙티브-웹
samkookji12
댓글 1
좋아요 0
조회수 183
DragControls의 인자값을 바꾸지 않았는데 에러가 안떠요!
미해결
Three.js로 시작하는 3D 인터랙티브 웹
DragControls 1:05초에 인자를 바꾸지 않으면 에러가 나야하는데, 저는 에러가 안뜨는데 이유가 뭘까요?? 서버도 껐다가 다시 켜도 동작만 안될 뿐이고, 에러는 안납니다! import * as THREE from 'three'; import { DragControls } from 'three/examples/jsm/Addons.js'; // ----- 주제: PointerLockControls 클릭 시 마우스 커서 사라지고, 마인크래프트 스타일로 변경됨 export default function example() { // Renderer const canvas = document.querySelector('#three-canvas'); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1); // Scene const scene = new THREE.Scene(); // Camera const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.y = 1.5; camera.position.z = 4; scene.add(camera); // Light const ambientLight = new THREE.AmbientLight('white', 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight('white', 1); directionalLight.position.x = 1; directionalLight.position.z = 2; scene.add(directionalLight); // Controls const controls = new DragControls(camera, renderer.domElement); // Mesh const geometry = new THREE.BoxGeometry(1, 1, 1); let mesh; let material; for (let i = 0; i < 20; i++) { material = new THREE.MeshStandardMaterial({ // rgb (0,0,0)~(255,255,255) => (0,0,0)인 경우 검은색에 가까워지므로 최소:50 최대:250-50 color: `rgb( ${50 + Math.floor(Math.random() * 205)}, ${50 + Math.floor(Math.random() * 205)}, ${50 + Math.floor(Math.random() * 205)} )`, }); mesh = new THREE.Mesh(geometry, material); mesh.position.x = (Math.random() - 0.5) * 5; mesh.position.y = (Math.random() - 0.5) * 5; mesh.position.z = (Math.random() - 0.5) * 5; scene.add(mesh); } // 그리기 const clock = new THREE.Clock(); function draw() { const delta = clock.getDelta(); renderer.render(scene, camera); renderer.setAnimationLoop(draw); } function setSize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.render(scene, camera); } // 이벤트 window.addEventListener('resize', setSize); draw(); }
- blender
- 인터랙티브-웹
- three.js
김혜빈
댓글 1
좋아요 0
조회수 123
화면에 렌더링은 되는데 코드에서 빨간줄이 떠요
해결됨
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에서 i mport ShowRoom from "@components/three/ShowRoom"; 불러오는데 Cannot find module '@components/three/ShowRoom' or its corresponding type declarations.ts(2307) 못찾는다는 에러가 생깁니다 뭐를 잘못했는지 모르겠습니다ㅠㅠㅠ
- javascript
- react
- typescript
- 인터랙티브-웹
- three.js
- webgl
- react-three-fiber
kiseon Han
댓글 2
좋아요 0
조회수 433
desk 가 밑으로 떨어졌을 때, "y 값이 문자열"에 대한 내용입니다.
미해결
Three.js로 1인칭 3D 웹사이트 만들기
우선 원인은... MeshObject 클래스 속성 중 differenceY 의 값에 OR 연산자를 사용., main.js 에서 ground 변수에 '0' 문자열 값을 할당해서 그런데요. ground 는 y 속성값을 할당하지 않았기 때문에 MeshObject 클래스에서 info.y 는 undefined 이고, this.y 는 "this.height / 2 + this.differenceY" 의 계산이 적용되서 " 0.1 / 2 + '0' " 즉, 문자열 '0.20' 이 출력됩니다. 산술 연산자 '+' 가 들어가게되면, 그 계산식의 결과값은 반드시 문자열이 나옵니다. x, y, z, differenceY 는 모두 좌표와 연관된 값으로, 모두 숫자 데이터 타입을 할당받아야 하는 일관성이 필요한데 ground, floor 에서만 differenceY 가 문자열을 받아 발생한 이슈입니다. 강의를 들어보던 중 강사님께서 처음에 숫자 0 을 사용하셨고, this.differenceY 속성에 값을 할당할때 OR 연산자를 쓰심으로인해 숫자 0 이 null/undefined 로 인식되는 것 때문에 문자열로 바꾸신거 같더라구요. 조금 더 정확하게 하자면, OR 연산자가 아닌 ?? 연산자를 사용해 숫자 0을 값 그대로 사용할 수 있도록 바꾸고 ground 에도 문자열 '0' 이 아닌 숫자 0 을 넣어주면 될것같습니다. x, y, z 에 곱하기 1을 하는 추가코드는 필요없어집니다.
- javascript
- 인터랙티브-웹
- 포트폴리오
- three.js
- 3d
김찬기
댓글 0
좋아요 0
조회수 120
스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제
미해결
인터랙티브 웹 개발 제대로 시작하기
스크롤이 처음과 끝이 아닌 중간 위치에 있을 때 창의 크기를 변환하면 스크롤 비율이 달라져서 그런지 화면이 z축을 기점으로 순간이동을 합니다. 이것을 부드럽게 하기 위해서는 어떠한 방법이 있을까요?
- HTML/CSS
- javascript
- 인터랙티브-웹
유인준
댓글 1
좋아요 0
조회수 152
GSAP을 사용하면서 리사이징 시 애니메이션 값 재할당에 대해 질문드립니다.
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.03
const end = document.querySelector(".last").getBoundingClientRect().left; 위 코드와 같이 요소의 특정 값을 사용하여 gsap 애니메이션을 사용할 경우 resize 이벤트 시 정상적으로 동작하는 케이스가 종종 있는데 리사이즈 이벤트가 발생할 때마다 addEventListener를 통해 gsap 애니메이션 코드를 모두 다시 호출하여 값을 재할당하는 방법밖에 없을까요? 리사이징에 대비하여 애니메이션 값을 동적으로 업데이트할 수 있는 더 효율적인 방법이나 권장되는 접근 방식이 있는지 질문드립니다.
- javascript
- 애니메이션
- 인터랙티브-웹
- gsap
- scrolltrigger
보르코
댓글 2
좋아요 1
조회수 244
animation이벤트 질문이요!
미해결
인터랙티브 웹 개발 제대로 시작하기
window를 ballElem로 변경하면 click했을때 작동을 하지 않는데 이유를 모르겠습니다..! <script> const ballElem=document.querySelector('.ball'); window.addEventListener('click', function(){ ballElem.style.animation='ball-ani 1s 3 forwards'; }); ballElem.addEventListener('animationend',function(){ ballElem.classList.add('end'); }); ballElem.addEventListener('animationiteration',function(){ console.log('반복'); }); </script>
- HTML/CSS
- javascript
- 인터랙티브-웹
minisnake
댓글 1
좋아요 0
조회수 88
강의 자료 요청합니다~
미해결
실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
강의를 듣기 시작했는데 강의자료는 어디에서 받는지 몰라 질문드려요~ kjj5421@naver.com 으로 자료 요헝 드려도 될까요?
- HTML/CSS
- jquery
- 인터랙티브-웹
- 반응형-웹
roaddion
댓글 2
좋아요 0
조회수 157
스무스 스크롤바 모바일에서 뻑뻑한 느낌이 들어요!
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.03
스무스 스크롤바 이용해서 포트폴리오 사이트 만들고 있어요! 그런데 폰으로 확인해보니 스크롤트리거 pin 고정부분은 엄청 부드럽게 작동하고, 나머지 부분에선 뻑뻑한데 이유가 뭔지 알 수 있을까요? 그리고 강의 너무너무 감사합니다!! 덕분에 빠르게 gsap 배우고 있어요!!
- javascript
- 애니메이션
- 인터랙티브-웹
- gsap
- scrolltrigger
rinrinhye
댓글 2
좋아요 1
조회수 278
모바일 화면 최적화 방법 질문드립니다!
미해결
웹 애니메이션의 새로운 표준, Web Animations API
선생님, 안녕하세요! 모바일 화면에서도 비율을 유지하면서 반응형으로 동작하게 만드는 것이 가능할까요? 여러 방법을 시도해 보았는데, 해결이 잘 안 돼서 이렇게 질문을 남깁니다. 아니면 차라리 모바일 전용 SVG를 따로 만들고, PC 버전에서는 display: none으로 처리한 후 모바일일 때만 보이게 하는 방식이 더 나을까요? 조언 부탁드립니다!
- HTML/CSS
- javascript
- 인터랙티브-웹
- frontend
- web-animations-api
파이썬
댓글 1
좋아요 0
조회수 256
선생님 알려주신 내용을 기반삼아 구현하고 싶은 UI가 있습니다.
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
안녕하세요 범쌤...! 강의 너무 잘 듣고 있습니다. motionPath를 이용해서 구현하고 싶은 UI가 있습니다. 대략적인 구현하고자 하는 모양은 이러합니다. ● 디폴트 1. 행성이 각 궤도에 맞춰 공전 ● 행성을 클릭시 1. 공전이 멈추고 클릭 된 행성이 줌인 2.행성마다 행성의 설명 UI가 보여짐 설명이 부족한 것 같아 부족하지만 피그마로 그려서 첨부해봅니다.. 실무에 필요한데 도저히 감이오지 않아요 ㅜㅜㅜㅜㅜㅜ
- HTML/CSS
- javascript
- 인터랙티브-웹
- gsap
eljsh95
댓글 2
좋아요 1
조회수 236
OneScroll Layout 질문 드립니다!
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.03
안녕하세요 만들었던 예제를 살펴보는 와중에 section1, section4에서 약간의 문제(?)가 발생하여 질문드립니다. section1에서 스크롤을 올려버리면 다시 스크롤을 아래로 내려도 반응이 없고 아예 먹통이 되어버립니다 section4에서는 스크롤을 아래로 내리면 먹통이 됩니다 혼자 해결해보려고 했으나 감이 오질않아서.. 어떻게 코드를 수정하면 좋을지 질문드립니다!
- javascript
- 애니메이션
- 인터랙티브-웹
- gsap
- scrolltrigger
김세진
댓글 2
좋아요 1
조회수 196
autoAlpha : 0 사용 시 css로 visibility hidden 꼭 줘야하는지 궁금해요
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.01
autoAlpha : 0 이 css visibility : hidden, opacity 0 으로 설정해준다고 하고 css에 visibility hidden 을 제거해도 깜빡이는 현상은 안일어나더라구요! css에도 visibility:hidden을 작성하는 이유가 있을까요?
- HTML/CSS
- javascript
- 인터랙티브-웹
- gsap
rinrinhye
댓글 2
좋아요 1
조회수 263
코드가 왜 그런지 모르겠는데, 이럴땐 어떻게 공부해야하나요?
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
7.4 PlayListCarousel - 1 강의의 6분 15초를 보시면, <div className="relative left-[-45px]"> 부분이 있는데요. left-[-45px]을 해야 화살표가 보이게 되는데, 이게 왜 그런질 모르겠습니다. 근데 제가 질문 드리고싶은 것은, 저 코드가 어떤 원리로 작동되는지가 아닙니다. 이럴때는 스스로 그냥 계속 문서를 참고하든 개발자도구를 참고하든 이해 될때까지 파고드는게 맞는 방법인지 여쭤보고 싶습니다. 이것 말고도 제가 어려웠던 부분에 대한 예시를 들자면, 1) components 폴더에 저장되는 것들과 components/elements 폴더에 저장되는 것들의 차이를 정확히 모르겠음. 2) 태그를 감쌀때 어떤 것은 div로 컨테이너를 주시고 어떤것은 안주시는 경우가 있는데, 차이를 모르겠음. 3) useUIState에 저장된 변수 이름이 "homeCategory"인데, 제 생각엔 이것 보다는 "selectedSubject" 같은 이름이 더 직관적이라 생각하는데, 그럼에도 제 생각보단 선생님 생각이 맞을건데 제 생각이 어느부분이 부족한질 모르겠음. 4) 위와 같은 문제들을 해결하고 싶어서, 책을 찾아보려 하는데 리액트 훅을 설명해주는 책들은 많은데, HTML CSS를 어떤 구조로 짜야 하는지, 리액트 앱 만들때 폴더구조는 어떻게 하는게 좋은지에 대한 책은 없어서 어떻게 해야할지 모르겠음. 이런 어려움이 있었습니다. 혹시 공부법 조언 부탁드려도 될까요?
- react
- 인터랙티브-웹
- 클론코딩
- next.js
- tailwind-css
- zustand
박상원
댓글 3
좋아요 1
조회수 266
강의외 복잡한 ui 입력폼 관련 질문 있습니다
미해결
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
지금 여기까지 구현 했는데 이렇게 순서 바꾸기를 해야 되는데 잘안됩니다 혹시 원인이나 해결 방법 아시나요? https://okky.kr/questions/1516211 그리고 이렇게 데이터가 복잡할 경우 프론트에서 데이터 가공해서 디비로 보내는게 어쩔수 없다고 보시나요 아니면 조금 과잉이라고 보시나요? 그점도 궁금합니다
- react
- 인터랙티브-웹
- 클론코딩
- next.js
- tailwind-css
- zustand
현석오
댓글 2
좋아요 1
조회수 245
npx랑 yarn이랑 같이 써도 되나요?
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
프로젝트 세팅할때는 yarn을 쓰셨는데요. shadcn에서 avatar 설치할때는 npx을 쓰셔서요. 같이 써도 문제가 없나요?
- react
- 인터랙티브-웹
- 클론코딩
- next.js
- tailwind-css
- zustand
박상원
댓글 2
좋아요 0
조회수 473
문제 해결했습니다.
해결됨
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 가 알려줬어여 ㅎㅎ
- javascript
- react
- typescript
- 인터랙티브-웹
- three.js
- webgl
- react-three-fiber
이명재TV
댓글 1
좋아요 0
조회수 211
문제 있어요! alias Path @ 문제
해결됨
React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
{ "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") } ] } }) 파일 구조입니다.
- javascript
- react
- typescript
- 인터랙티브-웹
- three.js
- webgl
- react-three-fiber
이명재TV
댓글 2
좋아요 0
조회수 513
인기 태그
인프런 TOP Writers
주간 인기글
- [부산] AI 세미나 : 9월 수강생 모집 Edun
- 9월 출시 예정 공연 예매 플랫폼 멀티켓과 함께할 백엔드 개발자를 구합니다 sumin
- 🧘♀️ [운동공간] 기획자/디자이너/앱 개발자를 찾습니다 띄띄
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv