요즘 하루에 한 강의씩 udemy Three.js 강의를 수강하고 있다
처음엔 화면에 4개의 renderer가 잘 출력되다가 다시 확인해 보니 아무것도 나오지 않았다
콘솔창에는 Uncaught TypeError: Cannot read properties of null (reading 'width') 라는 에러 메세지가 출력되었다
<body>
<canvas id="c1" class="c"></canvas>
<canvas id="c2" class="c"></canvas>
<canvas id="c2" class="c"></canvas>
...
스택오버플로에서 찾아보니 아이디가 제대로 주어졌는지, 스크립트를 body의 제일 하단에 두었는지를 확인 해보라 한다
난 세 번째 아이디를 c3가 아닌 c2로 되어있어서 생긴 에러였고, 아이디를 수정하니 바로 해결되었다 하하
별다른 오타가 없는데 이와 같은 에러를 만난다면 script를 body의 제일 하단으로 옮기면 될 것 같다
script를 body의 하단으로 옮기는 이유는 Three.js와 관련된 자바스크립트는 DOM이 Canvas 요소를 로드하기 전 실행된다.
Three.js는 Canvas를 필요로 하기 때문에,
DOM 로드 후 Three.js 관련 모든 코드를 로드할 수 있게끔 해야 한다 (ex. js 파일의 getElementById 호출 등)
https://stackoverflow.com/questions/16509020/uncaught-typeerror-cannot-read-property-width-of-null
Uncaught TypeError: Cannot read property 'width' of null
I actually don't know what's happened because it was working last night. Anyway, I'm trying to make a drawing application with html5 and javascript. This is the first time I've properly looked at J...
stackoverflow.com