1

three.js と Web GL は初めてです。次のコードでは、ジオメトリを構築し、ジオメトリに画像を重ねようとしています。これを行うと、次のエラーが表示されます。

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

そしてコード:

var scene, camera, renderer, geometry, material, shape, particles, particlesMaterial, depthMap, depthMapDimensions, 
        particleSystem, particleCount, imageDimensions, vertextSpacing;

        imageDimensions = {
            width : 1080,
            height : 1080
        };

        depthMapDimensions = {
            width : 20,
            height : 20
        };

        vertextSpacing = {
            x : imageDimensions.width / depthMapDimensions.width,
            y : imageDimensions.height / depthMapDimensions.height
        }

        depthMap = [2.127567, 2.626095, 3.093391, 5.806643, 7.000000, 6.998367, 4.582537, 1.649688, 2.281374, 1.367736, 3.042042, 8.414231, 8.999998, 8.999999, 8.999998, 8.999999, 8.873376, 7.543515, 7.000446, 6.999999, 2.616741, 2.901183, 2.704453, 5.539745, 6.998835, 6.999611, 6.730113, 5.143857, 3.738796, 2.599236, 3.070265, 8.415504, 9.000000, 9.000000, 9.000000, 8.987292, 8.144215, 7.080783, 7.000000, 6.999999, 2.663667, 2.417611, 2.113292, 4.201475, 6.785589, 6.592422, 5.734896, 4.422761, 3.342103, 2.709703, 2.897975, 8.191135, 9.000000, 9.000000, 9.000000, 8.976017, 7.754744, 7.000002, 6.999999, 6.999999, 2.023745, 2.015293, 2.007580, 3.036786, 4.601620, 3.687377, 3.171844, 3.029730, 3.013251, 2.440641, 2.630903, 8.123555, 9.000000, 9.000000, 9.000000, 8.977840, 7.747422, 7.000000, 7.000000, 6.999999, 1.628098, 1.203436, 1.186097, 1.708180, 2.342594, 2.146624, 2.423483, 2.622567, 2.313046, 1.987591, 2.469096, 8.158025, 9.000000, 9.000000, 9.000000, 8.981831, 7.786616, 7.000000, 6.999999, 6.999999, -0.555659, -0.880668, -0.871480, -0.838492, -0.810392, -1.485775, -0.342942, 0.946382, 0.690366, 1.233515, 1.941243, 7.756371, 9.000000, 9.000000, 9.000000, 8.990389, 7.852441, 7.000000, 7.000000, 6.999999, -1.000000, -1.000000, -0.984316, -0.691079, -0.629077, -2.186010, -0.970196, 0.342872, 0.424878, 0.932589, 2.874258, 8.296001, 9.000000, 9.000000, 9.000000, 8.995690, 7.908023, 7.000005, 6.999999, 6.999999, -0.851585, -1.121474, -1.036169, 0.164867, 0.423980, -0.812104, -0.406743, 0.398304, 0.919763, 1.004518, 4.300021, 8.948308, 9.000000, 9.000000, 9.000000, 8.999194, 7.979087, 7.000435, 7.000000, 6.999999, -0.244019, -1.266773, -1.911372, -1.899194, -1.918406, -1.882335, -0.138694, 0.924173, 1.047134, 1.704133, 5.677461, 8.978599, 9.000000, 9.000000, 9.000000, 8.997765, 7.952168, 7.000490, 6.999999, 6.999999, -0.002295, -0.229373, -0.890307, -1.492303, -1.971603, -2.409527, -0.669644, 0.903183, 1.618998, 3.833140, 8.231560, 8.999952, 9.000000, 9.000000, 9.000000, 8.998553, 7.963422, 7.000403, 7.000000, 6.999999, 0.259623, 0.308825, 0.188026, -0.288844, -0.765398, -1.169663, -0.185390, 1.163299, 2.354378, 4.205532, 7.644516, 8.601805, 8.977304, 9.000000, 9.000000, 8.938294, 7.788084, 7.000249, 6.999999, 6.999999, 0.958028, 0.975304, 0.817023, 0.426733, 0.410694, 0.412157, 1.020823, 2.024281, 2.798701, 4.603123, 6.847786, 7.108493, 7.883547, 7.851915, 8.190980, 7.904086, 7.127523, 7.000080, 7.000000, 6.999999, 1.126147, 1.019150, 0.943917, 0.347039, 0.309151, 0.348898, 1.676575, 2.808274, 4.393281, 6.567654, 6.782535, 5.570826, 5.230399, 5.367241, 6.704737, 7.009059, 7.000690, 7.000002, 6.999999, 6.999999, 3.700892, 1.894742, 1.858719, 1.560115, 0.479706, 0.918191, 4.307354, 5.558891, 6.654403, 6.819664, 5.722251, 5.044959, 5.000000, 5.136653, 6.524189, 7.000000, 7.000000, 7.000000, 7.000000, 6.999999, 4.999616, 4.528327, 5.008296, 4.469171, 0.833706, 1.666193, 5.676921, 6.513674, 6.752453, 6.034523, 5.133774, 5.045851, 5.095105, 5.081395, 6.348025, 7.001901, 6.999999, 7.000000, 6.999999, 6.999999, 5.000000, 5.119382, 5.744474, 4.393946, 0.647267, 1.866858, 5.754084, 6.057019, 5.982171, 5.704051, 5.334934, 5.104724, 5.144377, 5.267979, 6.279684, 7.000135, 7.000000, 6.998665, 6.994687, 6.996591, 4.995393, 4.989268, 4.217751, 2.684558, 0.678229, 2.151997, 5.188607, 5.143293, 5.249653, 5.211581, 5.000000, 5.017254, 5.035619, 5.118769, 6.484150, 6.999919, 6.999999, 6.997725, 6.896475, 6.618106, 4.244583, 3.497095, 3.031803, 2.604051, 1.002629, 1.250600, 3.062681, 3.108018, 3.347652, 4.717236, 4.997857, 4.930811, 4.960470, 5.011927, 5.990526, 6.658366, 6.901021, 6.993680, 6.989233, 6.869072, 3.050878, 3.002264, 3.010682, 2.679759, 1.475260, 1.682000, 3.150505, 3.224762, 3.313409, 4.203482, 4.545135, 4.273145, 4.097577, 4.095634, 4.393558, 4.623382, 5.105378, 5.485256, 5.467518, 5.375812, 2.999999, 3.000000, 3.003595, 2.763143, 1.400769, 1.764386, 3.081679, 3.169889, 3.156426, 3.148278, 3.173652, 3.269066, 3.103685, 3.032829, 3.057311, 3.104075, 3.336546, 3.577827, 3.570257, 3.524523];

        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 1000);
        renderer = new THREE.WebGLRenderer();
        geometry = new THREE.Geometry();


        console.log(geometry.vertices);


        //geometry.computeBoundingSphere();

        material = new THREE.MeshBasicMaterial({
            color: 0xFF0000, 
            map : THREE.ImageUtils.loadTexture('IMG_0011-stk_00.jpg'),   
            wireframe : true
        });
        particleMaterials = new THREE.ParticleBasicMaterial({
            color: 0xFFFFFF,
            size: 10,
            transparent: true
        });

        //draw verticies
        for(var i = 0; i < depthMap.length; i++){
            var x, y, z, row, column;

            row = Math.ceil((i + 1) / depthMapDimensions.width);
            column = (i + 1) - (depthMapDimensions.width * (row - 1));

            //The x value of each vertex is a function of the width of the image 
            x = column;// vertextSpacing.x;
            //The y value of each vertex is a function of its calculated row;
            y = row * -1;// * vertextSpacing.y;
            //The depth of each vertex is the value from the depth map
            z = depthMap[i] * -1;  

            geometry.vertices.push(new THREE.Vector3(x, y, z));  

            //console.log(x,y,z);
        }

        //drawFaces
        var lastVertex = 0, j = 0;
        while(lastVertex  < (depthMap.length - 1)){

            if((j+1) % depthMapDimensions.width !== 0){
                //console.log(j, j + 1, j + depthMapDimensions.width, j + depthMapDimensions.width + 1 );
                geometry.faces.push( new THREE.Face4( j, j + depthMapDimensions.width, j + depthMapDimensions.width + 1, j + 1 ) );
                lastVertex = j + depthMapDimensions.width + 1;
            }
            j++;
        }

        shape = new THREE.Mesh(geometry, material);
        shape.doubleSided = true;
        shape.overdraw = true;

        scene.add(shape);

        camera.position.z = 30;
        renderer.setClearColorHex(0x00000, 1);
        renderer.setSize( window.innerWidth, window.innerHeight);

        renderer.render(scene, camera);

        document.body.appendChild(renderer.domElement);
        (function render () {
            //shape.rotation.x += .01;
            //shape.rotation.y += .01;

            //renderer.render(scene, camera);

            requestAnimationFrame(render);
        })();

これは、「buffersNeedUpdate」と「uvsNeedUpdate」を true に設定することに関係している可能性があることは理解していますが、どこでこれを行う必要があるかわかりません。よろしくお願いします!

4

1 に答える 1

1
  1. faceVertexUvsマテリアルに を追加する場合は、カスタム ジオメトリで指定する必要がありますmapPlaneGeometryそれらを追加する方法を参照してください。

  2. mesh.doubleSidedに置き換えられましたmaterial.side = THREE.DoubleSide。必ず公式の three.js の例から学び、ネットからの古い例は避けてください。

  3. 非平面クワッドは危険です。詳細については、PlaneGeometry とディレクショナル ライトを参照してください。

three.js r.59

于 2013-08-14T18:59:15.700 に答える