1. 텍스쳐 이미지 다운 https://3dtextures.me/2022/01/16/stone-path-008/ Stone Path 008 Stone Path 008 – Free seamless texture, 1024 x 1024, with the following maps: Diffuse Normal Displacement Roughness Ambient Occlusion 3dtextures.me 위 사이트에서 다양한 텍스쳐 이미지를 다운받아 적용해볼 수 있다. 이렇게 4가지를 사용할 것이다. 2. 마우스 컨트롤 import {orbitControls} from 'three/examples/jsm/controls/OrbitControls'; //카메라 이후에 등장하는 orbit const contro..
1. 빛을 추가하는 법 Material의 요소 중 빛을 추가하는 법을 배웠다. light은 재질에 따른 빛 표현이 가능하다. //빛 const pointLight = new THREE.PointLight(0xffffff,1);//색깔, 세기 pointLight.position.set(0, 2, 12); //x, y, z scene.add(pointLight); PointLight를 이용해 색깔과 세기를 표현할 수 있다. 또한 빛의 위치를 position.set을 이용해 x, y, z 위치 설정이 가능하다. 빛의 셋팅이 다 되었다면 또 scene에 추가해주면 된다. 셋팅이 되었을 때 빛이 표현이 안된다면 쓰고 있는 Material은 빛에 영향을 받지 않는 녀석인 것이다. //매쉬 01 const geome..
이제부터는 이전 포스팅에서 1번 방법인 document.body에다가 바로 적용하는 방식을 사용한다. 1. 도형 추가 1) geometry 추가 const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); 도형을 추가할 때 가장 먼저 geometry가 필요하다. 파라미터는 순서대로 너비, 높이, 깊이이다. BoxGeometry에 더해 아래 다른 메트리도 볼 수 있다. https://threejs.org/docs/index.html?q=geome#api/en/geometries/BoxGeometry three.js docs threejs.org 2) material 추가 const material = new THREE.MeshStandardMaterial({ color..
1. THREE.JS 기본 구조 가장 기본이 되는 구조는 Render, Scene, Camera이다. 장면을 만들어서 그 안에 3D 오브젝트를 넣고, 그걸 렌더를 통해서 html 파일 안에 보여주는 순서이다. 1) Render Scene과 Camera의 객체 데이터를 넘겨 받아서 화면 안에 이미지로 그려주는 역할(렌더링)을 한다. 2) Scene 특정한 장면 안에 geometry, mesh, 3D object들이 여러 개가 있을 수 있다. 빛, 안개 등 다양한 요소도 모두 포함하고 있다. 3) Camera 앞 전에 셋팅해놓은 Scene에 담긴 3D 공간들에 대한 정보 데이터를 카메라로 특정 위치를 비춰서 거기 안에 담긴 부분만 렌더러에게 넘기는 역할을 한다. 카메라의 시야각, 시작과 끝지점, 위치를 조절..
1-1. 설치 (npm) npm install --save three 이런 경고창이 뜬다면, npm install -g npm@10.2.0으로 업데이트가 필요한 것이다. 근데 또 10.2.0으로 설치하니까 안되서 npm install -g npm@9로 해주니까 three 설치가 잘 된다. three설치 후에도 package.json이 안보인다면 다음과 같은 명령어를 실행해보자 npm init -y npm install --save three init 처리 후 three를 설치하면 package.json에 추가되는 것이 보인다. 1-2. 설치 (번들) git clone https://github.com/aakatev/three-js-webpack.git cd three-js-webpack npm run s..
