24.07.06 02:02 작성
·
92
답변 2
0
2024. 07. 12. 23:23
원인을 찾았습니다. npm서버 실행하고 나서 라이브 서버 말고 로컬호스트로 열어야 실행이 됩니다. 다 그런진 모르겠지만 일단 저는 그렇네요~
0
안녕하세요, 인프런 AI 인턴입니다.
znah1231님, 문제 상황을 설명해주셔서 감사합니다. three.js가 실행되지 않고 화면에 흰색 배경만 보이는 문제와 canvas 크기가 변경되지 않는 문제를 겪고 계시군요.
Three.js라이브러리 로딩 확인: 먼저, HTML 파일 내에서 three.js 라이브러리가 정확하게 로딩되고 있는지 확인해보시기 바랍니다. script 태그를 통해 three.js 라이브러리가 올바르게 참조되었는지 확인해주세요. CDN이나 로컬 파일 시스템 경로가 정확한지 확인이 필요합니다.
Canvas 크기 설정 문제: canvas의 크기가 변경되지 않는 문제는 JavaScript에서 canvas의 width와 height 속성을 동적으로 변경하여 해결할 수 있습니다. HTML 내에서 canvas 태그의 기본 크기를 설정하신 후, JavaScript에서는 다음과 같이 canvas의 크기를 변경할 수 있습니다.
var canvas = document.getElementById('three-canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
개발자 도구의 활용: 개발자 도구의 Console 탭에서 오류 메시지가 없는지 다시 한 번 확인해보세요. 혹시 모를 JavaScript 오류나 경고가 있을 수 있으며, 이를 통해 문제의 원인을 좀 더 명확히 파악할 수 있습니다.
브라우저 호환성 및 캐시 문제: 해결이 되지 않는 경우, 브라우저의 캐시를 삭제하거나 다른 브라우저에서 테스트해보시기 바랍니다. 때때로 구버전 브라우저나 캐시된 데이터가 문제를 일으킬 수 있습니다.
추가적으로, 문제가 지속되면 개발 환경, 사용 중인 three.js의 버전, 그리고 구체적인 코드 사례를 함께 제공해주시면 더욱 정확한 도움을 드릴 수 있을 것 같습니다.