CODEWITHSUNDEEP
javascriptc#asp.netasp.net-corethree.js
Николай Дойчев
Николай Дойчев

Reputation: 51

three.js problem in loading 3d model in browser

Im using ASP.Net core. 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 . It works in VS CODE but can load in my asp.net COre APP VS project .

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

        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>

Upvotes: 3

Views: 1922

Answers (1)

Dave B
Dave B

Reputation: 1800

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.

A 404 response for a static file in ASP.NET Core can be caused by one or both of the following:

  1. Your app is serving static files outside of the project's web root directory.
  2. ASP.NET Core doesn't recognize the file content type of the requested static file.

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.

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.

 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:

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

Upvotes: 3

Related Questions