我使用的是three.js版本r58。下面的代码完美地展示了模型，但在我升级到新版本的three.js后，我的模型没有渲染 在调试窗口中，它显示网格在那里，但仍然在屏幕上不可见 谢谢，如果有人可以提供帮助。代码很长，很抱歉
代码：
<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>
答案 0 :(得分：0)
每当您从一个版本的Three.js（或任何库）迁移到另一个版本时，请务必查看版本迁移说明 - 这些说明告诉您版本之间的变化以及您需要的内容在您的代码中更新。
以下是Three.js＆＃39; migration logs;你需要考虑r58和r73之间的所有变化。此外，只要您使用的版本（例如r58）与您的浏览器和其他必要要求保持兼容，您可以按原样继续使用它，然后根据需要进行升级。这是你的电话。