Threejs 장면의 기본 구성 요소

4611 단어 카메라장면Three-js

총서


카메라:화면에 렌더링할 항목 결정:재료에 대한 그림자 표시 및 생성 방법을 결정하는 사용물체:카메라에 렌더링된 객체

Scene 장면의 몇 가지 방법

  • Scene.add(object);//장면에 물체 추가
  • Scene.remove(object);//장면에서 물체 제거
  • Scene.children;//Scene의 하위 객체 목록;카메라와 광원 포함
  • Scene.getchildByName ()//물체의name 속성을 통해 이 물체가 var cude =... 에 접근할 때 cude를 설정할 수 있습니다.네모난 블록 1
  • Scene.traverse(function);//함수 매개 변수는 하위 대상마다 함수를 한 번씩 호출합니다 
    • Scene.traverse(function(e){
    // ， Scene 
    if(e instanceof THREE.Mesh && e!=plane){
        ... e , 
    }
}) // for children

    참고: 장면이 렌더링될 때 THRE.Camera는 자동으로 추가됩니다. 좋아하면 수동으로scene을 추가할 수 있습니다.add(camera);

    장면의 두 속성 fog(안개) 및 overrideMaterial(재료 무시)


    Fog

    scene.fog=new THREE.Fog(0xffffff,0.015,100)

    매개 변수: 흰색 안개 효과, 근접 속성 값, 원거리 속성 값, 안개가 시작되고 끝날 곳, 깊이
    Another Way Fog: 
    scene.fog= new THREE.FogExp2(0xffffff,0.015)//

    재료 덮어쓰기


    모든 물체를 설정하는 재질 > 장면에 추가된 모든 물체는 같은 재질을 사용한다는 뜻이다
    scene.overrideMaterial= new THREE.MeshLambertMaterial({color:0xffffff});//

    메쉬 객체의 함수 및 속성

  • position: 이 대상이 그 부모 대상과 상대되는 위치를 결정하는데 일반적인 부모 대상은 THREE이다.Scene
  • rotation:rotation.x|y|z 축을 기준으로 각도 회전
  • scale: 비례, xyz축을 따라 대상을 축소할 수 있음
  • translateX|Y|Z(amount)//대상을 amount 위치로 이동

    • Material 재료


    MeshLambertMaterial과 MeshPhongMaterial 두 가지 재료는 광원에 반응한다
  • MeshLambertMaterial: 색이 어둡고 빛이 나지 않는 물체를 만들 수 있음
  • MeshPhongMaterial: 금속과 같은 빛나는 물체를 만들 수 있다

    • Camera 카메라


    투영 및 투시 카메라
  • 투시 투영 거리 카메라가 멀어질수록 물체가 작아진다
  • 같은 물체를 투영하여 렌더링하는 크기와 같이 대상과 카메라의 거리는 렌더링 결과에 영향을 주지 않고 도시를 모의하는 효과에 도달할 수 있다. ==>투시 카메라를 더 많이 사용하고 실제 세계 카메라에 가까운 점의 초점은 보통camera를 가리킨다.lookAt(new THREE.Vector3(x,y,z))//0 0 0

    • window.requestAnimationFrame


    window.requestAnimationFrame(callback)은 프레임별로 웹 페이지를 다시 그리는 데 주로 사용되는 리셋 함수를 매개 변수로 사용합니다.그러나 주의해야 할 것은 RequestAnimationFrame가 주 라인에서 완성되었다는 것이다.이것은 메인 라인이 매우 바쁘면 RequestAnimationFrame의 애니메이션 효과가 크게 떨어진다는 것을 의미한다.모든 브라우저가 RequestAnimationFrameAPI를 지원하는 것은 아닙니다. 가장 좋은 방법은 다음과 같습니다.
     window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();
     function renderScene(){
        requestAnimationFrame(renderScene);
        renderer.render(scene,camera);
    }

    renderScene에서 리퀘스트 Animation Frame (renderScene) 을 다시 호출했습니다. 이것은 애니메이션의 지속적인 운행을 보장하고 코드에서 이 함수를 호출해서 애니메이션을 시작합니다.

    그늘


    음영이 생기는 몇 가지 절차를 만들어 구체와 네모난 블록으로 하여금 음영을 땅에 투영하게 하고, 어떤 물체가 음영을 투사하고, 어떤 물체가 음영을 받아들이게 한다.
  • render.shadowMapEnabled=true;//렌더에게 그림자가 필요하다고 알려주기(그림자 은사 허용)
  • plane.receiveShadow=true;//지면 그림자 받기
  • cude.castShadow=true;//cast 투사, 바로 네모난 블록 투사 음영
  • spotLight.castShadow=true;모든 광원이 음영을 투사할 수 있는 것은 아니다. 여기서 포인트 광원을 사용하면 음영을 생성할 수 있다
    • Lumen by Laravel
    Laravel5.4는 Vue입니다.js 준비 사용하기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage