[threejs] curved view canvas html dom

가서미 웅장해지는 숏츠를 보았다

https://www.youtube.com/shorts/Ty7j_v4t7ks

 

커브드 되는 3d 구현하는 30초짜리 숏츠였는데

요 포맷을 이용하면 내가 구현하고 싶었던 씬을 만들수 있을거 같아서 도전!!!!!!

 

해봣는데 음 . . . ...... 자바스크립트만으로 구현하기는 어려울거 같다

저거 자바스크립트인줄아랏는데 glsl? 확장자가 다른거 보니까.......안될듯?

gpt가 쪼금 비스무리하게 해주는거 같긴했는데 내가 원하는 모양이 나오기엔 역부족..

 

 

일단은 요런 슬라이드 모양까지는 만들었다..

꾸미기는 나중에 하는걸로..

 

 

html의 특정 dom으로 canvas 가져오기

  const canvas = document.querySelector('#main-canvas');
  const renderer = new THREE.WebGLRenderer({canvas});
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

 

강의에서 본대로 가져왓는데 에러.. 이유가 뭘까 ................ ㅠ_ㅠ

Uncaught TypeError: Cannot read properties of null (reading 'width')
    at new WebGLRenderer (three.module.js:23910:20)
    at eval (portfolio.js:28:20)

<div id="main_canvas" class="main__canvas"></div>

 

  const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, })
  const main_canvas = document.getElementById('main_canvas');
  main_canvas.appendChild(renderer.domElement);
  renderer.setSize(window.innerWidth, window.innerHeight)

지피티가 알려준대로 요래 넣어줬더니 된다!!

나는 .WebGLRenderer({canvas}); ㅇㅔ서 {canvas} 가 뭔가 생성해주는 인자? 로 쓰이는줄 알았는데 아닌가봄

걍 정직하게 자바스크립트로 돔선언해주고 넣어버리면 되는거였음;

역시 문서 잘보고 왜넣는지 이유를 알고 넣어야한다는걸 다시금 깨닫는다

 

 

const container = document.createElement('div')
document.body.appendChild(container)

이렇게 써줘도 ok

 

레이아웃 짠거에 canvas넣은상태