Introduction
Aujourd'hui, je vais principalement vous présenter l'utilisation de base de three.js pour construire. Cet article est basé sur la version démo d'un projet que j'ai réalisé en 2016. L'auteur a utilisé Html5 et JS pour l'écrire. Vous demanderez peut-être s'il existe des versions vue, react et angular. Quand l'auteur aura le temps plus tard, je vous les présenterai certainement.
En fait, l'origine de la programmation réside dans le raffinement de ses propres idées philosophiques, sans accorder aucune restriction technique et de langage de programmation. C'est comme vous donner le temps d'écrire un bel article en anglais ou dans n'importe quelle langue du monde. Mais la beauté de l'article n'est pas le langage qu'il utilise, mais son idée centrale. Nous voulons simplifier les problèmes complexes et les réduire.
segment de code
- Tout d'abord, lorsqu'un utilisateur visite une page Web, la page Web charge la bibliothèque Three.js et d'autres fichiers de script associés, notamment DDSLoader.js, MTLLoader.js, OBJLoader.js, tween.min.js et OrbitControls.js . Ces fichiers fournissent le support nécessaire pour la fonctionnalité de Three.js.
- Dans la balise <body> de la page, nous créons un élément <div> dont l'attribut id est défini sur "container" comme conteneur pour le résultat du rendu Three.js.
- Dans la section JavaScript, nous définissons les variables camera, scene et renderer pour stocker des instances de caméras, de scènes et de renderers. Les variables mouseX et mouseY sont utilisées pour stocker la position de la souris.
- Ensuite, nous définissons la fonction init(), qui est utilisée pour initialiser la scène Three.js. La fonction obtient d'abord l'élément conteneur et crée une caméra en perspective. La caméra est placée à (0, 0,
450), sa propriété fov est réglée sur 460 degrés et les plans lointain et proche sont respectivement 1 et 20000. Ensuite, nous créons une scène et définissons sa couleur de fond sur gris (0xcccccc). Des lumières ambiantes et ponctuelles sont ajoutées à la scène. - Lors du processus de chargement du modèle, nous définissons une fonction de rappel onProgress pour suivre la progression du chargement du modèle. Tout d'abord, utilisez MTLLoader pour charger le fichier de matériau (fichier MTL) du modèle et préchargez le matériau une fois le chargement terminé. Ensuite, utilisez OBJLoader pour charger le fichier de géométrie (fichier OBJ) du modèle et appliquez le matériau précédemment chargé au modèle. Une fois chargé, ajoutez le modèle à la scène.
- Ensuite, nous créons un moteur de rendu WebGL et définissons son encodage de sortie et son ratio de pixels. Ajoute l'élément DOM du moteur de rendu au conteneur créé précédemment.
- Afin de réaliser le contrôle interactif de la caméra, nous utilisons OrbitControls pour créer un contrôleur et le lier aux éléments DOM de la caméra et du moteur de rendu. Le contrôleur permet à l'utilisateur de contrôler la position et la perspective de la caméra en faisant glisser et en faisant défiler avec la souris.
- Enfin, nous définissons la fonction onWindowResize(), qui est utilisée pour redimensionner la caméra et le moteur de rendu lorsque la taille de la fenêtre change. Cette fonction met à jour le rapport d'aspect de la caméra et met à jour la taille du moteur de rendu.
- Enfin, nous définissons la fonction animate(), qui est appelée de manière récursive à l'aide de requestAnimationFrame() pour mettre à jour et restituer la scène. Dans chaque image, le rendu rendra le contenu de la scène et de la caméra.
- Une fois la page chargée, nous appelons la fonction init() pour initialiser et démarrer la boucle d'animation en appelant la fonction animate().
- De cette façon, lorsque l'utilisateur visite la page Web, une scène Three.js contenant le modèle 3D sera affichée, et l'utilisateur est autorisé à contrôler la position et la perspective de la caméra par l'interaction de la souris.
- Veuillez noter que pour que le code fonctionne correctement, vous devez vous assurer que vous avez les bons fichiers de ressources (tels que les fichiers de modèle, les fichiers de matériaux, etc.) et les fichiers de script dans les répertoires correspondants.
<!DOCTYPE html>
<html lang="en">
<head>
<title>侍女佣</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="./css/main.css">
</head>
<body>
<script src="./js/three.js"></script>
<script src="./js/DDSLoader.js"></script>
<script src="./js/MTLLoader.js"></script>
<script src="./js/OBJLoader.js"></script>
<script src="./js/tween.min.js"></script>
<script src="./js/OrbitControls.js"></script>
<script>
// 创建变量来存储相机、场景和渲染器
var camera, scene, renderer;
// 存储鼠标位置的变量
var mouseX = 0, mouseY = 0;
// 窗口的一半宽度和高度
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
// 初始化函数
function init() {
// 创建一个容器元素，并将其添加到页面中
const container = document.createElement('div');
document.body.appendChild(container);
// 创建透视相机，并设置位置
camera = new THREE.PerspectiveCamera(460, window.innerWidth / window.innerHeight, 1, 20000);
camera.position.z = 450;
// 创建场景，并设置背景颜色
scene = new THREE.Scene();
scene.background = new THREE.Color(0xcccccc);
// 创建环境光源并添加到场景中
const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
scene.add(ambientLight);
// 创建点光源并将其添加到相机中，再将相机添加到场景中
const pointLight = new THREE.PointLight(0xffffff, 1);
camera.add(pointLight);
scene.add(camera);
// 加载模型的回调函数
const onProgress = function (xhr) {
if (xhr.lengthComputable) {
const percentComplete = xhr.loaded / xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
};
// 使用MTLLoader加载材质文件
new THREE.MTLLoader()
.setPath('./model/sny/')
.load('sny.mtl', function (materials) {
materials.preload();
// 使用OBJLoader加载OBJ文件并应用之前加载的材质
new THREE.OBJLoader()
.setMaterials(materials)
.setPath('./model/sny/')
.load('sny.obj', function (object) {
object.position.y = -5;
scene.add(object);
}, onProgress);
});
// 创建WebGL渲染器，并设置相关参数
renderer = new THREE.WebGLRenderer();
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的DOM元素添加到容器中
container.appendChild(renderer.domElement);
// 创建OrbitControls来控制相机
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minDistance = 100;
controls.maxDistance = 2000;
// 监听窗口大小变化事件，触发onWindowResize函数
window.addEventListener('resize', onWindowResize);
}
// 当窗口大小变化时调整相机和渲染器的尺寸
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// 递归地调用animate函数，更新和渲染场景
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
// 初始化并开始动画循环
init();
animate();
</script>
</body>
</html>
Les rendus montrent
Ce qui suit est le résultat de l'exécution du serveur en direct basé sur vscode, et les détails peuvent être ajustés en fonction de l'API.
Remarque : lors du développement de three.js, nous devons prêter attention aux problèmes de compatibilité. À l'heure actuelle, la dernière version peut avoir des problèmes de compatibilité. Il est recommandé d'utiliser une version stable.
À ce stade, l'explication de l'auteur est terminée. Si vous avez besoin d'un package de fichiers js, veuillez vous rendre sur cette page pour télécharger ou contacter l'auteur. Merci pour votre aide