Three.js 소스코드 읽기 노트(조명부분)_기본지식

날씨가 점점 추워지고 있고, 사람들은 점점 나태해지고 있습니다. 마치 따뜻한 침실에 누워서 소설을 읽거나 게임을 하는 것 같은 느낌이 듭니다. . 오늘 날씨가 좋은데, 계속 지켜봐주세요!

이번에는 조명 부분을 살펴보겠습니다. 조명 모델은 빛 자체의 관점에서 보면 주변광, 평행광, 점광원을 포함하고, 물체 표면 재질의 관점에서 보면, 확산 반사와 정반사도 포함됩니다.

Lights:Light

코드 복사 코드는 다음과 같습니다.

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

이 객체는 다른 조명 객체의 프로토타입/기본 클래스이며 그 자체는 Object3D 객체/유형에서 상속됩니다. 여기에는 이해하기 쉬운 색상인 THREE.Color 유형의 색상 속성이 하나만 있습니다.

Three.js에서는 Object3D 객체인 조명이 Scene.add() 메서드를 통해 장면에 추가되고 렌더러가 추가된 조명 효과를 자동으로 렌더링합니다.

Light::AmbientLight

코드 복사 코드는 다음과 같습니다.

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

Light 유형 이하의 무방향 주변광 단순히 의미론적 상속 목적으로 Light에서 상속되는 속성이나 메서드는 Object3D 객체일 필요도 없습니다.


Light::DirectionalLight

코드 복사 코드는 다음과 같습니다.

THREE.DirectionalLight = 함수(hex, 강도) {
THREE.Light.call( this, hex )
this.position = new THREE.Vector3( 0, 1, 0 ) ;
this.target = new THREE.Object3D();
this.intensity = (강도 !== 정의되지 않음) ? 강도: 1
this.castShadow = false; false;
// 그림자에 대한 추가 설정 ......
}


평행광(방향광), 새 색상을 사용할 때 색상 16진수를 전달해야 합니다. 이 함수와 빛의 "밀도" 강도를 구성하는 연산자입니다. 이 클래스에는 다음과 같은 속성이 있습니다.

position: 위치를 시작점으로 하고 원점을 끝점으로 하는 위치는 빛의 방향입니다.
강도: 빛의 밀도, 기본값은 1입니다. RGB의 세 가지 값은 모두 0~255 사이이므로 빛의 강도 변화를 반영할 수 없으며, 빛이 강할수록 물체 표면이 밝아집니다.
거리: 감쇠 거리, 기본값은 0이며 조명에는 감쇠가 없습니다. 값이 0이 아닌 경우 조명은 위치 위치(실제로 위치가 있는 평면)에서 감쇠되기 시작합니다. 거리만큼 감쇠한 후 광도 강도는 0이 됩니다.
castShadow: 부울 값, 그림자 생성 여부를 제어하며 기본값은 false입니다. true로 설정하면 조명 방향에서 가려지는지 여부가 모든 표면에 대해 픽셀 단위로 계산되므로 많은 계산이 소모됩니다.
onlyShadow: 부울 값, 객체를 "조명"하지 않고 그림자만 생성할지 여부를 제어합니다. 기본값은 false입니다. 이 모델에는 몇 가지 특별한 용도가 있을 수 있습니다.
shadowCameraLeft, ShadowCameraRight... 시리즈는 위치점을 중심으로 그림자의 범위를 제어하나요?
shadowBias: 그림자 바이어스, 기본값은 0입니다.
shadowDarkness: 그림자가 객체의 밝기에 미치는 영향으로 0에서 1 사이이며 기본값은 0.5입니다.
지금은 의미를 추측할 수 없는 속성이 아직 많이 있습니다(컴퓨터 그래픽을 꼭 공부해야 하므로 일단 참고 계속 읽어보세요).


Light::PointLight

코드 복사 코드는 다음과 같습니다.

