1. 색상 변수 등록 const FogColor = 0x004fff const objColor = 0xffffff const FloorColor = 0x555555 이렇게 색상 변수를 등록하고, color를 적용할 곳에다가 변수만 넣어주면 끝이다. 이렇게 변수를 활용하면 나중에 일일이 오브젝트마다 color를 바꿔주지 않아도 된다. 배경 색상을 변경해보자 const scene = new THREE.Scene() scene.background = new THREE.Color(FloorColor) 아래는 전체 코드이다. import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js..
1. 기본 코드 import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; import { WEBGL } from './webgl' if (WEBGL.isWebGLAvailable()) { // console.log(OrbitControls); // 장면 추가 const scene = new THREE.Scene(); scene.background = new THREE.Color(0xeeeeee); // 카메라 추가 const fov = 120; const aspect = window.innerWidth / window.innerHeight; const near = 0...
1. 그림자 적용하는 방법 1. Renderer에 그림자 사용 설정 2. 빛을 받아 그림자를 표현할 물체와 그 그림자를 받을 물체를 특정 코드로 설정 3. 빛에 그림자 설정 기본적으로 그림자가 있으려면 빛과 물체가 있어야 한다. 그러나 빛의 종류에 따라 그림자 표현이 안되는 것도 있다. const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // ambientLight.castShadow = true; // 그림자 안먹힘 scene.add(ambientLight); AmbientLight가 그것이다. 1) 렌더러에 그림자 맵을 추가해준다. renderer.shadowMap.enabled = true; 2) 빛을 받아 그림자를 표현할 물체 설정 castS..
1. 기본코드 import * as THREE from 'three' import { WEBGL } from './webgl' if (WEBGL.isWebGLAvailable()) { // 장면 추가 const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); // 카메라 추가 const fov = 75; const aspect = window.innerWidth / window.innerHeight; const near = 0.1; const far = 1000; const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.x = 0;..
1. 화각 FOV는 Field of view의 약어로 화각이라고 한다. 시야각이라고도 한다. 렌즈의 종류는 광각렌즈, 표준렌즈, 망원렌즈로 크게 3가지다. 1) 망원렌즈 (화각 28도 이하) 오브젝트를 가까이 크게 보이게 하고 싶다면, 망원으로 표현해야 한다. 그러기 위해서는 화각이 좁아야 한다. 대략 8~28도 정도이다. 2) 표준렌즈 (화각 47도) 평범하게 보여주고 싶을 때 쓴다. 3) 광각렌즈 (화각 63~84도) 망원렌즈의 특징은 화각이 좁고, 멀리있는 피사체를 가까이 있는 것처럼 확대해서 촬영할 수 있다. 그만큼 사진 속에 담기는 영역이 좁게 표현된다. 즉, 마을과 도시같은 부분을 표현하고 싶다면 광각으로 표현한다. 2. 카메라 설정 // 카메라 const fov = 47; const aspe..
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..
