현재 애니메이션 기본 수업부터 scale까지 봤는데,setAnimationLoop 가 draw 안에 등록되서 매번 반복으로 실행되는것 같은데,화면갱신에 관련된 render만 반복시키고setAnimationLoop는 바깥에서 한번만 등록하는게 옳은 방법이 아닌가 하고 의문이 드는데 어떤게 맞는건가요?동작은 둘다 똑같이 되긴 합니다. const draw = () => { /* 메쉬 애니메이션 처리 코드 들어갈 위치 ... */ renderer.render(scene, camera); } renderer.setAnimationLoop(draw);

안녕하세요 Three.js 강의 열심히 듣고 있습니다. 강의를 듣다가 궁금한점이 일반적으로 Three.js 를 사용할때 z좌표의 이해강의부분에 있는 JS 코드처럼 저 코드를 전부다 해석이 가능할정도로 알아야 되는지 아니면 보통은 복붙을 하고 자주 쓰이는 부분의 코드만 만지는것인지 궁금합니다.

const shoesClick = () => { const intersects = raycaster.intersectObjects( gltf.scene.children, true ); };강의에서는 위와 같이 raycaster.intersectObject 메서드 호출시에 scene에 children을 넘겨주시는데 클릭 이벤트의 eventObject 를 넘겨주지 않았는데도 raycaster에 마우스 방향을 set 가능한가요?

눈을 하나씩 그리고 싶은데 그릴 때 마다 미러모드가 작동하는 것 처럼 그려져요

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(); }

{ "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)못찾는다는 에러가 생깁니다뭐를 잘못했는지 모르겠습니다ㅠㅠㅠ

우선 원인은...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을 하는 추가코드는 필요없어집니다. 

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 가 알려줬어여 ㅎㅎ

{ "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") } ] } }) 파일 구조입니다.

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

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

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

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

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

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

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

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

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

안녕하세요. 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 관련파일 삭제 후 재설치를 해도 같은 현상이 나타납니다. 해결방안이 있을까요??