THREE.PointLight = 함수(hex, 강도, 거리) {

THREE.Light.call( this, hex )
this.position = new THREE.Vector3( 0, 0, 0 ); this.intensity = ( 강도 !== 정의되지 않음 ) ?
this.distance = ( 거리 !== 정의되지 않음 )
}; 🎜>
점광원, 위치는 광원점이어야 합니다. 점광원 위치와 평행광 위치의 차이에 주의하세요. 전자는 기본적으로 원점으로 설정되어 있고 후자는 기본적으로 평행의 방향이 되는 점(0, 1, 1)으로 설정되어 있습니다. 카메라의 기본 방향과 일치하는 조명.
다른 두 가지 속성은 방향성 조명과 동일합니다. PointLight 포인트 라이트에는 그림자 생성 방법에 대한 설정이 없습니다.

Light::SpotLight



코드 복사

코드는 다음과 같습니다.

THREE.SpotLight = 함수(16진수, 강도, 거리, 각도, 지수) {
THREE.Light.call( this, hex )
this.position = new THREE.Vector3( 0 , 1, 0 );
this.target = new THREE.Object3D();
this.intensity = (강도 !== 정의되지 않음) ?
this.distance = (거리 != = 정의되지 않음 ) ? 거리 : 0;
this.angle = ( 각도 !== 정의되지 않음 ) ? 각도 : Math.PI / 2
this.exComponent = ( 지수 !== 정의되지 않음 ) ? // 그림자에 대한 추가 설정...
};

MeshLamberMaterial 및 MeshPhongMaterial 유형 재료의 표면에 영향을 주어 특정 방향으로 그림자를 생성할 수 있는 점 광원입니다. 그림자를 처리하는 방법에 대한 설정은 DirectionLight와 일치합니다.
간단히 말하면 조명 객체는 조명을 렌더링하는 작업을 담당하지 않고 조명을 렌더링하는 방법만 정의합니다.
객체::Partical

코드 복사 코드는 다음과 같습니다.

THREE.Particle = 함수(재료) {
THREE.Object3D.call( this )
this.material = 재료

입자 Object3D 재질이므로 이해하기 쉽습니다. Object3D 객체는 입자의 움직임을 담당하는 좌표(입자의 좌표)를 제공합니다. 입자는 이를 표현하기 위한 재질만 지정하면 됩니다.

Object::ParticalSystem

코드 복사 코드는 다음과 같습니다.

THREE.ParticleSystem = 함수(기하학, 재료) {

THREE.Object3D.call( this );
this.geometry =
this.material = (재료 != = 정의되지 않음 ) ? 재질: new THREE.ParticleBasicMaterial( { color: Math.random() * 0xffffff } );
this.sortParticles =
if ( this.geometry ) {
if( this. 기하학.boundingSphere === null ) {
this.geometry.computeBoundingSphere();
}
this.boundRadius = 기하학.boundingSphere.radius;
this.frustumCulled = false;
};


입자 시스템은 여러 입자의 움직임을 나타냅니다. 입자 시스템 자체는 Object3D 개체에서 상속됩니다. 여러 속성이 있습니다:
기하학 속성, 각 노드는 입자이며 이들은 재료를 공유합니다.

이러한 노드의 재료인 재료 속성입니다.

frustumCulled 속성, 부울 값, true로 설정하면 카메라 시야 밖의 입자가 쫓겨나지만, 중심 좌표계가 쫓겨날 때 전체 입자 시스템이 쫓겨날지는 아직 확실하지 않습니다. 입자 시스템의 입자가 시야 밖에 있거나, 단일 입자가 나가자마자 제거되는 것은 아마도 후자일 것입니다.

사실 이 기사들은 모두 장면을 정의하는 방법에 대해 다루고 있으며, 장면을 렌더링하는 방법에 대해서는 깊이 들어가기가 어렵습니다. 다음에는 Demo 코드를 살펴보고 WebGLRenderer 클래스의 소스코드(OMG 수천줄)를 살펴보도록 하겠습니다.