Notas diversas de Three.js (5) - eixo coordenado, fonte de luz

Eixo

As coordenadas anteriores de ponto, linha e plano relacionadas a objetos e cenas podem ser complementadas:
THREE.AxisHelper (); pode ser usado para desenhar o eixo das coordenadas e o parâmetro preenchido é o comprimento do eixo das coordenadas.
Exemplo:

<script type="text/javascript">
			var scene = new THREE.Scene();
			camera = new THREE.PerspectiveCamera(105, window.innerWidth / window.innerHeight, 1, 1000);
			render = new THREE.WebGLRenderer({
    
    
				antialias: true
			});
			render.setPixelRatio(window.devicePixelRatio);
			render.setSize(window.innerWidth, window.innerHeight)
			
			var app = document.getElementById("app");
			app.appendChild(render.domElement);
			
			// 坐标轴
			var axisHelper = new THREE.AxisHelper(40);
			scene.add(axisHelper);
			
			camera.position.z = 40;
			camera.position.y = 20;
			camera.position.x = 10;
			
			function animate(){
    
    
				render.render(scene, camera);
				window.requestAnimationFrame(animate);
			}
			animate();
		</script>

Efeito:
Insira a descrição da imagem aqui
Você pode usar object3D para vincular objetos e coordenar eixos.Objetos tridimensionais (Object3D) são as classes base da maioria dos objetos em Three.js, fornecendo uma série de propriedades e métodos para manipular objetos no espaço tridimensional.

Os objetos podem ser combinados por meio do método .add (objeto), que adiciona o objeto como um objeto filho, mas é melhor usar Grupo (como um objeto pai) para esse propósito.

Construtor

Object3D (): Não há parâmetros no construtor.

Exemplo de código:

// 总物体对象集合
var objectTotal = new THREE.Object3D();

var geometry = new THREE.BoxGeometry(10, 10, 10);
var material1 = new THREE.PointsMaterial({
    
     color:"yellow" }); 
var meshs = new THREE.Mesh(geometry, material1);
objectTotal.add(meshs)
// scene.add(meshs);
// 坐标轴
var axisHelper = new THREE.AxisHelper(40);
objectTotal.add(axisHelper)
// scene.add(axisHelper);

scene.add(objectTotal);

fonte de luz

Como tecnologia de simulação 3D, a iluminação da fonte de luz é essencial. Assim como no Unity3D, a luz pode ser irradiada de diferentes ângulos, e o efeito de fazer os objetos aparecerem na câmera também é diferente. Uma boa fonte de luz pode renderizar objetos de forma mais realista.

tipo de fonte de luz

fonte de luz	Introdução
Luz ambiente	Luz ambiente
PointLight	Fonte de luz pontual
DirectionalLight	Luz paralela, como a luz do sol
Holofote	Holofote

Classe base da fonte de luz

Em Threejs, a fonte de luz é representada por Light, que é a classe base de todas as fontes de luz. Seu construtor é:

TRÊS.Luz (hex)

Possui um parâmetro hexadecimal, que aceita um valor hexadecimal de cor. Por exemplo, para definir uma fonte de luz vermelha, podemos defini-la assim:

var redLight = new THREE.Light (0xFF0000);

Nota: Ao desenhar objetos aqui, você não pode usar new MeshBasicMaterial () para definir as propriedades do material.

Insira a descrição da imagem aqui
Aqui você pode usar MeshLambertMaterial para adicionar o material do objeto

Outras fontes de luz

Luz ambiente

Luz ambiente é a luz que vem de reflexos múltiplos e é chamada de luz ambiente, e sua direção original não pode ser determinada. A luz ambiente é um tipo de luz onipresente. A luz emitida pela fonte de luz ambiente é considerada proveniente de qualquer direção. Portanto, quando você especifica apenas a luz ambiente para a cena, todos os objetos parecem ter o mesmo grau de brilho, independentemente do vetor normal. (Isso ocorre porque a luz refletida pode entrar em seus olhos de todas as direções)

A luz ambiente é representada por THREE.AmbientLight e seu construtor é o seguinte:

TRÊS.Luz ambiente (cor)

var light = new THREE.AmbientLight( 0xff0000 );

scene.add( light );

exemplo:

<script src="js/three.js"></script>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
	</style>
