정원

three.js journey강의를 듣고 작성합니다. Three.js는 정점(Vertex)과 삼각형(Face)으로 Mesh를 만든다.3개의 정점(Vertex)으로 삼각형을 만들고, 이를 여러 개 이어서 객체를 구성한다.BoxGeometry6개의 매개변수가 있음width, height, depth, widthSegments, heightsegments, depthsegments   BufferGeometryattribute 기반 구조를 사용해 float32array:형식화된 배열 , float만 저장할 수 있음 , 고정된 길이 가지고있음모든값을 넣어야하는 1차원 배열const positionsArray = new Float32Array([ 0,0,0, 0,1,0, 1,0,0])const p..

three.js journey강의를 듣고 작성합니다. AnimationRequestAnimationFramejs에서 제공하는 메서드매 프레임마다 호출되어 다음 프레임에 호출할 애니메이션을 지정하고 이를 호출하는 메서드/** * Animate */const tick = () =>{ // Update objects mesh.rotation.y += 0.01 // Render renderer.render(scene, camera) // Call tick again on the next frame window.requestAnimationFrame(tick)}tick() data data.nowclock (three.js 내장 메서드)gasp cameraArrayCamera- 여..

three.js journey강의를 듣고 작성합니다. Three.js 구현하기위한 기본구성 5가지 import * as THREE from 'three';import gsap from 'gsap'const canvas = document.querySelector('canvas.webgl')//sceneconst scene = new THREE.Scene()//objectconst geometry = new THREE.BoxGeometry(1,1,1) //BoxGeometry(width, height, depth)const material = new THREE.MeshBasicMaterial({color:0xff0000})const mesh = new THREE.Mesh(geometry, material)..