浏览器中加载 3d 模型时的 Three.js 问题

Question

Im using ASP.Net core.我使用 ASP.Net 核心。 I build a web api and use Three.js library but when try to load the scane it says to me ERR_NAME_NOT_RESOLVED snapInBrowser this is my code in VS View .我构建了一个 web api 并使用 Three.js 库，但是当尝试加载扫描时，它对我说 ERR_NAME_NOT_RESOLVED snapInBrowser这是我在 VS View 中的代码。 It works in VS CODE but can load in my asp.net COre APP VS project .它适用于 VS CODE，但可以加载到我的 asp.net Core APP VS 项目中。

My Controller我的控制器

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 });
        }

//The action used for the View //用于View的动作

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

My View that i use to render the model.我用来渲染模型的视图。

<!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>

Answer 1

Your speculation of "I think the problem is in the path that I give" is likely correct.您对“我认为问题出在我给出的路径上”的猜测可能是正确的。 Without seeing the 'Startup.cs' file in the root of your 'PetStore.Web' project it's likely ASP.NET Core doesn't recognize the path to the model file.如果没有在“PetStore.Web”项目的根目录中看到“Startup.cs”文件，则 ASP.NET Core 可能无法识别模型文件的路径。

A 404 response for a static file in ASP.NET Core can be caused by one or both of the following: ASP.NET Core 中静态文件的404响应可能由以下一种或两种情况引起：

Your app is serving static files outside of the project's web root directory.您的应用程序在项目的 Web 根目录之外提供静态文件。
ASP.NET Core doesn't recognize the file content type of the requested static file. ASP.NET Core 无法识别请求的静态文件的文件内容类型。

Even if you store your model files within the web root directory your web app still needs to map the model file extensions (.glb, .gltf) to their IANA registered MIME content types ("model/gltf+binary", "model/gltf+json") so that ASP.NET Core can serve them to a client.即使您将模型文件存储在 Web 根目录中，您的 Web 应用程序仍然需要将模型文件扩展名（.glb、.gltf）映射到其IANA 注册的MIME 内容类型（“model/gltf+binary”、“model/gltf” +json") 以便 ASP.NET Core 可以将它们提供给客户端。

Add the following 'model file extension to MIME content type' mappings to the Configure method in the Startup.cs file of your 'PetStore.Web' project.将以下“模型文件扩展名到 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
    });
 }

Based on the folder structure of the image you linked to at the beginning of your question you can replace the paths in the above code sample to the following:根据您在问题开头链接到的图像的文件夹结构，您可以将上述代码示例中的路径替换为以下内容：

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

Now the request to the static model file by three.js should work:现在， three.js对静态模型文件的three.js应该可以工作了：

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

浏览器中加载 3d 模型时的 Three.js 问题

问题描述

1 个解决方案

解决方案1
1 2020-03-23 22:42:55

浏览器中加载 3d 模型时的 Three.js 问题

问题描述

1 个解决方案

解决方案1 1 2020-03-23 22:42:55

解决方案1
1 2020-03-23 22:42:55