<body>
	<div id="app">
		
	</div>
	
	<script type="text/javascript">
		var scene = new THREE.Scene();
		camera = new THREE.PerspectiveCamera(105, window.innerWidth / window.innerHeight, 1, 1000);
		render = new THREE.WebGLRenderer({
			antialias: true
		});
		render.setPixelRatio(window.devicePixelRatio);
		render.setSize(window.innerWidth, window.innerHeight)
		/********************************************************/
		var app = document.getElementById("app");
		app.appendChild(render.domElement);
		
		var geometry = new THREE.BoxGeometry(10, 10, 10);
		var textureLoader = new THREE.TextureLoader();
		var texture = textureLoader.load('img/back.jpg'); //加载纹理贴图，就是由图片组成一个纹理
		var basicMaterial = new THREE.MeshLambertMaterial({
			map: texture //设置颜色贴图属性值
		})
		var meshs = new THREE.Mesh(geometry, basicMaterial);
		scene.add(meshs);
		
		// 光源
		var ambient = new THREE.AmbientLight("white");
		scene.add(ambient);
		
		// 相机
		camera.position.set(20, 20, 40); //设置相机位置
		camera.lookAt(new THREE.Vector3(0, 0, 0))
		
		/********************************************************/
		function animate(){
			meshs.rotation.y += 0.03;  //转动
			render.render(scene, camera);
			window.requestAnimationFrame(animate);
		}
		animate();
	</script>
</body>

efeito:
Insira a descrição da imagem aqui

#### PointLight PointLight: A luz emitida por esta fonte de luz vem do mesmo ponto e a direção irradia de todas as direções. Por exemplo, a luz emitida por velas, a luz emitida por vaga-lumes.

A luz pontual é representada por PointLight e seu construtor é o seguinte:

PointLight (cor, intensidade, distância)

Cor: a cor da luz
Intensidade: A intensidade da luz, o padrão é 1,0, o que significa que é uma luz com 100% de intensidade
distance: A distância da luz, da posição da fonte de luz, após a distância, a intensidade da luz vai atenuar de Intensidade para 0. Por padrão, este valor é 0,0, o que significa que a intensidade da fonte de luz não atenua.

Exemplo: substitua a fonte de luz ambiente no exemplo acima

			// 光源
			var point = new THREE.PointLight("white", 10, 100);
			point.position.set(40, 30, 30);
			scene.add(point);

efeito:

A intensidade da fonte de luz é 10
A intensidade da fonte de luz é 5

DirectionalLight

A luz paralela é a luz emitida em uma direção específica. O desempenho desse tipo de luz é como o infinito, e os raios de luz emitidos por ele são todos paralelos. A luz paralela é frequentemente usada para simular o efeito da luz solar; o sol está longe o suficiente, então podemos pensar que a posição do sol está infinitamente longe, então pensamos que os raios de luz do sol também são paralelos

A confusão comum da luz direcional de Three.js é que definir a rotação não tem efeito. Isso ocorre porque a luz direcional de three.js é semelhante aos
exemplos de "luz direcional de destino" de outros motores :

// 光源
var directionalLight = new THREE.DirectionalLight( 0xffffff, 5 );
directionalLight.position.set(1, 1, 1)  //方向
scene.add(directionalLight);

efeito:

Insira a descrição da imagem aqui

Holofote

Spotlight: Este tipo de fonte de luz emite luz de um cone para produzir um efeito de condensação no objeto iluminado. Para usar esta fonte de luz, você precisa especificar a direção da emissão de luz e o ângulo do vértice α do cone

Ele é emitido de um ponto em uma direção, ao longo de um cone. Quanto mais distante da luz, maior seu tamanho
Insira a descrição da imagem aqui
. O construtor de um holofote é:

THREE.SpotLight (hex, intensidade, distância, ângulo, expoente)

Os parâmetros da função são os seguintes:

Hex: a cor emitida pelo holofote, como 0xFFFFFF
Intensidade: A intensidade da fonte de luz, o padrão é 1,0; se for 0,5, a intensidade é pela metade, o que significa que a cor ficará mais clara. Igual à fonte de luz pontual acima.
Distância: A intensidade da luz, atenua do valor máximo até 0, a distância necessária. O padrão é 0, o que significa que a luz não atenua. Se não for 0, significa que a luz está atenuando linearmente da posição da fonte de luz até a distância. Para a distância da fonte de luz, a intensidade da fonte de luz é 0.
Ângulo: o ângulo de coloração do holofote, usando radianos como unidade. Este ângulo é o ângulo formado pela direção da fonte de luz.
expoente: No modelo de fonte de luz, um parâmetro de atenuação, quanto maior a atenuação, mais rápido.

exemplo:

// 光源
var spotLight = new THREE.SpotLight( "#fff", 10, 100, 0.1, 0.8 )
spotLight.position.set(30,30,30)
scene.add(spotLight);

efeito:
Insira a descrição da imagem aqui