升级三.js后我的代码不起作用

My code is not working after upgrading three.js

本文关键字:我的 代码 不起作用 js      更新时间:2023-09-26

我使用的是三个.js版本r58。下面的代码完美地显示了模型,但是在我升级到新版本的三个后.js即r73,我的模型没有渲染在调试窗口中,它显示网格存在,但在屏幕上仍然不可见如果有人能帮忙,谢谢。代码相当冗长,对此感到抱歉

法典:

    <script src="JS/three.js"></script>
    <script src="JS/TrackballControl.js"></script>
    <script src="JS/OrbitControls.js"></script>
    <script>
        var container, stats;
        var camera, controls, scene, renderer;
        var objects = [];
        var mouse = new THREE.Vector2();
        var offset;
        var ModelData;
        var OffsetData;
        var DecompressData = { decompress: function (compressed) { "use strict"; /* Build the dictionary.*/ var i, dictionary = [], w, result, k, entry = "", dictSize = 256; for (i = 0; i < 256; i += 1) { dictionary[i] = String.fromCharCode(i); } w = String.fromCharCode(compressed[0]); result = w; for (i = 1; i < compressed.length; i += 1) { k = compressed[i]; if (dictionary[k]) { entry = dictionary[k]; } else { if (k === dictSize) { entry = w + w.charAt(0); } else { return null; } } result += entry; /* Add w+entry[0] to the dictionary.*/dictionary[dictSize++] = w + entry.charAt(0); w = entry; } return result; } };
        init();
        animate();
        function init()
        {
            container = document.getElementById("container");
            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
            camera.position.z = 1000;
            controls = new THREE.TrackballControls(camera);
            controls.rotateSpeed = 1.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.8;
            controls.noZoom = false;
            controls.noPan = false;
            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;
            scene = new THREE.Scene();
            scene.add(new THREE.AmbientLight(0x555555));
            var light = new THREE.SpotLight(0xffffff, 1.5);
            light.position.set(0, 500, 2000);
            scene.add(light);
//**************************************** b_geometry **********************
            //** modedata and offset data
            ModelData = new Array();
            tempModelData = [
            [45, 48, 46, 52, 48, 54, 50, 57, 51, 55, 51, 48, 50, 261, 49, 48, 49, 44, 48, 44, 256, 46, 56, 52, 52, 49, 279, 50, 52, 55, 54, 54, 52, 57, 53, 57, 275, 257, 259, 261, 263, 265, 267, 269, 271, 273, 273, 46, 53, 50, 260, 56, 55, 270, 54, 48, 51, 54, 51, 51, 292, 258, 260, 262, 264, 266, 268, 50, 270, 272, 49, 46, 50, 55, 316, 278, 280, 282, 284, 286, 288, 290, 316, 294, 319, 297, 322, 324, 44, 326, 328, 302, 304, 306, 308, 260, 311, 313, 315, 257, 51, 328, 52, 54, 56, 49, 56, 57, 55, 360, 304, 329, 274, 276, 331, 281, 52, 283, 285, 287, 289, 291, 276, 339, 296, 321, 299, 272, 368, 257, 370, 333, 374, 336, 291, 355, 357, 359, 361, 363, 365, 346, 345, 329, 369, 279, 371, 373, 335, 376, 338, 318, 380, 298, 323, 300, 398, 330, 401, 387, 404, 337, 391, 55, 358, 360, 362, 364, 49, 366, 301, 257, 348, 359, 350, 310, 312, 314, 302, 356, 419, 393, 422, 396, 367, 413, 332, 372, 334, 375, 417, 46, 435, 420, 394, 423, 425, 412, 427, 305, 429, 309, 352, 433, 418, 449, 438, 424, 397, 327, 399, 385, 414, 443, 388, 405, 378, 407, 320, 409, 343, 274, 454, 349, 457, 432, 354, 447, 392, 421, 395, 463, 440, 478, 456, 351, 481, 406, 295, 474, 342, 411, 465, 347, 455, 307, 480, 353, 434, 484, 450, 439, 344, 498, 489, 501, 491, 503, 460, 437, 486, 452, 509, 303, 500, 430, 458, 482, 448, 515, 451, 464, 346, 400, 442, 403, 445, 377, 293, 473, 341, 382, 508, 346, 510, 521, 492, 472, 494, 536, 410, 325, 498, 529, 402, 444, 389, 493, 340, 381, 546, 426, 519, 479, 512, 433, 543, 554, 475, 300, 384, 277, 468, 531, 552, 514, 485, 526, 488, 558, 490, 431, 513, 483, 436, 572, 507, 566, 386, 469, 416, 390, 344, 44, 50, 589, 588, 315, 52, 44, 53, 44, 54, 597, 595, 44, 329, 56, 44, 291, 270, 344, 274, 605, 325, 590, 49, 315, 281, 344, 594, 612, 344, 596, 49, 598, 49, 329, 361, 344, 603, 622, 344, 291, 305, 589, 272, 50, 590, 633, 631, 589, 315, 45, 383, 301, 639, 426, 275, 640, 368, 645, 643, 642, 477, 644, 648, 647, 642, 640, 45, 51, 327, 53, 51, 56, 267, 360, 51, 259, 55, 57, 52, 69, 639, 621, 641, 657, 50, 659, 661, 50, 663, 665, 667, 669, 620, 588, 368, 673, 675, 662, 612, 679, 668, 670, 683, 275, 685, 660, 687, 664, 48, 666, 690, 682, 650, 647, 703, 643, 640, 704, 702, 705, 301, 53, 303, 53, 49, 714, 713, 50, 51, 49, 674, 364, 681, 399, 632, 46, 55, 48, 263, 51, 713, 48, 698, 285, 308, 669, 356, 595, 712, 714, 424, 719, 718, 720, 56, 722, 651, 50, 725, 727, 314, 730, 732, 54, 734, 656, 590, 711, 53, 713, 715, 741, 719, 53, 721, 639, 723, 589, 748, 728, 751, 55, 733, 49, 735, 756, 738, 760, 717, 762, 764, 627, 642, 747, 726, 769, 270, 752, 754, 736, 647, 708, 650, 791, 643, 274, 49]];
            for (i = 0; i < tempModelData.length; i++)
            {
                ModelData = ModelData.concat((DecompressData.decompress(tempModelData[i])).split(','));
            }
            OffsetData = [55, 50, 44, 51, 54, 44, 48, 44, 256, 44, 49, 54];
            OffsetData = DecompressData.decompress(OffsetData);
            OffsetData = OffsetData.split(',');
            offset = 0;
            //End of model data and offset data
            colorVal = new THREE.Color();
            colorVal.setRGB(0.749019622802734, 0.749019622802734, 0.749019622802734);
            ambientcolorVal = new THREE.Color();
            ambientcolorVal.setRGB(0.749019622802734, 0.749019622802734, 0.749019622802734);
            specularcolorVal = new THREE.Color();
            specularcolorVal.setRGB(0, 0, 0);
            material = new THREE.MeshLambertMaterial({ color: colorVal, opacity: 1, transparent: false, side: THREE.DoubleSide });
            CreateandAddObject_WithNormals(+OffsetData[0], +OffsetData[1], +OffsetData[2], +OffsetData[3], 0, +OffsetData[4], material, "Part1", "");
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setClearColor(0xffffff);
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.sortObjects = false;
            container.appendChild(renderer.domElement);
        }
        function CreateandAddObject_WithNormals(vertices, faceindices, colorindices, normals, uvindices, vmat, material, partName, parentName)
        {
            var matrixData;
            var geometry = new THREE.BufferGeometry();
            geometry.attributes = {
                position: {
                    itemSize: 3,
                    array: new Float32Array(ModelData.slice(offset, offset + vertices)),
                    numItems: vertices
                },
                index: {
                    itemSize: 1,
                    array: new Uint16Array(ModelData.slice(offset + vertices, offset + vertices + faceindices)),
                    numItems: faceindices
                },
                color: {
                    itemSize: 0,
                    array: new Float32Array(),
                    numItems: 0
                },
                normal: {
                    itemSize: 3,
                    array: new Float32Array(ModelData.slice(offset + vertices + faceindices + colorindices, offset + vertices + faceindices + colorindices + normals)),
                    numItems: normals
                },
                uv: {
                    itemSize: 0,
                    array: new Float32Array(),
                    numItems: 0
                }
            };
            if (uvindices !== 0)
            {
                geometry.attributes.uv.itemSize = 2;
                geometry.attributes.uv.array = new Float32Array(ModelData.slice(offset + vertices + faceindices + colorindices + normals, offset + vertices + faceindices + colorindices + normals + uvindices));
                geometry.attributes.uv.numItems = uvindices;
            }
            if (colorindices !== 0)
            {
                geometry.attributes.color.itemSize = 3;
                geometry.attributes.color.array = new Float32Array(ModelData.slice(offset + vertices + faceindices, offset + vertices + faceindices + colorindices));
                geometry.attributes.color.numItems = colorindices;
            }
            geometry.groups.push({
                start: 0,
                index: 0,
                count: faceindices
            });
            var mesh = new THREE.Mesh(geometry, material);
            mesh.name = partName;
            matrixData = ModelData.slice(offset + vertices + faceindices + colorindices + normals + uvindices, offset + vertices + faceindices + colorindices + normals + uvindices + vmat);
            offset = offset + vertices + faceindices + colorindices + normals + uvindices + vmat;
            VMat = new THREE.Matrix4(); VMat.set(matrixData[0], matrixData[1], matrixData[2], matrixData[3], matrixData[4], matrixData[5], matrixData[6], matrixData[7], matrixData[8], matrixData[9], matrixData[10], matrixData[11], matrixData[12], matrixData[13], matrixData[14], matrixData[15]);
            VMat = VMat.transpose();
            mesh.applyMatrix(VMat);
            scene.add(mesh);
        }
        function animate()
        {
            requestAnimationFrame(animate);
            render();
            
        }
        function render()
        {
            controls.update();
            renderer.render(scene, camera);
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <title>WebGL viewer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body
        {
            font-family: Monospace;
            background-color: #f0f0f0;
            margin: 0px;
            overflow: hidden;
        }
        .info
        {
            position: absolute;
            background-color: black;
            opacity: 0.8;
            color: white;
            text-align: center;
            top: 0px;
            width: 100%;
        }
            .info a
            {
                color: #00ffff;
            }
    </style>
</head>
<body>
    <div id="container"></div>
</body>
</html>

每当您从 Three.js 的一个版本(或任何与此相关的库)迁移到另一个版本时,请务必查看版本迁移说明 - 这些说明告诉您版本之间发生了哪些更改以及您需要在代码中更新的内容。

以下是 Three.js 的迁移日志;您需要考虑 r58 和 r73 之间的所有更改。此外,只要您使用的版本(例如 r58)与您的浏览器和其他必要要求保持兼容,您就可以继续按原样使用它,然后根据需要稍后进行升级。您决定。