개발 · 컴퓨터공학

three.js 라이브러리 gsap

three.js에서 사용할 수 있는 gsap라이브러리가 있다. npm i gsap import gsap from 'gsap'; ... gsap.to( mesh.position, { duration: 1, y: 2, z: 3 } ); gsap를 통해서 mesh의 position을 몇 가지 매개변수를 이용하여 손쉽게 조작할 수 있다. 마치 유니티의 DOTween을 보는 것 같다.

2022. 8. 28. 12:41

개발 · 컴퓨터공학

three.js 안개 만들기

const scene = new THREE.Scene(); scene.fog = new THREE.Fog('blue', 3, 7); three.js에서는 Fog 객체로 손쉽게 안개를 만들 수 있다.

2022. 8. 27. 12:37

개발 · 컴퓨터공학

three.js 애니메이션

mesh를 회전시켜보자. function draw(){ mesh.rotation.y += THREE.MathUtils.degToRad(1); renderer.render(scene, camera); window.requestAnimationFrame(draw); } 프레임마다 애니메이션을 호출할 때 requestAnimationFrame을 사용한다. degToRad로 360도를 라디안으로 변경하여 rotation에 적용한다. renderer.setAnimationLoop(draw); requestAnimationFrame대신 renderer객체의 setAnimationLoop를 사용할 수도 있다. 프레임별 애니메이션은 컴퓨터의 성능에 따라서 FPS가 다르기 때문에 사용자마다 동일하게 설정해주기 위해서 시..

2022. 8. 26. 15:18

개발 · 컴퓨터공학

three.js Light

const light = new THREE.DirectionalLight(0xffffff, 1); scene.add(light); three.js 객체에서 DirectionalLight()를 통해 직선광 객체를 생성할 수 있다. scene에 light객체를 추가하여 빛을 추가할 수 있다. light.position.x = 2; light 객체의 position좌표를 설정할 수 있다.

2022. 8. 25. 16:58

개발 · 컴퓨터공학

three.js 배경색 칠하기

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true }); renderer object 생성자에서 alpha설정을 통해 배경의 투명도 설정을 할 수 있다. renderer.setClearAlpha(0.5); renderer.setClearColor('#00ff00'); setClearAlpha를 통해 투명도를 설정할 수 있고, setClearColor로 색을 지정할 수 있다. scene.background = new THREE.Color('blue'); scene을 통해 배경색을 지정할 수 있는데, 이 경우 renderer의 배경색보다 우선시 된다.

2022. 8. 24. 21:57

개발 · 컴퓨터공학

three.js 반응형 canvas

function setSize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.render(scene, camera); } window.addEventListener('resize', setSize); resize라는 이벤트 리스너에 setSize함수를 추가하여 브라우저 resize할 때 camera와 renderer의 크기를 조절하는 방법을 이용할 수 있다. window.devicePixelRatio를 통해서 화면의 해상도를 확인할 수 있는데, 이를통한 성능적 이슈에도 ..

2022. 8. 23. 21:41