我目前正在运行一个项目,要求我使用three.js和OBJLoader / MTLLoader将3D模型放到网站上。
我已将所需文件放置在桌面上的文件夹中,并从那里开始工作。
我已经为控件添加了Orbital Controls,为我的.obj文件提供了OBJLoader2,为我的.mtl文件提供了MTLLoader,并继续进行代码,但是它似乎对我不起作用。
我试图通过替换路径并将其放置在FTP上来解决此问题,但是THREE.js似乎不支持它。我也尝试过更改代码,但似乎什么也没有出现。
init();
function init(){
// Create your main scene
var scene = new THREE.Scene();
// Create your main camera & Set up the main camera
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 100;
camera.position.x = 400;
camera.position.y = 150;
//var geometry = new THREE.Geometry();
// Create lights
var light = new THREE.PointLight(0xEEEEEE);
light.position.set(20, 0, 20);
scene.add(light);
var lightAmb = new THREE.AmbientLight(0x777777);
scene.add(lightAmb);
// Create your renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Load the background texture
var backgroundMesh = new THREE.Mesh(
new THREE.PlaneGeometry(10, 10, 10, 10),
new THREE.MeshBasicMaterial({
map: modelMesh()
})
);
backgroundMesh.material.depthTest = false;
backgroundMesh.material.depthWrite = true;
// Create your background scene
var backgroundScene = new THREE.Scene();
var backgroundCamera = new THREE.Camera();
backgroundScene.add(backgroundCamera );
backgroundScene.add(backgroundMesh );
function modelMesh() {
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('C:\Users\Admin\Desktop\AUG 15\mesh.mtl');
mtlLoader.load('mesh.mtl', function (materials) {
materials.preload();
var objLoader = new THREE.OBJLoader2();
objLoader.setMaterials(materials);
objLoader.setPath('C:\Users\Admin\Desktop\AUG 15\dec.obj');
objLoader.load('dec.obj', function (object) {
object.position.x = 0;
object.position.y = -40;
object.position.z = 0;
object.scale.set(1,1,1);
scene.add(object);
});
});
};
当我启动Index.html时,我希望输出是网页上的3D模型,但是我总是收到错误消息
CORS和three.js:8620三*。材质:“地图”参数未定义。