inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

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 조회수 122

문제 해결했습니다.

해결됨

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 조회수 214

문제 있어요! 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 조회수 516

blender 에서 색칠하기 편 Texter paint slot추가없음

미해결

Three.js로 시작하는 3D 인터랙티브 웹

blender 색칠하기 편을 보고 작업을 진행중 입니다. 영상에서는 Texture Paint를 누르면 mesh가보라색이 된다고 나오며 이후 오른쪽 창에 플러스 버튼을 눌러서 Texture Paint Slot을 추가하는 장면이 나오지만 저의 경우 캐릭터가 보라색으로 바뀌지도, 해당 플러스 버튼이있지도 않습니다. 이유를 알 수 있을까요? 사진 첨부하겠습니다.

  • blender
  • 인터랙티브-웹
  • three.js
댓글 2 좋아요 0 조회수 1100

dom / svg / canvas

해결됨

React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발

혹시 웹에서 원하는 곳에 이미지를 애니메이션으로 보내거나 웹을 구성할때 canvas로는 좌표를 찍어 위치를 조정하기 쉬워보이는데 dom / svg를 활용할땐 웹에 원하는 곳으로 배치하기 위해선 그리드를 활용해야하나요 보통?

  • javascript
  • react
  • typescript
  • 인터랙티브-웹
  • three.js
  • webgl
  • react-three-fiber
mirage0720 댓글 1 좋아요 0 조회수 260

fin 버전도 그냥 실행이 안돼요

미해결

Three.js로 시작하는 3D 인터랙티브 웹

자꾸 하다가 오류메세지도 안뜨는데 혹시나 싶어서 fin버전도 실행해봤는데 아무것도 안뜨고 그냥 흰색 배경만 뜨네요. 라이브러리가 설치되지 않았다고 하기엔 다른 강의로 실행한 three.js는 실행이 됐었는데.... 그리고 canvas크기가 브라우저 창이 아니라 300^150으로만 설정되고 제가 변경해도 변경되지 않습니다.....

  • blender
  • 인터랙티브-웹
  • three.js
znah1231 댓글 2 좋아요 0 조회수 401

자바스크립트 실행이 안되는 것 같아요

미해결

Three.js로 시작하는 3D 인터랙티브 웹

개발자 도구 열어보면 저런 메세지가 뜨는데요, 강의를 듣다가 제가 코드를 잘못짠줄 알고 강의자료 완성된 코드도 열어보니 실행이 안됩니다. eval을 쓰면 안된다는데 뭔가 보안 상의 문제가 있는건지. vsc에서 npm start하고 나서 webpack 5.92.1 compiled successfully in 1447 ms이렇게 떴는데도 웹 상에서는 아무것도 안뜨고 그러네용 뭐가 문제인지 모르겠어요

  • blender
  • 인터랙티브-웹
  • three.js
znah1231 댓글 1 좋아요 0 조회수 456

모니터 해상도에 따라 mesh의 크기가 변할 수 있나요?

미해결

Three.js로 시작하는 3D 인터랙티브 웹

imac에서 mesh의 크기를 원하는 크기로 맞춰놓았습니다. 그런데 일반 노트북이나 다른 모니터를 이용해서 작업할려고 보니까 imac에서 맞춰놓은 mesh의 크기값이 다르게 보이는 이유가 뭔가요?

  • blender
  • 인터랙티브-웹
  • three.js
Mango 댓글 1 좋아요 0 조회수 273

반발력을 0으로 해도 계속 튕겨져나갑니다..ㅜ

미해결

Three.js로 1인칭 3D 웹사이트 만들기

안녕하세요 늘 좋은강의 감사합니다. playerContactMaterial 에서 restitution을 0으로 뒀는데도 캐릭터가 엄청 튕겨지네요 ㅜ player의 cannonMaterial도 playerCannonMaterial로 변경했는데 똑같이 엄청 통통 튕겨다닙니다... 그래서 궁금해서 그냥 defaultContactMaterial의 반발력을 0으로 두고 전부 defaultMaterial을 적용해봐도 똑같이 전부 통통 튕겨 다니네요... 영상에서도 보면 부딪힐 때 캐릭터가 뒤로 튕겨져 나가는거 보니 어쩔수 없는 현상인걸까요??...

  • javascript
  • 인터랙티브-웹
  • 포트폴리오
  • three.js
  • 3d
sue01014 댓글 2 좋아요 0 조회수 343

예제와 보여지는게 다릅니다.

미해결

Three.js로 시작하는 3D 인터랙티브 웹

위 사진은 제가 07\07\material_fin\src\ex02.js 를 실행시킨 것이고 이 사진은 강의도중 보이는 화면인데 빛의 밝기가 왜 다른걸까요?

  • blender
  • 인터랙티브-웹
  • three.js
JKBlazor 댓글 3 좋아요 0 조회수 615

물질을 클릭했을 때 이벤트

해결됨

React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발

물질에게 클릭이벤트를 주어 보이는 시점이 바뀌거나 물체가 이동할수있게 하고싶습니다.

  • javascript
  • react
  • typescript
  • 인터랙티브-웹
  • three.js
  • webgl
  • react-three-fiber
: 흥 댓글 1 좋아요 0 조회수 442

스크롤 페이지 만들기 -땅과 집 색상이 너무 어둡습니다.

미해결

Three.js로 시작하는 3D 인터랙티브 웹

- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :) - 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다. - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님. 강의 따라하다가 색상이 너무 이상해서 문의드립니다. 제가 따라한 코드가 이상한 건가 싶어서 완성파일 main.js를 실행했는데 똑같이 색상이 이상합니다. 수정방향을 알려주시면 감사하겠습니다.

  • blender
  • 인터랙티브-웹
  • three.js
주하나 댓글 3 좋아요 0 조회수 672

Visual Studio Code 사용 패키치 설치오류

미해결

Three.js로 시작하는 3D 인터랙티브 웹

안녕하세요. Visual Studio Code를 잘 사용하다가 이번에 패키지 설치시 문제가 발생했습니다. npm i -D @babel/cli @babel/core @babel/preset-env babel-loader clean-webpack-plugin copy-webpack-plugin core-js cross-env html-webpack-plugin source-map-loader terser-webpack-plugin webpack webpack-cli webpack-dev-server 위 명령어를 실행 했는데 up to date, audited 551 packages in 2s 56 packages are looking for funding run `npm fund` for details 3 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. 위와 같이 오류가 발생했습니다. Visual Studio Code 관련파일 삭제 후 재설치를 해도 같은 현상이 나타납니다. 해결방안이 있을까요??

  • visualstudiocode
  • node
  • blender
  • 인터랙티브-웹
  • npm
  • Three.js
  • three.js
bunyang-e 댓글 1 좋아요 0 조회수 604

npm ERR! Missing script: "start" 오류 문의 합니다...(three.js로 시작하는 3D 인터랙티브 웹)

미해결

강의 내용에 따라서 node.js 설치 후 실행 하였으나 오류가 발생합니다.. 답변 부탁드립니다.. $ node -v v16.14.0 $ npm -v 8.0.0 $ npm start npm ERR! Missing script: "start"npm npm ERR! npm ERR! Did you mean one of these? npm ERR! npm star # Mark your favorite packages npm ERR! npm stars # View packages marked as favorites npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\jsjs7\AppData\Local\npm-cache\_logs\2022-03-02T09_22_57_207Z-debug.log $ n lts bash: n: command not found

  • three.js
BW Lee 댓글 0 좋아요 0 조회수 277

인기 태그

인프런 TOP Writers

주간 인기글