Three.js 원본 읽기 노트 (조명 부분)

날씨가 점점 추워지고 사람도 점점 게으르고 따뜻한 침실에서 소설을 읽거나 게임을 하는 것처럼 오랫동안 Three를 보지 않았다.js 원본입니다.오늘 날씨가 좋으니 이어서 봐라!
이번에는 빛의 부분에서 볼 때 빛의 모형은 빛 자체의 각도에서 보면 환경광, 평행광, 점광원을 포함하고 물체 표면의 재질 각도에서 보면 만반사와 거울면 반사도 포함한다.
Lights:Light

 
  
THREE.Light = function ( hex ) { 
  
THREE.Object3D.call( this ); 
  
this.color = new THREE.Color( hex ); 
  
}; 
  
 
 

이 객체는 Object3D 객체/유형을 상속하는 다른 조명 객체의 원형/베이스입니다.그것 자체는 하나의THREE밖에 없다.Color 유형의 color 속성은 색상입니다. 이해하기 쉽습니다.
Three에서.js에서 빛은 Object3D 객체로서 Scene을 통과합니다.dd () 방법을 장면에 추가하면 렌더기가 자동으로 렌더링 효과를 렌더링합니다.
Light::AmbientLight

 
  
THREE.AmbientLight = function ( hex ) { 
  
THREE.Light.call( this, hex ); 
  
}; 
  
 
 

방향이 없는 환경광은 라이트 유형보다 속성이나 방법이 많지 않고 의미적 계승을 위해 라이트를 계승할 뿐 Object3D 대상이 필요도 없다.
Light::DirectionalLight

 
  
THREE.DirectionalLight = function ( hex, intensity ) { 
  
THREE.Light.call( this, hex ); 
  
this.position = new THREE.Vector3( 0, 1, 0 ); 
  
this.target = new THREE.Object3D(); 
  
this.intensity = ( intensity !== undefined ) ? intensity : 1; 
  
this.castShadow = false; 
  
this.onlyShadow = false; 
  
// more settings about shadow ...... 
  
}; 
  
 
 

평행광 (방향이 있는 빛), new 연산자를 사용하여 이 함수를 구성할 때 색상hex와 빛의 '밀도' intensity를 전달해야 합니다.이 클래스에는 다음과 같은 속성이 있습니다.
position: 원점이 끝인 방향이 빛의 방향인 위치를 시작으로 합니다.
intensity: 광선의 밀도, 기본값은 1입니다.RGB의 세 값이 모두 0~255 사이여서 빛의 강도 변화를 반영하지 못하고 빛이 강할수록 물체 표면이 밝아지기 때문이다.
distance: 감쇠 거리, 기본값은 0이고 빛의 감쇠가 없습니다.만약 0값이 아니라면, 빛은position 위치 (실제로position이 있는 평면) 에서 쇠퇴하기 시작하고,distance 거리로 쇠퇴한 후, 빛의 강도는intensity가 0이다.
castShadow: 부울 값, 음영이 생길지 여부를 제어합니다. 기본값은false입니다.만약true로 설정하면 모든 표면에 대해 광조 방향에 가려졌는지 여부를 픽셀별로 계산하는데 이것은 대량의 계산을 소모할 것이다.
only Shadow: 블로 값, 그림자만 생기고 물체를 밝게 비추지 않는지 제어합니다. 기본값은false입니다.이런 모델은 아마도 어떤 특수한 응용이 있을 것이다.
shadow Camera Left, shadow Camera Right...시리즈,position점을 중심으로 음영이 생기는 범위를 제어합니까?
shadowBias: 그림자 편향, 기본값은 0입니다.
shadowDarkness: 음영이 물체의 밝기에 미치는 영향은 0~1 사이이며 기본값은 0.5입니다.
아직 많은 속성들이 잠시 의미를 알아맞히지 못한다.
Light::PointLight

 
  
