코딩하는 이채야채

- ambient Light : 은은한 조명 - directional Light: 태양광 빛을 볼때 조명이 어떻게 비추는지 아는것은 힘들다. 이것을 도와주는 장치가 gui다 gui를 쓰는법은 const gui = new dat.GUI(); gui.add(light.position, 'x', -5, 5, 0.1).name('조명 X'); gui.add(light.position, 'y', -5, 5, 0.1).name('조명 Y'); gui.add(light.position, 'z', 2, 10, 0.1).name('조명 Z'); 이렇게 x,y,z방향에 대한 GUI를 만들어주기만하면, 화면에서 바로 확인해볼수가있다. 아주간단! 이번에는 움직이는 애니메이션 조명을 만들어보자. 어떨때 필요할까? 🙄 해가 동쪽..

MeshStandard일때는 아래와 같은 모양이다 const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshStandardMaterial({ color: 'seagreen' }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); MeshBasic을 쓰면? 입체감이 사라진다 meshbasicmaterial은 입체감이없는 평평한애 빛의 영향을 안받기때문에 light 조명도 필요가없다. MeshLambert, MeshPhong 차이점은 뭘까? // Mesh //geometry하나를 만든다음에 material에서 공통으로 가져다 쓰고있다. const geom..

OrbitControls - orbitcontrols 같은경우에는 사용할때 import를 해서 사용해야한다. - 인자는 2개가 들어간다. 첫번째로는 camera가 들어와야하며 두번째로는 renderer의 domElement가 들어와야한다. 여러가지의 mesh를 가지고 싶다면 어떻게해야할까? 틀은 하나를 가지고 공유를 한다고 하면 const geometry = new THREE.BoxGeometry(1, 1, 1); let mesh; let material; for (let i = 0; i < 20; i++) { material = new THREE.MeshStandardMaterial({ color: `rgb( ${ 50 + Math.floor(Math.random() * 205) }, ${ 50 + M..

cosnt materila = new THREE.MeshStandardMaterial({ color: 'hotpink'; side: THREE.DoubleSide //wireframe : true }) 1. wireframe 이란 color: hotpink 를 해놓고 wireframe : true를 하면 핑크색의 프레임, 즉 아래와 같이 보이게된다. WireframeGeometry와는 다른속성인것이 geometry는 원래의 mesh위에 입히는 것인 반면에, wireframe: true로 2. side: THREE.Doubleside를 지정해놓으면 내부로 들어가서 내부의 모양을 볼수있게되어있다. (OrbitControls를 사용하여 휠로 ZOOM했을시 모양) 형태조작하기 1. 동그라미 구형 만들기 -> 공..

export default function example() { // Renderer const canvas = document.querySelector('#three-canvas'); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1); // Scene const scene = new THREE.Scene(); // Camera const camera = new THREE.PerspectiveCamera( 75, windo..

function draw() { const delta = clock.getDelta(); mesh.scale.x = 2; // console.log(mesh.position.distanceTo(new THREE.Vector3(1,2,0))); renderer.render(scene, camera); renderer.setAnimationLoop(draw); } scale.x scale.y scale로 크기를 조정할수있다. 회전에서 중요한것은 roation시 파이, 라디안 값으로 넣어줘야한다는것이다. mesh.rotation.x = THREE.MathUtils.degToRad(45); degToRad를 사용하여 45도를 라디안값으로 바궈주는 메소드를 사용하거나 아싸리 파이를 나눠서 써도된다. mesh.ro..

function draw() { const delta = clock.getDelta(); mesh.position.set(-1,2,-3); renderer.render(scene, camera); renderer.setAnimationLoop(draw); } draw함수내에서 mesh의 position을 설정해서 보여준다. 이때 position에 대해서 좀 더 자세히 알아봐야한다. ---> Vector3 란 무엇인가? 3차원공간에서 어떤 점의 위치를 나타내는 객체 x, y, z 값을 가지고있다. 원점으로부터의 거리를 얘기한다. 1. mesh.position.length() 원점으로부터 거리 mesh.position.set(-1, 0, 0); console.log(mesh.position.length())..

function draw () { mesh.rotation.y += 0.1; //이런식으로해도되고 mesh.rotation.y += THREE.MathUtils.degToRad(1); //라디안값으로 renderer.render(scene,camera); //window.requestAnimationFrame(draw); //계속 무한 반복 render.setAnimnationLoop(draw); } render안에 setAnimationLoop라는 기능이 있기때문에 두가지중에 원하는걸 사용하면된다. - RequestAnimation -> 게임같은 가상현실 만들때 반드시 필요하다. 성능개선을 해주기!! => 1초에 60번 1초에 30번 이런식으로 성능에 따라 돌아가는 정도가 달라지면? 안된다... => ..