我无法让我的代码正常工作,无法通过THREE.js和OBJLoader2来显示3D模型

时间:2019-08-19 10:47:49

标签: html three.js

我目前正在运行一个项目,要求我使用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三*。材质:“地图”参数未定义。

0 个答案:

没有答案