How could I use the latest version of Three.js to achieve the effects of old version?

Questions
1

I used Three.js-REVISION49 to create a 3D visualization program, however I have to update it to use the latest version of Three.js. After I updated it, I find the rendering result turns out to be different to the previous one. I want the previous rendering result while keep the latest version of Three.js. So how could I solve this problem? Can anybody gives me some suggestions?
previous one:

2
21068×817 155 KB

latest one:
1
1779×780 194 KB

2

Without sharing code or better a live example that demonstrates the different renderings, it won’t be possible to provide useful feedback.

1 Like
3

Thank you for your kind reminder! Then I would like to add more details towards this problem. The core codes are shown below, where p1 and p2 are arrays which store some vertices’ 3D coordinates that constructs the structure of the strips. I think there is no need to show them to you and you don’t need to figure out how does the below code modified them before put them into the “geo.vertices” variable as well, in order to solve problems, for these are all cheminformatics issues, I don’t know it either, for the codes are not created by myself, I just copy them and transfer them to my project, the code work well in Three.js 49 version, but my project is written in the latest version, so I didn’t achievemy wishing expectation. The difference displayed by pictures shown in my first post.
var geo = new THREE.Geometry();
var vs = geo.vertices, fs = geo.faces;
var axis, p1v, p2v, a1v, a2v;
for (i = 0, lim = p1.length; i < lim; i++) {
vs.push(p1v = p1[i]); // 0
vs.push(p1v); // 1
vs.push(p2v = p2[i]); // 2
vs.push(p2v); // 3
if (i < lim - 1) {
var toNext = p1[i + 1].clone().subSelf(p1[i]);
var toSide = p2[i].clone().subSelf(p1[i]);
axis = toSide.crossSelf(toNext).normalize().multiplyScalar(thickness);
}
vs.push(a1v = p1[i].clone().addSelf(axis)); // 4
vs.push(a1v); // 5
vs.push(a2v = p2[i].clone().addSelf(axis)); // 6
vs.push(a2v); // 7
}
var faces = [[0, 2, -6, -8], [-4, -2, 6, 4], [7, 3, -5, -1], [-3, -7, 1, 5]];
for (i = 1, lim = p1.length; i < lim; i++) {
var offset = 8 * i, color = new THERE.Color(colors[Math.round((i - 1)/ div)]);
for (j = 0; j < 4; j++) {
var f = new THREE.Face4(offset + faces[j][0], offset + faces[j][1], offset + faces[j][2], offset + faces[j][3], undefined, color);
fs.push(f);
}
}
var vsize = vs.length - 8; // Cap
for (i = 0; i < 4; i++) {vs.push(vs[i * 2]); vs.push(vs[vsize + i * 2])};
vsize += 8;
fs.push(new THREE.Face4(vsize, vsize + 2, vsize + 6, vsize + 4, undefined, fs[0].color));
fs.push(new THREE.Face4(vsize + 1, vsize + 5, vsize + 7, vsize + 3, undefined, fs[fs.length - 3].color));
geo.computeFaceNormals();
geo.computeVertexNormals(false);
var material = new THREE.MeshLambertMaterial();
material.vertexColors = THREE.FaceColors;
var mesh = new THREE.Mesh(geo, material);
mesh.doubleSided = true;
var group = THREE.Object3D;
group.add(mesh);
var scene = new THREE.Scene();
var directionalLight = new THREE.DirectionalLight(0xFFFFFF);
directionalLight.position = new TV3(0.2, 0.2, -1).normalize();
directionalLight.intensity = 1.2;
scene.add(directionalLight);
var ambientLight = new THREE.AmbientLight(0x202020);
scene.add(ambientLight);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.domElement.style.width = “100%”;
renderer.domElement.style.height = “100%”;
body.dom.append(this.renderer.domElement);
renderer.setSize(this.WIDTH, this.HEIGHT);
renderer.render(this.scene, this.camera);
What I wonder is that the core code uses the same object constructor name, like “THREE.MeshLambertMaterial”、“THREE.Mesh”、“THREE.WebGLRenderer”、" THREE.Scene()" as they are all normal elements of three.js and they are all contained in the latest version of Three.js, but why the rendering effects are that huge different? The back picture show only some number of triangles…
So I wonder How could I make less efforts to achieve the effect shown in the first picture? Thanks for your patient reading~