three.js 在浏览器中加载 3d 模型的问题答案

【问题标题】：three.js problem in loading 3d model in browserthree.js 在浏览器中加载 3d 模型的问题
【发布时间】：2020-05-17 04:55:41
【问题描述】：

我正在使用 ASP.Net 核心。我构建了一个 web api 并使用 Three.js 库，但是当尝试加载扫描时它告诉我 ERR_NAME_NOT_RESOLVED snapInBrowser 这是我在 VS View 中的代码。它可以在 VS CODE 中运行，但可以在我的 asp.net COre APP VS project 中加载。

我的控制器

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using PetStore.Web.Models;

namespace PetStore.Web.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Privacy()
        {
            return View();
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }

//视图使用的动作

        public IActionResult TestView()
        {
            return View();
        }
    }
}

我用来渲染模型的我的视图。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>3D model </title>
</head>

<body>
*//Js Libraries*
    <script src="~/js/three.js"></script>
    <script src="~/js/GLTFLoader.js"></script>
    <script src="~/js/OrbitControls.js"></script>

    <div class="container">
        <script>
            // JavaScript Document

            var scene = new THREE.Scene();
            scene.background = new THREE.Color(0xdddddd);
*//Position the camera for the view*
            var camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 5000);
            camera.rotation.y = 45 / 180 * Math.PI;
            camera.position.x = 800;
            camera.position.y = 100;
            camera.position.z = 1000;

*//Render the model using WebGl*
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

*//Add rotation for the model*
            let controls = new THREE.OrbitControls(camera, renderer.domElement);
*//Add light to the scene*
            var hlight = new THREE.AmbientLight(0x404040, 100);
            scene.add(hlight);
            directionalLight = new THREE.DirectionalLight(0xffffff, 100);
            directionalLight.position.set(0, 1, 0);
            directionalLight.castShadow = true;
            scene.add(directionalLight);
            light = new THREE.PointLight(0xc4c4c4, 10);
            light.position.set(0, 300, 500);
            scene.add(light);
            light2 = new THREE.PointLight(0xc4c4c4, 10);
            light2.position.set(500, 100, 0);
            scene.add(light2);
            light3 = new THREE.PointLight(0xc4c4c4, 10);
            light3.position.set(0, 100, -500);
            scene.add(light3);
            light4 = new THREE.PointLight(0xc4c4c4, 10);
            light4.position.set(-500, 300, 500);
            scene.add(light4);

*//Load the Model*
            let loader = new THREE.GLTFLoader();
            loader.load('../drawings/Fireplace/scene.gltf', function (gltf) {
                car = gltf.scene.children[0];
                car.scale.set(0.5, 0.5, 0.5);
                scene.add(gltf.scene);
                animate();
            });
            function animate() {
                requestAnimationFrame(animate);
                renderer.render(scene, camera);
            }
            animate();
        </script>
    </div>

</body>
</html>

【问题讨论】：

给你看完整的代码来重现问题以及为什么使用web api？我创建了一个mvc项目并成功创建了一个场景threejs.org/docs/#manual/en/introduction/Creating-a-scene
我认为问题出在我给出的路径上。但不确定

标签： javascript c# asp.net asp.net-core three.js

【解决方案1】：

您对“我认为问题出在我给出的路径上”的推测可能是正确的。如果在“PetStore.Web”项目的根目录中没有看到“Startup.cs”文件，很可能 ASP.NET Core 无法识别模型文件的路径。

ASP.NET Core 中静态文件的404 响应可能由以下一种或两种原因引起：

您的应用位于项目 Web 根目录的 serving static files outside。
ASP.NET Core 无法识别请求的file content type 静态文件。

即使您将模型文件存储在 Web 根目录中，您的 Web 应用程序仍然需要将模型文件扩展名（.glb、.gltf）映射到它们的IANA registered MIME 内容类型（“model/gltf+binary”， "model/gltf+json") 以便 ASP.NET Core 可以将它们提供给客户端。

将以下“模型文件扩展名到 MIME 内容类型”映射添加到“PetStore.Web”项目的 Startup.cs 文件中的 Configure 方法。

 public void Configure(IApplicationBuilder app)
 {
     app.UseStaticFiles(); // For the wwwroot folder

     // ADD the following...

     // Set up custom content types - associating file extension to MIME type
     // Bring in the following 'using' statement:
     // using Microsoft.AspNetCore.StaticFiles;
     FileExtensionContentTypeProvider provider = new FileExtensionContentTypeProvider();

     // The MIME type for .GLB and .GLTF files are registered with IANA under the 'model' heading
     // https://www.iana.org/assignments/media-types/media-types.xhtml#model
     provider.Mappings[".glb"] = "model/gltf+binary";
     provider.Mappings[".gltf"] = "model/gltf+json";

     app.UseStaticFiles(new StaticFileOptions
     {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(Directory.GetCurrentDirectory(), "StaticFiles")),
        RequestPath = "/StaticFiles",
        ContentTypeProvider = provider
    });
 }

根据您在问题开头链接到的图像的文件夹结构，您可以将上述代码示例中的路径替换为以下内容：

FileProvider = new PhysicalFileProvider(
    Path.Combine(Directory.GetCurrentDirectory(), "Scanes/Fireplace")),
RequestPath = "/Scanes/Fireplace",

现在three.js 对静态模型文件的请求应该可以工作了：

loader.load('/Scanes/Fireplace/scene.gltf', function (gltf) {

【讨论】：

这是我找到的最简洁最好的答案。但是，如果是生产版本，则需要添加不同的路径，而开发版本具有不同的路径。因此，最好添加预处理器指令或条件。