0
我使用的是three.js版本r58。而下面的代码是完全显示模式，但之后我升级到three.js所的新版本，R73是我的模型不呈现 在调试窗口，它表明网格是有，但仍然没有在屏幕上可见 感谢，如果任何人都可以help.Code是相当长对不起那个升级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>