Maison > Article > interface Web > Exemples pour expliquer le chargement du modèle obj de three.js

Exemples pour expliquer le chargement du modèle obj de three.js

小云云original: 2017-12-22 11:30:046261parcourir

L'exemple principal de cet article présente le chargement du modèle obj par three.js 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. D'accord, laissez-moi vous présenter le modèle obj de chargement de three.js via un morceau de code. Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="libs/three.js"></script>
    <script type="text/javascript" src="libs/OBJLoader.js"></script>
    <script type="text/javascript">
      var scene = null;
      var camera = null;
      var renderer = null;
      var mesh = null;
      var id = null;
      function init() {
        renderer = new THREE.WebGLRenderer({//渲染器
          canvas: document.getElementById('mainCanvas')//画布
        });
        renderer.setClearColor(0x000000);//画布颜色
        scene = new THREE.Scene();//创建场景
        camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);//正交投影照相机
        camera.position.set(15, 25, 25);//相机位置
        camera.lookAt(new THREE.Vector3(0, 2, 0));//lookAt()设置相机所看的位置
        scene.add(camera);//把相机添加到场景中
        var loader = new THREE.OBJLoader();//在init函数中，创建loader变量，用于导入模型
        loader.load('libs/port.obj', function(obj) {//第一个表示模型路径，第二个表示完成导入后的回调函数，一般我们需要在这个回调函数中将导入的模型添加到场景中
          obj.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
              child.material.side = THREE.DoubleSide;
            }
          });
          mesh = obj;//储存到全局变量中
          scene.add(obj);//将导入的模型添加到场景中
        });
        var light = new THREE.DirectionalLight(0xffffff);//光源颜色
        light.position.set(20, 10, 5);//光源位置
        scene.add(light);//光源添加到场景中
        id = setInterval(draw, 20);//每隔20s重绘一次
      }
      function draw() {//们在重绘函数中让茶壶旋转：
        renderer.render(scene, camera);//调用WebGLRenderer的render函数刷新场景
        mesh.rotation.y += 0.01;//添加动画
        if (mesh.rotation.y > Math.PI * 2) {
          mesh.rotation.y -= Math.PI * 2;
        }
      }
    </script>
  </head>
  <body onload="init()">
    <canvas id="mainCanvas" width="800px" height="600px" ></canvas>
  </body>
</html>

Voyons comment utiliser Three.js pour. charger les fichiers obj et mtl

OBJ et MTL sont les fichiers de modèle géométrique et les fichiers de matériaux du modèle 3D.

Dans la dernière version de three.js (r78), la classe OBJMTLLoader précédente est obsolète.

Maintenant, pour charger des fichiers OBJ et MTL, vous devez combiner les deux classes OBJLoader et MTLLoader pour y parvenir, ce qui offre également une flexibilité opérationnelle.

Dans le code suivant, MTLLoader est d'abord utilisé pour charger le fichier de matériau egg.mtl, puis le matériau est défini sur un objet OBJLoader afin qu'il puisse être appliqué lors du chargement du modèle obj.

onProgress est la fonction de rappel du processus de chargement et onError est la fonction de gestion des erreurs.

// model
var onProgress = function(xhr) {
  if (xhr.lengthComputable) {
    var percentComplete = xhr.loaded / xhr.total * 100;
    console.log(Math.round(percentComplete, 2) + '% downloaded');
  }
};
var onError = function(xhr) {};
THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('/uploads/160601/obj/');
mtlLoader.load('egg.mtl', function(materials) {
  materials.preload();
  var objLoader = new THREE.OBJLoader();
  objLoader.setMaterials(materials);
  objLoader.setPath('/uploads/160601/obj/');
  objLoader.load('egg.obj', function(object) {
    object.position.y = -0.5;
    scene.add(object);
  }, onProgress, onError);
});

Recommandations associées :

Un exemple de la façon dont Three.js charge des modèles externes

Explication détaillée de la façon d'exécuter trois .js localement

Bibliothèque JS Three.js introduction de base

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：

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

Article précédent：Exemples pour expliquer le chargement de modèles externes par Three.jsArticle suivant：Exemples pour expliquer le chargement de modèles externes par Three.js

Articles Liés

Voir plus