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

쌤 따라서 그래도 수업을 진행하는데, 검은 색 화면이 나오지 않았습니다. console창에 JS error 없고, elements tab에서도 canvas가 제대로 보이고...뭔가 찜찜한 마음에, 지우고 다시 깔고, 다시 또해보고...한시간 이상 삽질해도 해결불가. ㅡㅜ포기하고, 일단은 그냥 에러 없으니깐 계속 진행 해 보았습니다. 몇 강 뒤에 Mesh 파트 나오는데, 거기서 하나씩 타이핑 해 보다가 원인을 발견 한 듯 합니다.!!저 처럼 답답하실 분 계실테니, 결론부터 말씀 드리면, renderer.render(scene, camera) 를 통해 화면에 그려줘야 실제 화면에 검은색 배경과 함께 mesh도 그려집니다.일단 전, three 0.144 버전을 사용중이구요. 나머진 쌤이 제공해 주신 템플릿 쓰니 다른 환경은 비슷할듯 합니다.아래 캡쳐 추가 합니다. 혹이 이 문제가 아니면...다른분 답변 부탁드려요.[ before ][ after ]

(사진)

canvas 색깔이 검정색이 아니라 흰색 배경인데 오류도 안뜨고 완성본은 잘나옵니다.document.body.appendChild 이 부분이 실행이 안됩니다.canvas data-engine="three.js r144Mesh 부분 강의에서 render 해주면 배경색이랑 오브젝트 보이긴 하는데 그 전에 왜 안나오는지 궁금해요.

강의를 참고하면서 제 포트폴리오 사이트를 만들어보았는데배포한 url로 사이트 들어가면 처음 렌더링시에 시간이너무 오래걸리더라구요 ㅠㅠreact 같은 프레임워크에서는 lazy나 다른 방법을 통해서 개선하는 방법이 있는걸로 하는데 프레임워크를 사용안하고그냥 작업을 했다보니 방법을 모르겠습니다..

안녕하세요, Three JS를 혼자 공부중입니다.   gltf로더를 사용하여 3D모델을 불러왔고   모델, 라이트에 cast shadow를 주었고   land로 지면 영역을 만들어서 receive shadow를 주었는데 그림자가 안나와요...   또 3면이 자연스럽게 조명이 주어지지 않고   한 면은 완전 블랙으로 영역이 나타나는데 자연스럽게 조명을 쓸 수 있는 방법이 있을까요?   코드와 웹 결과물 사진을 첨부합니다.  

- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 ㅁ문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.     아래는 오류메시지 입니다.   MACui-MacBook-Air:02 mac$ npm startnpm ERR! Missing script: "start"npm ERR! npm ERR! Did you mean one of these?npm ERR!     npm star # Mark your favorite packagesnpm ERR!     npm stars # View packages marked as favoritesnpm 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!     /Users/mac/.npm/_logs/2022-08-13T04_42_44_373Z-debug-0.logMACui-MacBook-Air:02 mac$ n ltsbash: n: command not foundMACui-MacBook-Air:02 mac$ npm startnpm ERR! Missing script: "start"npm ERR! npm ERR! Did you mean one of these?npm ERR!     npm star # Mark your favorite packagesnpm ERR!     npm stars # View packages marked as favoritesnpm 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!     /Users/mac/.npm/_logs/2022-08-13T04_43_52_792Z-debug-0.logMACui-MacBook-Air:02 mac$ npm startnpm ERR! code EJSONPARSEnpm ERR! path /Users/mac/Desktop/threejs/02/package.jsonnpm ERR! JSON.parse Unexpected token "{" (0x7B) in JSON at position 541 while parsing near "...: \"^0.143.0\"\n  }\n}\n\n{\n  \"name\": \"threejs..."npm ERR! JSON.parse Failed to parse JSON data.npm ERR! JSON.parse Note: package.json must be actual JSON, not just JavaScript. npm ERR! A complete log of this run can be found in:npm ERR!     /Users/mac/.npm/_logs/2022-08-13T04_45_27_810Z-debug-0.logMACui-MacBook-Air:02 mac$ npm webpack serve --progressUnknown command: "webpack"

draw함수에서 domins.forEach 돌면서 modelMesh랑 cannonBody의 position 값을 맞춰주면서 도미노가 떨리더라구요,, 카메라를 가까이 되면 보입니다.. 이게 gravity 때문인지 궁금합니다

본 영상하고 과정복습에서도 애니메이션이 저장이 안돼요ㅠㅠ 영상에서의 블렌더 내보내기하고 현재 사용하고 있는 블렌더 내보내기 과정에서 include 하는 화면이 조금 다르게 보이네요 ㅠㅠ

  마우스 클릭 시 checkIntersects()를 호출하고 raycaster.intersectObject(meshes); 를 실행할 때 오류가 발생합니다.   오류가 나는 지점의 three.module.js 코드를 보면,  아래의 조건문에서 object.layers.test 함수를 호출하는데, 이 때 test 함수를 찾지 못한다고 하네요. if ( object.layers.test( raycaster.layers ) ) { object.raycast( raycaster, intersects ); }   완성된 소스를 실행해도 동일합니다. 해결 방법이 있을까요?  

