우선 원인은... 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을 하는 추가코드는 필요없어집니다.
blender 색칠하기 편을 보고 작업을 진행중 입니다. 영상에서는 Texture Paint를 누르면 mesh가보라색이 된다고 나오며 이후 오른쪽 창에 플러스 버튼을 눌러서 Texture Paint Slot을 추가하는 장면이 나오지만 저의 경우 캐릭터가 보라색으로 바뀌지도, 해당 플러스 버튼이있지도 않습니다. 이유를 알 수 있을까요? 사진 첨부하겠습니다.
자꾸 하다가 오류메세지도 안뜨는데 혹시나 싶어서 fin버전도 실행해봤는데 아무것도 안뜨고 그냥 흰색 배경만 뜨네요. 라이브러리가 설치되지 않았다고 하기엔 다른 강의로 실행한 three.js는 실행이 됐었는데.... 그리고 canvas크기가 브라우저 창이 아니라 300^150으로만 설정되고 제가 변경해도 변경되지 않습니다.....
개발자 도구 열어보면 저런 메세지가 뜨는데요, 강의를 듣다가 제가 코드를 잘못짠줄 알고 강의자료 완성된 코드도 열어보니 실행이 안됩니다. eval을 쓰면 안된다는데 뭔가 보안 상의 문제가 있는건지. vsc에서 npm start하고 나서 webpack 5.92.1 compiled successfully in 1447 ms이렇게 떴는데도 웹 상에서는 아무것도 안뜨고 그러네용 뭐가 문제인지 모르겠어요
안녕하세요 늘 좋은강의 감사합니다. playerContactMaterial 에서 restitution을 0으로 뒀는데도 캐릭터가 엄청 튕겨지네요 ㅜ player의 cannonMaterial도 playerCannonMaterial로 변경했는데 똑같이 엄청 통통 튕겨다닙니다... 그래서 궁금해서 그냥 defaultContactMaterial의 반발력을 0으로 두고 전부 defaultMaterial을 적용해봐도 똑같이 전부 통통 튕겨 다니네요... 영상에서도 보면 부딪힐 때 캐릭터가 뒤로 튕겨져 나가는거 보니 어쩔수 없는 현상인걸까요??...
camera.lookAt부분에서 0, 0, 0으로 설정 되어 있어서 살짝 윗방향을 볼순 없나 싶어서 질문드려요 0, 0, 0말고 다른값을 넣어도 계속 0, 0, 0만 보더라고요 위 처럼 길쭉한 아바타를 불러 왔을때 시선이 자꾸 발쪽에 즉 0, 0, 0 쪽에 맞춰줘 있어서 그부분을 좀 고치고 싶은데 방법이 없을까요?
안녕하세요! 수강한지는 좀 됐는데ㅠㅠ 이제 좀 사용해볼까 하고 혼자 작업해보면서 이것저것 해보고있는데요.. 궁금한것이 2가지 있습니다. material에 canvas를 new THREE.CanvasTexture로 변환해서 한쪽(앞)면에만 map을 넣어서 테스트해보고 있는데요,, map에 넣게되면 화면이 까만색으로 나오게 되어서.. 콘솔 창에 오류는 나오지 않아요 (needsUpdate = true도 해주었습니다) canvas에 이미지 여러개 또는 텍스트를 context를 통해서 추가할 때 위치,넓이,높이는 직접 지정해줘야 하는건가요?(블렌더를 사용 X)
화면 출력 부분 강의에서 window.addEventListener('resize', () => { // 카메라의 종횡비 camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); // 렌더러의 크기 renderer.setSize(window.innerWidth, widow.innerHeight); }); 이 코드에서 창 크기를 바꿀시 box의 크기가 줄어드는 것이 아닌 box가 늘어나는 현상이 발생합니다 별의 별짓을 다해도 못고칠것 같아서 질문드려요 <canvas id="result" style="border:1px solid red; width: 100%; height: 100vh"></canvas> 혹시몰라 html코드도 첨부합니다
징검다리 예제에서 SpotLight가 동작하지 않는 것 같습니다. 강의 내용대로 예제를 하고 있는데 동작하지 않아서 BRIDGE_FIN 폴더(완성된 예제)를 그대로 다운받아서 실행을 해도 동일하게 SpotLight가 동작하지 않는 것 같습니다. 아래와 같이 빛이 없습니다. node 버전 : 18.17.0 확인 부탁드립니다.
3D 공간에서 움직이는 캐릭터 3 강의에서 function checkIntersects() { console.log(item.point) } 위 코드에서 마우스를 화면상 위로 down & move 하면, y 좌표가 계속 증가하고, 아래쪽으로 하면 y좌표가 계속 감소하는데, 실제로는 y좌표는 0으로 고정되어야 하는것 아닌가요? x좌표와 z좌표는 당연히 변경되는게 맞는데, y좌표가 왜 그런건지 궁금합니다. 그리고 이상하게도 일률적으로 y좌표 같이 증가하거나 감소하는것도 아니고, 한번씩 튀는경우도 생기구요.
안녕하세요. 수업 잘 듣고 있습니다. 다름이 아니라 수업 실습때는 내부에 node_modules에 파일이 있으니까 잘 작동 되는데 Github gh-pages이나 url로 deploy 한다고 하면 node_modules/three 폴더가 없으니 실행이 불가능하네요. 강제로 node_modules폴더를 포함하기에는 파일수가 너무 많구요ㅠ 혹시 따로 build 하는 방법이 있나요? 일부 몇몇 필요파일만 따로 올려서도 시도해봤는데, 로컬에서는 에러 안나도 업로드 후엔 GLTFLoader가 에러나네요. (파일 및 로더 경로는 맞아도 404에러)
gltf 파일로 export 할때 강의에서는 mesh만 선택하고 export 하던데, 그랬더니 애니메이션 객체가 전혀 없었습니다. mesh뿐만 아니라 amature(뼈대)도 함께 선택하니(그냥 a로 전부 선택)하니 애니메이션 객체도 생겼고, 애니메이션 잘 되네요. 블렌더 버전이 올라가면서 그렇게 동작이 바뀐것이 아닐까요? 제가 쓰는 블렌더 4.0.2 three.js 0.162.0
이전 강의들과 동일하게 readme.txt 파일의 패키지 설치까지는 문제 없이 설치 됩니다만, npm start에서 계속 해당 내용의 오류가 발생합니다. node.js 재설치도 해보고 검색도 해봤지만 해결되는 부분이 없어서 질문 드립니다 ㅠㅠ 오늘 다른 강의에서도 같은 내용의 질문이 올라온 것 같던데 어떻게 하면 해결이 될까요?
