écrit devant
Dans Three.js, les lumières existent pour rendre les scènes 3D plus réelles et réalistes. L'éclairage peut être utilisé pour simuler des effets d'éclairage réels tels que des ombres, des réflexions et des réfractions. Dans cet article, nous examinerons les différents types de lumières dans Three.js et comment ajouter et ajuster leurs propriétés dans une scène.
1 Présentation de base
1 point lumineux
Une lumière ponctuelle est une lumière qui émet de la lumière dans toutes les directions à partir d'un seul point, semblable à une ampoule ou une bougie normale. Les sources lumineuses ponctuelles peuvent être utilisées pour simuler des effets d'éclairage locaux dans la réalité,
Par exemple, l'effet d'éclairage produit par une lampe de poche ou une ampoule dans la réalité.
Dans Three.js, une lumière ponctuelle peut être créée en créant un objet THREE.PointLight.
var light = new THREE.PointLight(0xffffff, 1, 100); light.position.set(0, 0, 0); scene.add(light);
Le code ci-dessus crée un point lumineux blanc avec une intensité de 1 et une plage de 100. Nous définissons sa position sur (0,0,0), qui est le point central de la scène. Après l'ajout d'une source lumineuse ponctuelle à la scène, les objets de la scène seront éclairés par la source lumineuse ponctuelle pour produire un effet d'éclairage local.
2 sources lumineuses parallèles
Une lumière directionnelle est une lumière qui émet de la lumière dans une direction, semblable aux rayons du soleil. Des sources de lumière parallèles peuvent être utilisées pour simuler l'effet d'éclairage global dans la réalité, tel que l'effet d'éclairage produit par le soleil ou le ciel réel.
Dans Three.js, nous pouvons créer une source de lumière directionnelle en créant un objet THREE.DirectionalLight.
var light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(0, 1, 0); scene.add(light);Le code ci-dessus crée une lumière directionnelle blanche avec une intensité de 1. Nous définissons sa position sur (0,1,0), qui est directement au-dessus de la scène. Une fois la source de lumière parallèle ajoutée à la scène, les objets de la scène seront éclairés par la source de lumière parallèle, ce qui produira un effet d'éclairage global.
3 projecteurs
Un projecteur est une lumière qui émet de la lumière à partir d'un point dans une direction, semblable à une lampe de poche ou à une lumière de voiture. Les projecteurs peuvent être utilisés pour simuler des effets d'éclairage locaux dans la réalité, tels que les effets d'éclairage produits par des lampes de poche ou des phares de voiture dans la réalité.
Dans Three.js, nous pouvons créer un projecteur en créant un objet THREE.SpotLight.
var light = new THREE.SpotLight(0xffffff, 1, 100, Math.PI/4, 1); light.position.set(0, 0, 0); light.target.position.set(0, -1, 0); scene.add(light); scene.add(light.target);Le code ci-dessus crée un projecteur blanc avec une intensité de 1 et une plage de 100. Nous définissons sa position sur (0,0,0), qui est le point central de la scène. Nous définissons également la direction et l'angle du projecteur, ainsi que la position cible du projecteur. Après l'ajout d'un projecteur à la scène, les objets de la scène seront éclairés par le projecteur pour produire un effet d'éclairage local.
4 Ajuster les propriétés de la lumière
Dans Three.js, nous pouvons ajuster l'effet d'éclairage de la lumière en modifiant les propriétés de la lumière. Par exemple, nous pouvons modifier la couleur, l'intensité, la portée, la direction, l'angle et d'autres propriétés de la lumière pour modifier l'effet d'éclairage de la lumière. Voici quelques propriétés lumineuses courantes :
couleur:
color : définit la couleur de la lumière, vous pouvez utiliser une valeur de couleur hexadécimale ou un objet THREE.Color.
Par exemple:
light.color = new THREE.Color(0xff0000);
intensité:
Intensity : Définissez l'intensité de la lumière, la valeur est un nombre à virgule flottante entre 0 et 1. Par exemple:
light.intensity = 0.5;
distance:
distance : définissez la portée de la lumière, c'est-à-dire la distance la plus éloignée à laquelle la lumière brille. Par exemple:
light.distance = 200;
position
position : Réglez la position de la lumière. Par exemple:
light.position.set(0, 0, 0);
cible:
cible : définissez la position cible du projecteur. Par exemple:
light.target.position.set(0, -1, 0);
angle:
angle : définissez l'angle du projecteur, c'est-à-dire la plage d'irradiation lumineuse. Par exemple:
light.angle = Math.PI / 4;
pénombre:
pénombre : définit le bord doux du projecteur, c'est-à-dire la douceur de la partie périphérique de la lumière. Par exemple:
light.penumbra = 0.5;
En modifiant les propriétés de la lumière, nous pouvons ajuster l'effet d'éclairage de la lumière pour rendre la scène plus réelle et réaliste.
Résumer
Ce qui précède présente la création de différents types de lumières dans Three.js, y compris les lumières ponctuelles, les lumières directionnelles et les projecteurs, et montre comment ajouter et ajuster leurs propriétés dans la scène.
En utilisant des lumières, vous pouvez ajouter des effets d'éclairage réalistes à la scène, rendant la scène plus vivante et réelle.
Dans les projets réels, différents types de lumières peuvent être sélectionnés en fonction des besoins, et les propriétés des lumières peuvent être ajustées en fonction de scènes spécifiques pour obtenir le meilleur effet.
2 Exemple de présentation
Voici un exemple de scène Three.js utilisant plusieurs lumières, afin que vous puissiez mieux comprendre et appliquer les lumières.
Partie HTML
<!DOCTYPE html> <html> <head> <title>Three.js Lighting Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <style> body { margin: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body>C'est la partie HTML, regardons d'abord l'en-tête de la page. Dans la tête, nous introduisons le fichier de base de la bibliothèque Three.js
three.min.js, ainsi qu'un en-tête et des métadonnées, ainsi que des styles.
2.2 Rubrique JavaScript
créer une scène
<script> // 创建一个场景 var scene = new THREE.Scene();
Créer une caméra en perspective
Nous utilisons Three.js pour créer une scène, la scène stockera tous les objets, lumières et caméras.
// 创建一个透视相机 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); camera.position.z = 5;
Rendu WebGL
Ensuite, nous créons une caméra en perspective. Cette caméra a quatre paramètres, à savoir l'angle de vision, le rapport d'aspect, le plan de détourage proche et le plan de détourage éloigné. Dans cet exemple, nous définissons l'angle de vue sur 75 degrés, le rapport d'aspect sur le rapport d'aspect de la fenêtre du navigateur, le plan de détourage proche sur 0,1 et le plan de détourage éloigné sur 1000. Nous avons également défini la position de la caméra en la plaçant à 5 unités sur l'axe z.
// 创建一个WebGL渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );Ensuite, nous créons un moteur de rendu WebGL et l'ajoutons à la page.
setSize()La méthode définit la taille du moteur de rendu, en le définissant sur la taille de la fenêtre du navigateur.document.body.appendChild()La méthode ajoute l'élément DOM du moteur de rendu à la page afin que nous puissions voir la scène sur la page.// 创建一个盒子网格模型并将其添加到场景中 var geometry = new THREE.BoxGeometry(); var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube );
Créer un modèle de boîte
Ensuite, nous avons créé un maillage de boîte et l'avons ajouté à la scène. Ici, nous utilisons
BoxGeometryetMeshPhongMaterialdeux classes pour créer la forme et le matériau de la boîte, et les transmettons auMeshconstructeur de classe pour créer un modèle de maillage.scene.add()méthode pour ajouter le modèle à la scène.// 创建一个球体网格模型并将其添加到场景中 var geometry2 = new THREE.SphereGeometry(1.5, 32, 32); var material2 = new THREE.MeshPhongMaterial( { color: 0xff0000 } ); var sphere = new THREE.Mesh( geometry2, material2 ); sphere.position.x = 2.5; scene.add( sphere );Nous avons également créé un maillage de sphère et l'avons ajouté à la scène. Ici, nous utilisons
SphereGeometryetMeshPhongMaterialdeux classes pour créer la forme et le matériau de la sphère, et les transmettons auMeshconstructeur de classe pour créer un modèle de maillage. Nous avons également défini la position de la sphère en la plaçant à 2,5 unités sur l'axe des x.// 添加点光源 var pointLight = new THREE.PointLight( 0xffffff, 1, 100 ); pointLight.position.set( 0, 0, 0 ); scene.add( pointLight ); pointLight.distance = 50; pointLight.intensity = 2;Maintenant, nous ajoutons une lumière ponctuelle. Ici, nous utilisons
PointLightla classe pour créer une lumière ponctuelle et définir sa position sur (0, 0, 0). Nous avons également défini la distance et l'intensité de la source lumineuse.// 添加平行光源 var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 ); directionalLight.position.set( 0, 1, 0 ); scene.add( directionalLight ); directionalLight.color = new THREE.Color(0xffe5b4);Ensuite, nous avons ajouté une source de lumière directionnelle. Ici, nous utilisons
DirectionalLightla classe pour créer une lumière directionnelle et définir sa position sur (0, 1, 0). Nous définissons également la couleur de la source lumineuse.// 添加聚光灯 var spotLight = new THREE.SpotLight( 0xffffff, 1, 100, Math.PI/4, 1 ); spotLight.position.set( 0, 2, 0 ); spotLight.target.position.set( 0, 0, 0 ); scene.add( spotLight ); scene.add( spotLight.target ); spotLight.color = new THREE.Color(0xffc0cb); spotLight.distance = 50; spotLight
ajouter un projecteur
// 添加聚光灯
var spotLight = new THREE.SpotLight( 0xffffff, 1, 100, Math.PI/4, 1 );
spotLight.position.set( 0, 2, 0 );
spotLight.target.position.set( 0, 0, 0 );
scene.add( spotLight );
scene.add( spotLight.target );
spotLight.color = new THREE.Color(0xffc0cb);
spotLight.distance = 50;
spotLight.intensity = 2;
spotLight.angle = Math.PI/6;
spotLight.penumbra = 0.2;
rendre la scène
Nous avons également ajouté un projecteur. Ici, nous utilisons
SpotLightla classe pour créer un projecteur et définir sa position et sa cible. Nous définissons également la distance, la couleur, l'intensité, l'angle et la pénombre de la source lumineuse.// 渲染场景 function animate() { requestAnimationFrame( animate ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; sphere.rotation.x += 0.01; sphere.rotation.y += 0.01; renderer.render( scene, camera ); } animate();Enfin, une fonction est définie
animatepour le rendu de la scène. Dans cette fonction, nous utilisonsrequestAnimationFramela méthode pour appeler récursivementanimatela fonction pour obtenir le rendu de chaque image. Avant le rendu, nous faisons également pivoter la boîte et la sphère et appelonsrenderer.renderla méthode pour rendre la scène.
2.3 Code complet
Le code complet est le suivant
<!DOCTYPE html>
<html>
<head>
<title>Three.js Lighting Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
background-color: black; /* 将背景色设置为黑色 */
}
canvas {
display: block;
}
</style>
</head>
<body>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
var geometry2 = new THREE.SphereGeometry(1.5, 32, 32);
var material2 = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
var sphere = new THREE.Mesh( geometry2, material2 );
sphere.position.x = 2.5;
scene.add( sphere );
// 添加点光源
var pointLight = new THREE.PointLight( 0xffffff, 1, 100 );
pointLight.position.set( 0, 0, 0 );
scene.add( pointLight );
pointLight.distance = 50;
pointLight.intensity = 2;
// 添加平行光源
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
directionalLight.position.set( 0, 1, 0 );
scene.add( directionalLight );
directionalLight.color = new THREE.Color(0xffe5b4);
// 添加聚光灯
var spotLight = new THREE.SpotLight( 0xffffff, 1, 100, Math.PI/4, 1 );
spotLight.position.set( 0, 2, 0 );
spotLight.target.position.set( 0, 0, 0 );
scene.add( spotLight );
scene.add( spotLight.target );
spotLight.color = new THREE.Color(0xffc0cb);
spotLight.distance = 50;
spotLight.intensity = 2;
spotLight.angle = Math.PI/6;
spotLight.penumbra = 0.2;
// 渲染场景
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
sphere.rotation.x += 0.01;
sphere.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>Vous pouvez exécuter ce code dans votre navigateur et voir une scène avec trois types de lumières différents. Vous pouvez essayer d'ajuster les propriétés de la lumière pour obtenir différents effets.
Cet exemple peut vous aider à mieux comprendre et appliquer l'éclairage, et également vous inspirer pour appliquer des scènes et des effets similaires dans vos projets.