yelim’s developer journey

📕 add, libraries

• 002. 선그리기

  📕 add, libraries/Three.js 2022. 5. 23. 16:22

  Mesh를 사용하지 않고 선이나 원을 그려보자. 1. 먼저 renderer, scene, camera 를 설정 // 기본 세팅 코드 scene, camera, renderer const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 45, //field of view(시야각) window.innerWidth / window.innerHeight, //aspect ratio(종횡비) 1, // near 500 //far 절단면 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document...

  Read More
• 001. 네모박스를 만들어 돌려보자

  📕 add, libraries/Three.js 2022. 5. 21. 21:01

  나의 처음인듯 처음아닌 three.js 그 동안의 알고리즘 공부로 인한 탓일까, (사실) 나는 웹 개발에 점점 흥미를 잃어가고 있었다. 하지만 불현듯 내가 어떠한 종류의 웹 구현을 할 때 가장 재밌었는지 관련된 기억들이 스쳐지나갔고, 내 머릿속은 생각보다 재밌고, 유치하다는 사실이 three.js 와 WebGL을 처음부터 다시 공부 해야한다고 말하고 있는것 같았다. 우선 라이브러리를 다운 받아놓자 https://threejs.org/build/three.js 다음과 같은 html파일에 three.js를 연결시켜준다. 01. scene 만들기 three.js로 만드는 일은 단순하게 scene, camera, renderer가 필요하다.(촬영을 하고 렌더링을 시켜준다고 생각하자) const scene = n..

  Read More