使用 Three.js 在形状上显示图像时出错

Question

我正在尝试使用 three.js r71 在多面体的每个面上显示图像。我正在通过加载 JSON 文件来制作几何图形，该文件包含定义形状的数据。我也在多面体下方设置了一个平面。我收到一个错误，我想知道这意味着什么或我做错了什么。这是我在 JavaScript 控制台中收到的错误消息：

[.WebGLRenderingContext-0888D200]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

WebGL: too many errors, no more errors will be reported to the console for this context.

这里是 JavaScript 代码：

var four;

var meshFour;

var scene = new THREE.Scene();

function init() {
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;
    var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
    var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.receiveShadow = true;
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.x = 0;
    plane.position.y = 0;
    plane.position.z = 0;

    //LOADING GEOMETRY
    var loaderFour = new THREE.JSONLoader();
    var materialsArray = [];
    materialsArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("./resources/images/IPT.PNG")}));
    materialsArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("./resources/images/Alerts.png")}));
    materialsArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("./resources/images/action-item-tracking.png")}));
    materialsArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("./resources/images/admin.png")}));
    
    for(var i = 0; i <= 3; i++) {
        materialsArray[i].map.minFilter = THREE.LinearFilter;
    }
    loaderFour.load("./resources/json/tetrahedron-try.json", function (model) {

        var materialFour = new THREE.MeshFaceMaterial(materialsArray);

        four = new THREE.Mesh(model, materialFour);//issue according to three.js
        four.translateY(1);
        four.scale = new THREE.Vector3(3, 3, 3);
        meshFour = THREE.SceneUtils.createMultiMaterialObject(four, materialFour);
        scene.add(four);
    });

    camera.position.x = 20;
    camera.position.y = 20;
    camera.position.z = 20;
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    
    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-40, 60, 10);
    spotLight.castShadow = true;
    scene.add(spotLight);
    scene.add(plane);


    document.getElementById("WebGL-output").appendChild(renderer.domElement);

    render();
    
    function render() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    
}

window.onload = init();

JSON 文件代码在这里：

{
    "metadata": {
        "type": "Geometry",
        "vertices": 4,
        "uvs": 1,
        "faces": 4,
        "generator": "io_three",
        "version": 3,
        "normals": 4
    },
    "uvs": [[0.250046,0.433025,0.749954,0.433025,0.5,0.865958,0.999907,0.865957,9.3e-05,0.865957,0.5,9.3e-05]],
    "faces": [40,0,1,2,0,1,2,0,1,2,40,3,2,1,3,2,1,3,2,1,40,3,0,2,4,0,2,3,0,2,40,3,1,0,5,1,0,3,1,0],
    "normals": [-0.471389,-0.333323,0.816492,-0.471389,-0.333323,-0.816492,0.942808,-0.333323,0,0,1,0],
    "vertices": [-2.42416,0,4.19877,-2.42416,-0,-4.19877,4.84832,0,-0,-0,6.85655,-0],
    "name": "Tetrahedron.001Geometry.3"
}

Answer 1

我也遇到了同样的问题，不过跟71版有点关系。这个问题在更不错的第 72 版中得到了解决，尽管它仍未发布。在这里查看：https://github.com/mrdoob/three.js/issues/6774.

你可以找到第72个版本here。

Answer 2

在你的 json 文件中你有 "uvs": 1 这与我得到的图像一致：

因此根据 uv，您仅将一种纹理应用于两个面。所以问题又出在您的模型创建方法上。

这是我的 fiddle (http://jsfiddle.net/dfnkhbjm/) 版本，是的，由于 Access-Control-Allow-Origin 问题，它不起作用。如果你把它复制到本地，它应该可以工作。

使用 Three.js 在形状上显示图像时出错

Error involved in displaying images on a shape using Three.js

javascript

json

blender

three.js