THREE.PointLight = function ( hex, intensity, distance ) { 
  
THREE.Light.call( this, hex ); 
  
this.position = new THREE.Vector3( 0, 0, 0 ); 
  
this.intensity = ( intensity !== undefined ) ? intensity : 1; 
  
this.distance = ( distance !== undefined ) ? distance : 0; 
  
}; 
  
 
 

점광원, 포지션 그게 틀림없이 광원점일 거야.점광원의position과 평행광의position의 차이에 주의하십시오. 전자는 원점에 있고 후자는 점(0, 1, 1)에 있습니다. 이것은 기본적인 평행광 방향과 카메라의 기본 방향이 일치하도록 합니다.
다른 두 속성은 평행광과 같다.PointLight 포인트 라이트에는 그림자를 생성하는 방법에 대한 설정이 없습니다.
Light::SpotLight

 
  
THREE.SpotLight = function ( hex, intensity, distance, angle, exponent ) { 
  
THREE.Light.call( this, hex ); 
  
this.position = new THREE.Vector3( 0, 1, 0 ); 
  
this.target = new THREE.Object3D(); 
  
this.intensity = ( intensity !== undefined ) ? intensity : 1; 
  
this.distance = ( distance !== undefined ) ? distance : 0; 
  
this.angle = ( angle !== undefined ) ? angle : Math.PI / 2; 
  
this.exponent = ( exponent !== undefined ) ? exponent : 10; // more settings about shadow... 
  
}; 
  
 
 

특정 방향에서 그림자를 생성할 수 있는 점광원으로 MeshLamberMaterial 및 MeshPhongMaterial 유형의 재료 표면에 영향을 줍니다.섀도우를 처리하는 방법에 대한 설정은 DirectionLight와 일치합니다.
한 마디로 하면 광선 객체는 광선을 렌더링하는 작업을 수행하지 않으며 단지 광선을 렌더링하는 방법을 정의합니다.
Object::Partical

     
  
THREE.Particle = function ( material ) { 
  
THREE.Object3D.call( this ); 
  
this.material = material; 
  
}; 
  
 
 

입자는 재료의 Object3D라는 것을 이해하기 쉽다.Object3D 객체는 입자의 동작을 담당하는 좌표(입자의 좌표)를 제공하며 해당 입자를 표현하는 재료만 지정하면 됩니다.
Object::ParticalSystem

 
  
THREE.ParticleSystem = function ( geometry, material ) { 
  
THREE.Object3D.call( this ); 
  
this.geometry = geometry; 
  
this.material = ( material !== undefined ) ? material : new THREE.ParticleBasicMaterial( { color: Math.random() * 0xffffff } ); 
  
this.sortParticles = false; 
  
if ( this.geometry ) { 
  
if( this.geometry.boundingSphere === null ) { 
  
this.geometry.computeBoundingSphere(); 
  
} 
  
this.boundRadius = geometry.boundingSphere.radius; 
  
} 
  
this.frustumCulled = false; 
  
}; 
  
 
 

입자 시스템은 여러 입자의 운동을 나타내고 입자 시스템 자체가 Object3D 객체에서 상속된다.다음과 같은 속성이 있습니다.
geometry 속성, 모든 노드는 하나의 입자로 하나의 재질을 공유합니다.
material 속성, 즉 이 노드의 재료입니다.
frustumCulled 속성, 블라인드 값, 만약에 진짜로 설정된다면 카메라의 시야 밖에 있는 것은 차일 것이다. 그러나 입자 시스템의 중심 좌표가 시야 밖에서 전체 입자 시스템을 차는지 한 개의 입자가 나가는지 확인하지 못하면 삭제한다. 대부분이 후자라고 추측한다.
사실 이 몇 편은 모두 장면을 어떻게 정의하는지에 관한 것이기 때문에 장면을 어떻게 과장하는지에 대해서는 깊이 파고들기 어렵다.나는 다음에 데모의 코드를 보고 결합자는 웹글렌더류의 원본 코드(수천 줄OMG)를 보려고 한다.