communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison interface Web js tutoriel Introduction de base à la bibliothèque Three.js JS

Introduction de base à la bibliothèque Three.js JS

巴扎黑
巴扎黑
Sep 15, 2017 am 09:15 AM
javascript 入门

three.js est un framework webGL largement utilisé en raison de sa facilité d'utilisation. Ci-dessous, l'éditeur de Script House expliquera la méthode de configuration de base de three.js à travers des cas. Veuillez vous référer à cet article pour plus de détails

<.>Remarques d'ouverture

webGL nous permet d'obtenir des effets 3D sur toile. Three.js est un framework webGL largement utilisé en raison de sa facilité d'utilisation. Si vous souhaitez apprendre le webGL, c'est un bon choix d'abandonner ces interfaces natives compliquées et de commencer avec ce framework.

Le blogueur apprend actuellement three.js et a constaté que les informations pertinentes sont très rares, et même la documentation officielle de l'API est très approximative. De nombreux effets nécessitent que vous tapiez lentement le code et que vous l'exploriez vous-même. Le but de la rédaction de ce tutoriel est donc de le résumer moi-même, et de le partager avec tout le monde.

Cet article est le premier d'une série de tutoriels : Mise en route. Dans cet article, je prendrai une démo simple comme exemple pour expliquer la méthode de configuration de base de three.js. Après avoir étudié cet article, vous apprendrez à dessiner un graphique en trois dimensions dans le navigateur !

Travail de préparation

Avant d'écrire du code, vous devez d'abord télécharger le dernier package de framework three.js et l'introduire dans votre page three.js , bien sûr, il y a de nombreuses démos dans le package de fichiers que tout le monde peut apprendre ;

Chrome est actuellement le meilleur navigateur prenant en charge webGL, Firefow est deuxième et Aoyou et Cheetah domestiques peuvent également s'exécuter après les tests.

Commencez par un exemple !

Nous construisons d'abord le code HTML, comme suit : 


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>lesson1-by-shawn.xie</title>
 <!--引入Three.js-->
 <script src="Three.js"></script>
 <style type="text/css">
 p#canvas-frame{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
 }
 </style>
 </head>
 <body>
 <!--盛放canvas的容器-->
 <p id="container"></p>
 </body>
</html>
Copier après la connexion
Préparez une zone cohérente avec la taille du cadre du canevas pour le dessin WebGL. Plus précisément :

(1) Ajoutez l'élément p avec l'identifiant "canvas3d" à la balise body.

(2) Spécifiez le style CSS de "canvas3d" dans la balise de style.

Il est à noter que nous n'avons pas besoin d'écrire une balise , il suffit de définir le p qui contient le canevas. Le canevas est généré dynamiquement par three.js !

Commençons à écrire le script. Nous allons construire un modèle tridimensionnel simple à travers les cinq étapes suivantes, qui sont également les étapes de base de three.js :

1 Configurer les trois. .js renderer

Le processus de mappage d'objets dans un espace tridimensionnel sur un plan bidimensionnel est appelé rendu tridimensionnel. De manière générale, nous appelons le logiciel qui effectue les opérations de rendu un moteur de rendu. Plus précisément, le traitement suivant est requis.

(0) Déclarer des variables globales (objets) ;

(1) Obtenir la hauteur et la largeur du canevas "canvas-frame"

(2) Générer un objet de rendu ( Attributs : l'effet d'anti-aliasing est valable pour les paramètres );

(3) Spécifiez la hauteur et la largeur du rendu (identiques à la taille du cadre du canevas) ; 4) Ajoutez l'élément [canvas] à l'élément [canvas3d ]

(5) définit la clearColor du moteur de rendu.


2. Configurer la caméra 