house 모델 자리에 일분이 모델로만 교체했는데 일분이 모델에는 그림자가 생기지 않아서 여쭈어 봅니다

paritcles의 기본 쉐입이 사각형인데 그것도 변경할 수 있는건가요 ? 

1. npm start build 이 후 정상적으로 폴더 및 파일이 형성 되는데, 왜 npm start 할경우 dist 안에 있는 파일이 다 삭제가 되나요??   2. npm start build 로 배포 파일 만들고 index 파일을 실핼 할 경우, 사진과 같이 정상 경로가 아닌 C의 하위 폴더로 구문되면서 이미지나 모델 파일 같은 것들이 불러와 지지 않습니다. 반드시 C의 하위 폴더로 위치를 해야 하나요?? 수정 사항 : 16강의 코드로확인 중입니다. 기존 경로가 /images/grid.png 방식이라 ./images/grid.png 수정하여 경로는 잡았으나, lice 서버가 아닌 단순 실행 방식을 사용 할 경우 , CORS Policy 에러가 발생하는데 경우는 어떤 식으로 잡아야 하나요?

쓰러트릴때 사용했던  1번   for (const item of intersects) {       if (item.object.cannonBody) {         item.object.cannonBody.applyForce(           new CANNON.Vec3(0,0,-100),            new CANNON.Vec3(0,0,0)         )};     // }     2번     if (intersects[0].object.cannonBody) {     intersects[0].object.cannonBody.applyForce(       new CANNON.Vec3(0,0,-100),       new CANNON.Vec3(0,0,0)       )};     이 두 가지 코드를 직접 동작시에 위의 for문 코드가 클릭을 여러번 했을시에 더 빠르게 움직이는 것은 1번 코드가 조금더 성능이 좋다고 봐도 되는걸까요 ?      추가적으로 1분코딩님의 홈페이지의 축구공처럼 화면을 회전함에 따라서 주는 힘의 방향을 다르게 하고 싶을때 applyForce 부분의 기준점을 변경하면 될 것 같아서 시도해보았는데 잘 모르겠어서 이렇게 질문드립니다..

applyForce 관련 질문입니다 수업 파일과 같이 코드를 작성후에  y값에만 추가로 force를 주었을 시에  sphereBody.applyForce(new CANNON.Vec3(500,300,0), sphereBody.position);   움직임이 이상하게 작동하는데 (움직임이 멈춘 후 두번째 클릭시에 제자리로 돌아오려고 함) 그 이유와 해결법을 알 수 있을까요 ? 

작성해주신 ironMaterial  restitution을 0으로 적용시에 바닥과 바로 붙는 것처럼 제 화면에서는 보이는데  강의 영상을 볼때는 resitution을 0.2정도 준 것 처럼 튀겨서 혹시 그 이유가 궁금해서 여쭈어봅니다

이미지가 맵핑된 오브젝트를 모바일기기를 통해 확인해보았더니 검정색 오브젝트가 나옵니다.. 사파리에서도 그렇구요!   모바일 버전이 필요해서 이걸 해결해야하는데... 어떤 문제가 있는걸까요?..   강의 너무 너무 잘 보고있습니다! 항상 감사합니다!!

안녕하세요!   해당 강의를 듣고 3D모델 불러오기를 하고 있습니다.   저는 sketchup에서 모델링 된 3D 오브젝트(건물)를 threejs로 업로드 해서 웹사이트를 만들어야 하는데요,   gltf 파일과 obj파일을 업로드 하는데는 성공했습니다.   그런데 해당 모델링 된 파일이 크기가 너무 커서 그런지 렌더링 된 웹상에서는 모델의 완전체가 보이지 않습니다.   모델 스케일을 0.1로 줄여도 이런 현상이 나타나는데 제가 어디를 고쳐야 하는 걸까요?   너무 답답해서 obj파일을 업로드하면 렌더링 되는 사이트를 통해 올려봤는데   거기서는 완전하지는 않지만 모델 전체를 둘러보는데는 문제가 없더라고요. (텍스쳐 파일이 업로드가 되지 않음. 여기서 말하는 텍스쳐 파일은 스케치업에서 obj로 export 했을 때 같이 생성된 MTL파일임)   이해를 돕기위해 제가 렌더링한 사이트의 모습 캡쳐본을 첨부합니다.   도와주세요 슨생님들 ㅜㅜㅜㅜㅜㅜ   부탁드립니다.   여기까지 읽어주신 분들 미리 감사드려요🙏🙏     (3D obj 뷰어 사이트에서 같은 모델을 렌더링 했을 때의 모습)

player도 draw함수 내부에서 gsap으로 처리할 수 있는 건가요?

카메라를 zoom 한것과 카메라 위치를 옮기는 것이 차이점이 있을까요??

reorder 수행하고 x 축으로 20도 회전한 결과가 x가 아니라 z축으로 20도 회전한 결과라고 생각이 드는데요. OpenGL 좌표계의 x,y,z 축이 아닌 걸까요?ㅠ reorder하고 x축으로 20도 회전하면 머리를 치켜 올리는 형상으로 회전 해야하는거 아닌가요?ㅠ