我使用 ASP.Net 核心。我构建了一个 Web API 并使用 Three.js 库，但是当尝试加载扫描时，它告诉我ERR_NAME_NOT_RESOLVED snapInBrowser这是我在VS视图中的代码。它可以在 VS CODE 中工作，但可以在我的 asp.net CORE APP VS 项目中加载。
我的控制器
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>
你对"我认为问题出在我给出的路径上"的猜测可能是正确的。如果在"PetStore.Web"项目的根目录中看不到"Startup.cs"文件，则 Core 可能无法识别模型文件的路径 ASP.NET
ASP.NET Core 中静态文件的404响应可能是由以下一种或两种原因引起的：
- 您的应用在项目的 Web 根目录之外提供静态文件。
- ASP.NET Core 无法识别所请求的文件内容类型 静态文件。
即使您将模型文件存储在 Web 根目录中，您的 Web 应用程序仍然需要将模型文件扩展名(.glb、.gltf(映射到其 IANA 注册的 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) {