//开启Three.js渲染器
var renderer;//声明全局变量（对象）
function initThree() {
 width = document.getElementById(&#39;canvas3d&#39;).clientWidth;//获取画布「canvas3d」的宽
 height = document.getElementById(&#39;canvas3d&#39;).clientHeight;//获取画布「canvas3d」的高
 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
 renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
 document.getElementById(&#39;canvas3d&#39;).appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
 renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
}
Copier après la connexion
Dans OpenGL (WebGL), il existe un moyen de projeter des objets dans un espace tridimensionnel en deux -espace dimensionnel Il existe deux types de caméras : la projection en perspective et la projection orthographique. La projection en perspective est une méthode dans laquelle les objets les plus proches du point de vue sont plus grands et les objets plus éloignés sont plus petits. Cela correspond à la façon dont nous voyons les objets dans la vie quotidienne. La projection orthographique consiste à dessiner des objets dans une taille uniforme quelle que soit la distance du point de vue. Dans des domaines tels que l'architecture et le design, les objets doivent être dessinés sous différents angles, ce type de projection est donc largement utilisé. Dans Three.js, vous pouvez également spécifier des caméras en projection perspective et en projection orthographique. Cet article suit les étapes ci-dessous pour configurer la méthode de projection en perspective.

(0) Déclarez les variables globales (objets) ;

(1) Réglez la caméra pour la projection en perspective

(2) Définissez les coordonnées de position de la caméra ; 🎜>

(3) Réglez le haut de la caméra dans la direction de l'axe "z"

(4) Définissez les coordonnées centrales du champ de vision ;　　　

3. Définir la scène

La scène est un espace tridimensionnel. Déclarez un objet appelé [scene] en utilisant la classe [Scene]. 
　 //设置相机
 var camera;
 function initCamera() { 
 camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
 camera.position.x = 0;//设置相机的位置坐标
 camera.position.y = 50;//设置相机的位置坐标
 camera.position.z = 100;//设置相机的位置坐标
 camera.up.x = 0;//设置相机的上为「x」轴方向
 camera.up.y = 1;//设置相机的上为「y」轴方向
 camera.up.z = 0;//设置相机的上为「z」轴方向
 camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
 }
Copier après la connexion

4. Définir la lumière de la source lumineuse

Dans l'espace tridimensionnel d'OpenGL (WebGL), il existe deux types de lumière ponctuelle. sources et projecteurs. En outre, il existe également une source de lumière parallèle (source de lumière élevée sans fil) comme cas particulier de source de lumière ponctuelle. De plus, en tant que paramètre de la source lumineuse, des réglages tels que [Lumière ambiante] peuvent également être effectués. En conséquence, [Point Light], [Spot Light], [Direction Light] et [Ambient Light] peuvent être définis dans Three.js. Comme OpenGL, plusieurs sources de lumière peuvent être définies dans une scène. Fondamentalement, il s’agit d’une combinaison de lumière ambiante et de plusieurs autres sources lumineuses. Si vous ne réglez pas la lumière ambiante, les surfaces qui ne sont pas éclairées par la lumière deviendront trop sombres. Dans cet article, nous suivons d'abord les étapes ci-dessous pour configurer la source de lumière directionnelle, puis ajoutons de la lumière ambiante. 
　　//设置场景
 var scene;
 function initScene() { 
 scene = new THREE.Scene();
 }
Copier après la connexion

(0) Déclarer des variables globales (objets)

(1) Définir une source de lumière parallèle

(2) Définir un vecteur de source de lumière

(3) Ajouter une source de lumière Accédez à la scène

Ici, nous utilisons la classe "DirectionalLight" pour déclarer un objet appelé [light] pour représenter la source de lumière directionnelle

5. Définissez l'objet objet

这里，我们声明一个球模型　　　


　　　//设置物体
 var sphere;
 function initObject(){ 
 sphere = new THREE.Mesh(
  new THREE.SphereGeometry(20,20), //width,height,depth
  new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
 );
 scene.add(sphere);
 sphere.position.set(0,0,0);
 }
Copier après la connexion

最后，我们写一个主函数执行以上五步：


　　　　　　　　//执行
 function threeStart() {
 initThree();
 initCamera();
 initScene(); 
 initLight();
 initObject();
 renderer.clear(); 
 renderer.render(scene, camera);
 }
Copier après la connexion

这时，测试以上程序，你会发现浏览器窗口中出现了你绘制的球形模型：

总结

以上就是three.js的入门内容，我们核心的五步就是：

1.设置three.js渲染器

2.设置摄像机camera

3.设置场景scene

4.设置光源light

5.设置物体object

可能其中有些设置你还不太清楚，没关系，后面几篇文章会对以上五个主要步骤进行详细的讲解，敬请期待~~

本例完整代码：


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>lesson1-by-shawn.xie</title>
 <!--引入Three.js-->
 <script src="Three.js"></script>
 <script type="text/javascript">
 //开启Three.js渲染器
 var renderer;//声明全局变量（对象）
 function initThree() {
 width = document.getElementById(&#39;canvas3d&#39;).clientWidth;//获取画布「canvas3d」的宽
 height = document.getElementById(&#39;canvas3d&#39;).clientHeight;//获取画布「canvas3d」的高
 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
 renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
 document.getElementById(&#39;canvas3d&#39;).appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
 renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
 }
 //设置相机
 var camera;
 function initCamera() { 
 camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
 camera.position.x = 0;//设置相机的位置坐标
 camera.position.y = 50;//设置相机的位置坐标
 camera.position.z = 100;//设置相机的位置坐标
 camera.up.x = 0;//设置相机的上为「x」轴方向
 camera.up.y = 1;//设置相机的上为「y」轴方向
 camera.up.z = 0;//设置相机的上为「z」轴方向
 camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
 }
 //设置场景
 var scene;
 function initScene() { 
 scene = new THREE.Scene();
 }
 //设置光源
 var light;
 function initLight() { 
 light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源
 light.position.set( 200, 200, 200 );//设置光源向量
 scene.add(light);// 追加光源到场景
 }
 //设置物体
 var sphere;
 function initObject(){ 
 sphere = new THREE.Mesh(
  new THREE.SphereGeometry(20,20), //width,height,depth
  new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
 );
 scene.add(sphere);
 sphere.position.set(0,0,0);
 }
 //执行
 function threeStart() {
 initThree();
 initCamera();
 initScene(); 
 initLight();
 initObject();
 renderer.clear(); 
 renderer.render(scene, camera);
 }
 </script>
 <style type="text/css">
 p#canvas3d{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
 }
 </style>
 </head>
 <body onload=&#39;threeStart();&#39;>
 <!--盛放canvas的容器-->
 <p id="canvas3d"></p>
 </body>
</html>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille
3 Il y a quelques semaines By DDD
Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour
3 Il y a quelques semaines By DDD
Où trouver la courte de la grue à atomide atomique
3 Il y a quelques semaines By DDD
<🎜>: Dead Rails - Comment relever chaque défi
4 Il y a quelques semaines By DDD
Guide de l'atomfall: emplacements des articles, guides de quête et conseils
1 Il y a quelques mois By DDD
Afficher plus

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?
7692
15
Tutoriel Java
1639
14
Tutoriel CakePHP
1393
52
Tutoriel Laravel
1287
25
Tutoriel PHP
1229
29
Afficher plus
Related knowledge
Un didacticiel sur le modèle de diffusion qui vaut votre temps, de l'Université Purdue Un didacticiel sur le modèle de diffusion qui vaut votre temps, de l'Université Purdue Apr 07, 2024 am 09:01 AM

La diffusion permet non seulement de mieux imiter, mais aussi de « créer ». Le modèle de diffusion (DiffusionModel) est un modèle de génération d'images. Par rapport aux algorithmes bien connus tels que GAN et VAE dans le domaine de l’IA, le modèle de diffusion adopte une approche différente. Son idée principale est un processus consistant à ajouter d’abord du bruit à l’image, puis à la débruiter progressivement. Comment débruiter et restaurer l’image originale est la partie centrale de l’algorithme. L'algorithme final est capable de générer une image à partir d'une image bruitée aléatoirement. Ces dernières années, la croissance phénoménale de l’IA générative a permis de nombreuses applications passionnantes dans la génération de texte en image, la génération de vidéos, et bien plus encore. Le principe de base de ces outils génératifs est le concept de diffusion, un mécanisme d'échantillonnage spécial qui surmonte les limites des méthodes précédentes.

Générez du PPT en un seul clic ! Kimi : Que les « travailleurs migrants PPT » deviennent d'abord populaires Générez du PPT en un seul clic ! Kimi : Que les « travailleurs migrants PPT » deviennent d'abord populaires Aug 01, 2024 pm 03:28 PM

Kimi : En une seule phrase, un PPT est prêt en seulement dix secondes. PPT est tellement ennuyeux ! Pour tenir une réunion, vous devez avoir un PPT ; pour rédiger un rapport hebdomadaire, vous devez avoir un PPT ; pour solliciter des investissements, vous devez présenter un PPT ; même pour accuser quelqu'un de tricherie, vous devez envoyer un PPT ; L'université ressemble plus à une spécialisation PPT. Vous regardez le PPT en classe et faites le PPT après les cours. Peut-être que lorsque Dennis Austin a inventé le PPT il y a 37 ans, il ne s'attendait pas à ce qu'un jour le PPT devienne aussi répandu. Parler de notre dure expérience de création de PPT nous fait monter les larmes aux yeux. "Il m'a fallu trois mois pour réaliser un PPT de plus de 20 pages, et je l'ai révisé des dizaines de fois. J'avais envie de vomir quand j'ai vu le PPT." "À mon apogée, je faisais cinq PPT par jour, et même ma respiration." était PPT." Si vous avez une réunion impromptue, vous devriez le faire

Tous les prix CVPR 2024 annoncés ! Près de 10 000 personnes ont assisté à la conférence hors ligne et un chercheur chinois de Google a remporté le prix du meilleur article. Tous les prix CVPR 2024 annoncés ! Près de 10 000 personnes ont assisté à la conférence hors ligne et un chercheur chinois de Google a remporté le prix du meilleur article. Jun 20, 2024 pm 05:43 PM

Tôt le matin du 20 juin, heure de Pékin, CVPR2024, la plus grande conférence internationale sur la vision par ordinateur qui s'est tenue à Seattle, a officiellement annoncé le meilleur article et d'autres récompenses. Cette année, un total de 10 articles ont remporté des prix, dont 2 meilleurs articles et 2 meilleurs articles étudiants. De plus, il y a eu 2 nominations pour les meilleurs articles et 4 nominations pour les meilleurs articles étudiants. La conférence la plus importante dans le domaine de la vision par ordinateur (CV) est la CVPR, qui attire chaque année un grand nombre d'instituts de recherche et d'universités. Selon les statistiques, un total de 11 532 articles ont été soumis cette année, dont 2 719 ont été acceptés, avec un taux d'acceptation de 23,6 %. Selon l'analyse statistique des données CVPR2024 du Georgia Institute of Technology, du point de vue des sujets de recherche, le plus grand nombre d'articles est la synthèse et la génération d'images et de vidéos (Imageandvideosyn

Du bare metal au grand modèle avec 70 milliards de paramètres, voici un tutoriel et des scripts prêts à l'emploi Du bare metal au grand modèle avec 70 milliards de paramètres, voici un tutoriel et des scripts prêts à l'emploi Jul 24, 2024 pm 08:13 PM

Nous savons que le LLM est formé sur des clusters informatiques à grande échelle utilisant des données massives. Ce site a présenté de nombreuses méthodes et technologies utilisées pour aider et améliorer le processus de formation LLM. Aujourd'hui, ce que nous souhaitons partager est un article qui approfondit la technologie sous-jacente et présente comment transformer un ensemble de « bare metals » sans même un système d'exploitation en un cluster informatique pour la formation LLM. Cet article provient d'Imbue, une startup d'IA qui s'efforce d'atteindre une intelligence générale en comprenant comment les machines pensent. Bien sûr, transformer un tas de « bare metal » sans système d'exploitation en un cluster informatique pour la formation LLM n'est pas un processus facile, plein d'exploration et d'essais et d'erreurs, mais Imbue a finalement réussi à former un LLM avec 70 milliards de paramètres et dans. le processus s'accumule

L'IA utilisée | L'IA a créé un vlog sur la vie d'une fille vivant seule, qui a reçu des dizaines de milliers de likes en 3 jours L'IA utilisée | L'IA a créé un vlog sur la vie d'une fille vivant seule, qui a reçu des dizaines de milliers de likes en 3 jours Aug 07, 2024 pm 10:53 PM

Rédacteur du Machine Power Report : Yang Wen La vague d’intelligence artificielle représentée par les grands modèles et l’AIGC a discrètement changé notre façon de vivre et de travailler, mais la plupart des gens ne savent toujours pas comment l’utiliser. C'est pourquoi nous avons lancé la rubrique « AI in Use » pour présenter en détail comment utiliser l'IA à travers des cas d'utilisation de l'intelligence artificielle intuitifs, intéressants et concis et stimuler la réflexion de chacun. Nous invitons également les lecteurs à soumettre des cas d'utilisation innovants et pratiques. Lien vidéo : https://mp.weixin.qq.com/s/2hX_i7li3RqdE4u016yGhQ Récemment, le vlog de la vie d'une fille vivant seule est devenu populaire sur Xiaohongshu. Une animation de style illustration, associée à quelques mots de guérison, peut être facilement récupérée en quelques jours seulement.

Cinq logiciels de programmation pour débuter l'apprentissage du langage C Cinq logiciels de programmation pour débuter l'apprentissage du langage C Feb 19, 2024 pm 04:51 PM

En tant que langage de programmation largement utilisé, le langage C est l'un des langages de base qui doivent être appris pour ceux qui souhaitent se lancer dans la programmation informatique. Cependant, pour les débutants, l’apprentissage d’un nouveau langage de programmation peut s’avérer quelque peu difficile, notamment en raison du manque d’outils d’apprentissage et de matériel pédagogique pertinents. Dans cet article, je présenterai cinq logiciels de programmation pour aider les débutants à démarrer avec le langage C et vous aider à démarrer rapidement. Le premier logiciel de programmation était Code :: Blocks. Code::Blocks est un environnement de développement intégré (IDE) gratuit et open source pour

A lire absolument pour les débutants en technique : Analyse des niveaux de difficulté du langage C et Python A lire absolument pour les débutants en technique : Analyse des niveaux de difficulté du langage C et Python Mar 22, 2024 am 10:21 AM

Titre : Une lecture incontournable pour les débutants en technique : Analyse des difficultés du langage C et de Python, nécessitant des exemples de code spécifiques. À l'ère numérique d'aujourd'hui, la technologie de programmation est devenue une capacité de plus en plus importante. Que vous souhaitiez travailler dans des domaines tels que le développement de logiciels, l'analyse de données, l'intelligence artificielle ou simplement apprendre la programmation par intérêt, choisir un langage de programmation adapté est la première étape. Parmi les nombreux langages de programmation, le langage C et Python sont deux langages de programmation largement utilisés, chacun ayant ses propres caractéristiques. Cet article analysera les niveaux de difficulté du langage C et Python

Compte à rebours des 12 points faibles de RAG, l'architecte senior de NVIDIA enseigne les solutions Compte à rebours des 12 points faibles de RAG, l'architecte senior de NVIDIA enseigne les solutions Jul 11, 2024 pm 01:53 PM

La génération augmentée par récupération (RAG) est une technique qui utilise la récupération pour améliorer les modèles de langage. Plus précisément, avant qu'un modèle de langage ne génère une réponse, il récupère les informations pertinentes à partir d'une vaste base de données de documents, puis utilise ces informations pour guider le processus de génération. Cette technologie peut considérablement améliorer l'exactitude et la pertinence du contenu, atténuer efficacement le problème des hallucinations, augmenter la vitesse de mise à jour des connaissances et améliorer la traçabilité de la génération de contenu. RAG est sans aucun doute l’un des domaines de recherche les plus passionnants en matière d’intelligence artificielle. Pour plus de détails sur RAG, veuillez vous référer à l'article de la rubrique de ce site "Quelles sont les nouveautés de RAG, spécialisée dans le rattrapage des défauts des grands modèles ?" Cette revue l'explique clairement. Mais RAG n'est pas parfait et les utilisateurs rencontrent souvent des « problèmes » lorsqu'ils l'utilisent. Récemment, la solution avancée d'IA générative de NVIDIA

See all articles