인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

znah1231님의 프로필 이미지
znah1231

작성한 질문수

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

기본 장면 만들기 - Renderer

fin 버전도 그냥 실행이 안돼요

작성

·

136

0

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

Document - Chrome 2024-07-06 오전 1_59_38.png

그리고 canvas크기가 브라우저 창이 아니라 300^150으로만 설정되고 제가 변경해도 변경되지 않습니다.....

답변 2

0

znah1231님의 프로필 이미지
znah1231
질문자

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

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

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

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

znah1231님의 프로필 이미지
znah1231

작성한 질문수

질문하기