While using ASP.Net core, I encountered an issue with loading a 3D model using the Three.js library. The error message "ERR_NAME_NOT_RESOLVED" appears when trying to load the scene. You can view the code in my VS View here. This code works perfectly in VS CODE but fails to load in my ASP.NET Core APP. You can check out my VS project here.
Here is an excerpt from 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();
}
}
}
Below is the code snippet from the View used 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>