2017-10-31 1 views
0

完全レンダリングの3DモデルをWebサイトで表示したいと思います。 mtlとobjのパスが見つかりません。 私はビジュアルスタジオでウェブ用のプログラムを作成しており、マスターページでウェブサイトにいたいと考えています。 mtlとobjはmodelsという名前のフォルダにあります。objファイルとmtilファイルのパス

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default10.aspx.vb" Inherits="Default10" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
    <script src="js/three.js"></script> 
     <script src="js/OrbitControls.js"></script> 
     <script src="js/OBJLoader.js"></script> 
     <script src="js/ObjectLoader.js"></script> 
     <script src="js/MTLLoader.js"></script> 
     <script src="js/three.min.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); 

      window.addEventListener('resize', function() { 
       var width = window.innerWidth; 
       var height = window.innerHeight; 
       renderer.setSize(width, height); 
       // 화면 비율(aspect ratio)을 나타냅니다. (넓이를 높이로 나눈 값) 
       camera.aspect = width/height; 
       camera.updateProjectionMatrix(); 
      }); 

      // 스크롤 
      controls = new THREE.OrbitControls(camera, renderer.domElement); 

      /* 
      var mtlLoader = new THREE.MTLLoader(); 
      mtlLoader.setPath('models/'); 
      mtlLoader.load('mi.mtl', function (materials) { 
       materials.preload(); 

       var objLoader = new THREE.OBJLoader(); 
       objLoader.setMaterials(materials); 
       objLoader.setPath('models/'); 
       objLoader.load('mi.obj', function (object) { 
        object.position.y = -95; 
        scene.add(object); 
       }); 
      });/**/ 
      var loader = new THREE.OBJLoader(); 
      var objpath = 'models/mi.obj'; 

      loader.load(objpath, function (object) { 
       loadMats(object, objpath); 
      }, 
      function (eve) { console.log("obj progress", eve) }, 
      function (xhr) { console.log("obj error", e) } 
      ); 
      var loadMats = function (obj, objpath) { 
       imgloader = new THREE.MTLLoader(); 
       imgloader.setPath(objpath.substring(0, objpath.lastIndexOf("/") + 1)); 
       imgloader.load(obj.materialLibraries[0], 
        function (materials) { 
         var objLoader = new THREE.OBJLoader(); 
         objLoader.setMaterials(materials); 
         objLoader.load(objpath, function (object) { 
          scene.add(object); 
         }, 
          function (eve) { console.log("obj progress", eve) }, 
          function (xhr) { console.log("obj error", e) } 
         ); 
        }, 
        function (eve) { console.log("mtl progress", eve) }, 
        function (xhr) { console.log("mtl error", e) } 
       ); 
      } 
      // 
      renderer = new THREE.WebGLRenderer(); 
      renderer.setPixelRatio(window.devicePixelRatio); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement); 

       camera.position.z = 3; 

       var ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.8); 
       scene.add(ambientLight); 

       // game logic 
       var update = function() { 
        // cube.rotation.x += 0.01; 
        // cube.rotation.y += 0.005; 
       }; 

       //draw Scene 
       var render = function() { 
        renderer.render(scene, camera); 
       }; 

       // run game loop (update, render, repeat) 
       var GameLoop = function() { 
        requestAnimationFrame(GameLoop); 

        update(); 
        render(); 
       }; 

       GameLoop(); 
     </script> 
</asp:Content> 
+0

これは複製です。私はこのコードを書いて、ここで警告を説明しました:https://stackoverflow.com/questions/43122400/is-there-a-way-to-load-a-mtl-using-the-path-in-the-obj-ファイル/ 43143457#43143457 – Radio

+4

[可能なobjファイルのパスを使用してmtlを読み込む方法はありますか?](https://stackoverflow.com/questions/43122400/is-there-a-way-to- load-a-mtl-of-the-obj-fileを使用して) – Radio

答えて

0

.objと.mtl拡張子にmimeタイプを追加する必要があります。 Web.configファイルで :

<configuration> 
    <system.webServer> 
    <staticContent> 
     <mimeMap fileExtension=".obj" mimeType="text/plain" /> 
     <mimeMap fileExtension=".mtl" mimeType="text/plain" /> 
    </staticContent> 
    </system.webServer> 
</configuration> 

あなたがホスティングを使用している場合は、あまりにも、ASP.NET設定からそれを変更することができます。 それが動作しない場合は、これも試してください。たぶん、あなたは前に

<configuration> 
    <system.webServer> 
    <staticContent> 
     <remove fileExtension=".obj" /> 
     <mimeMap fileExtension=".obj" mimeType="text/plain" /> 
     <remove fileExtension=".mtl" /> 
     <mimeMap fileExtension=".mtl" mimeType="text/plain" /> 
    </staticContent> 
    </system.webServer> 
</configuration> 

の.objファイルのMIMEタイプがtext/plainのarn't場合mimeMap

を追加するには、グローバル設定を削除する必要があります。グローバル設定を削除して使用するかどうかにかかわらず、

<configuration> 
    <system.webServer> 
    <staticContent> 
     <mimeMap fileExtension=".obj" mimeType="application/wavefront-obj" /> 
     <mimeMap fileExtension=".mtl" mimeType="application/wavefront-obj" /> 
    </staticContent> 
    </system.webServer> 
</configuration> 
関連する問題