我想在网站上展示具有完美渲染效果的3D模型。 它没有找到mtl和obj的路径。 我正在用visual studio for web编写一个程序,并希望在主页的网站上。 mtl和obj位于名为models的文件夹中。
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default10.aspx.vb" Inherits="Default10" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/OBJLoader.js"></script>
<script src="js/ObjectLoader.js"></script>
<script src="js/MTLLoader.js"></script>
<script src="js/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', function () {
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
// 화면 비율(aspect ratio)을 나타냅니다. (넓이를 높이로 나눈 값)
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
// 스크롤
controls = new THREE.OrbitControls(camera, renderer.domElement);
/*
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('models/');
mtlLoader.load('mi.mtl', function (materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('models/');
objLoader.load('mi.obj', function (object) {
object.position.y = -95;
scene.add(object);
});
});/**/
var loader = new THREE.OBJLoader();
var objpath = 'models/mi.obj';
loader.load(objpath, function (object) {
loadMats(object, objpath);
},
function (eve) { console.log("obj progress", eve) },
function (xhr) { console.log("obj error", e) }
);
var loadMats = function (obj, objpath) {
imgloader = new THREE.MTLLoader();
imgloader.setPath(objpath.substring(0, objpath.lastIndexOf("/") + 1));
imgloader.load(obj.materialLibraries[0],
function (materials) {
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load(objpath, function (object) {
scene.add(object);
},
function (eve) { console.log("obj progress", eve) },
function (xhr) { console.log("obj error", e) }
);
},
function (eve) { console.log("mtl progress", eve) },
function (xhr) { console.log("mtl error", e) }
);
}
//
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 3;
var ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.8);
scene.add(ambientLight);
// game logic
var update = function () {
// cube.rotation.x += 0.01;
// cube.rotation.y += 0.005;
};
//draw Scene
var render = function () {
renderer.render(scene, camera);
};
// run game loop (update, render, repeat)
var GameLoop = function () {
requestAnimationFrame(GameLoop);
update();
render();
};
GameLoop();
</script>
</asp:Content>