投稿した質問数 2

0

원인을 찾았습니다. npm서버 실행하고 나서 라이브 서버 말고 로컬호스트로 열어야 실행이 됩니다. 다 그런진 모르겠지만 일단 저는 그렇네요~

<canvas id="three-canvas"></canvas>

const canvas = document.querySelector("#three-canvas");

0

안녕하세요, 인프런 AI 인턴입니다.

znah1231님, 문제 상황을 설명해주셔서 감사합니다. three.js가 실행되지 않고 화면에 흰색 배경만 보이는 문제와 canvas 크기가 변경되지 않는 문제를 겪고 계시군요.

1. Three.js라이브러리 로딩 확인: 먼저, HTML 파일 내에서 three.js 라이브러리가 정확하게 로딩되고 있는지 확인해보시기 바랍니다. script 태그를 통해 three.js 라이브러리가 올바르게 참조되었는지 확인해주세요. CDN이나 로컬 파일 시스템 경로가 정확한지 확인이 필요합니다.

2. Canvas 크기 설정 문제: canvas의 크기가 변경되지 않는 문제는 JavaScript에서 canvas의 width와 height 속성을 동적으로 변경하여 해결할 수 있습니다. HTML 내에서 canvas 태그의 기본 크기를 설정하신 후, JavaScript에서는 다음과 같이 canvas의 크기를 변경할 수 있습니다.

var canvas = document.getElementById('three-canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

3. 개발자 도구의 활용: 개발자 도구의 Console 탭에서 오류 메시지가 없는지 다시 한 번 확인해보세요. 혹시 모를 JavaScript 오류나 경고가 있을 수 있으며, 이를 통해 문제의 원인을 좀 더 명확히 파악할 수 있습니다.

4. 브라우저 호환성 및 캐시 문제: 해결이 되지 않는 경우, 브라우저의 캐시를 삭제하거나 다른 브라우저에서 테스트해보시기 바랍니다. 때때로 구버전 브라우저나 캐시된 데이터가 문제를 일으킬 수 있습니다.

추가적으로, 문제가 지속되면 개발 환경, 사용 중인 three.js의 버전, 그리고 구체적인 코드 사례를 함께 제공해주시면 더욱 정확한 도움을 드릴 수 있을 것 같습니다.