[webXR] 01 [기본 개념]

카메라가 볼수 있는 시아의 세로 넓이

fov — Camera frustum vertical field of view.

고정 -- 아니면 이미지가 가로로 약간 찌그러져 보인다.

 aspect — Camera frustum aspect ratio.

측정이 미터로 되서 카메라에 가까이 보이게 하고 싶다.

 near — Camera frustum near plane.
  far — Camera frustum far plane.
  

camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 40);

랜더하기

화면에 렌더링 하는 과정을 실제로 수행하기위해서 하는거

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

픽셀 비율과 렌더러의 크기를 올바르게 설정하기

		renderer.setPixelRatio(window.devicePixelRatio);
        우리의 화면에 맞게 설정하는것[픽셀-사이즈]
       renderer.setSize(window.innerWidth, window.innerHeight);

container.appendChild(renderer.domElement);
돔에다가 넣기 

...
f12 보면 canvas 를 설정한것이 보인다.

2 실제로 그리기

기하학 사용하기

const geometry = new THREE.IcosahedronGeometry(0.1, 1); 0.1m의미
var light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);

성분정보

 const material = new THREE.MeshPhongMaterial({
        color      :  new THREE.Color("rgb(226,35,213)"),
        shininess  :  6,
        shading    :  true, (음영)
        transparent: 1, (투명도)
        opacity    : 0.8 (불투명도)
      });

메쉬 (큐브) --> 실제로 적용하는것으로 빛이 큐브에 닿을때 큐브의 제질이나 메시의 제질 같은 모든 유형의 메시를 지정하는 방법에 다라 특정 방식으로 보이게 된다.

   mesh = new THREE.Mesh(geometry, material);
   
   

큐브 포지션 지정하기

 mesh.position.set(0, 0, -0.5);
  scene.add(mesh);

   

큐브에 저장하기

  scene.add(mesh);
  
  
  

애니메이션 추가하기 (실제로 보이게 하기))

renderer.setAnimationLoop(render);

에니메이션 루프를 설정해붜 초당 60 프래암정도로 (1초에 60정도..)

랜더링 하기

function render() {
		renderer.render(scene, camera);    } 
         특저영역의 카메라 와 장면
         
         

조명추가하기

var light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);  
첫번째는 skyColor   두번째는 groundColor 16진수로  마지막은 강도 

   조명 위치 		light.position.set(0.5, 1, 0.25);
   저장하기 			scene.add(light);

실행하기 버튼

   import { ARButton } from 'https://unpkg.com/three@0.126.0/examples/jsm/webxr/ARButton.js';
	document.body.appendChild(ARButton.createButton(renderer));
    실행하기 버튼 dom 에 추가하기 

렌더 할때 남아 있게 하는거

		renderer.xr.enabled = true;
        //import !!!!