Cet article vous présente principalement les informations pertinentes sur l'apprentissage et la création de scénarios de documents chinois three.js. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour que tout le monde puisse apprendre ou utiliser three.js. Amis qui en ont besoin Apprenons avec l'éditeur ci-dessous.
Qu'est-ce que Three.js ?
Si vous lisez cet article, vous avez peut-être une certaine compréhension de Three.js, alors présentons brièvement ce qu'est Three.js
Three.js est une bibliothèque qui rend WebGL Les effets 3D sont simples. à appliquer dans le navigateur. Alors qu'un simple cube en WebGL brut se transformerait en centaines de lignes de code Javascript et shader, un Three js pour l'introduction. Nous avons commencé par construire la scène à l'aide de cubes rotatifs. Si vous rencontrez des difficultés et avez besoin d'aide, vous trouverez le code source pour référence en bas de la page.
Enregistrez le code HTML suivant sur votre ordinateur et incluez three.js dans le répertoire js, puis ouvrez-le dans le navigateur
Le code suivant sera téléchargé à partir de la balise script
<html> <head> <meta charset=utf-8> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="js/three.js"></script> <script> // Our Javascript will go here. </script> </body> </html>
Afin d'utiliser three.js pour l'affichage, nous avons besoin trois éléments : scène, caméra, Renderer pour restituer la scène à partir de la caméra.
Prenons un moment pour expliquer ce qui se passe. Nous avons maintenant créé la scène, la caméra et le moteur de rendu.
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
Nous avons besoin de BoxGeometry pour créer le cube. Cet objet contient tous les points (sommets) et remplissages (faces) du cube. Nous en discuterons plus tard.
var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5;
Si vous copiez le code ci-dessus dans le fichier HTML, rien ne s'affichera à l'écran. Parce que nous n'avons pas encore rendu la scène. Nous devons donc appeler le moteur de rendu ou la boucle d'animation.
Cela crée une boucle dans laquelle le moteur de rendu dessine une image chaque seconde. Si vous ne savez pas grand chose en programmation de jeux Web, vous pourriez dire « Pourquoi ne pas écrire une fonction setInterval ? En fait, nous le pouvons, mais requestAnimationFrame présente plus d'avantages. L'avantage le plus important est que requestAnimationFrame interrompt le rendu lorsque le navigateur passe à un autre onglet, afin que la précieuse puissance de traitement et la durée de vie de la batterie ne soient pas gaspillées.
function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); } animate();
Si vous insérez le code que nous venons de créer, vous devriez voir un cube vert. Laissez-le tourner pour ne pas devenir ennuyeux.
cube.rotation.x += 0.01; cube.rotation.y += 0.01;
它会按帧运行(每秒60帧),并赋予立方体优雅的动画。基本上,应用运行时,你想移动或改变任何元素,必须通过动画循环。你当然在此处能调用其他函数,以免animate函数上百行代码结尾。
结果
恭喜!你现在创建好了第一个 three.js 应用。很简单,但总得突破。
完整代码参考如下。琢磨一下并深刻理解其工作机理
<html> <head> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="js/three.js"></script> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var animate = function () { requestAnimationFrame( animate ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; animate(); </script> </body> </html>
相关推荐:
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!