I am attempting to create three swoosh graphics that revolve around a central atom. I have the swoosh graphic saved as a PNG file, and initially thought about using three canvas elements to position the images and rotate them in place.
However, when I implement this with the WebGL renderer, I encounter strange invisible artifacts where the canvases overlap before even starting their rotation.
Using the Canvas renderer, the elements seem to overlap correctly; however, with WebGL, they don’t align well, resulting in oddly distorted shapes.
I would appreciate any assistance on this matter.
EDIT: Here’s a jsfiddle link for reference: Check it out here!
The key functions involved are generateImg and rotateNode, as shown below:
function generateImg(xpos, ypos, zpos, xrot, yrot, zrot) {
// Create a canvas element
var imageObj = new Image();
imageObj.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAACXBIWXMAABcRAAAXEQHKJvM...";
var canvas2 = document.createElement('canvas');
canvas2.width = 512;
canvas2.height = 512;
var context2 = canvas2.getContext('2d');
var texture2 = new THREE.Texture(canvas2);
imageObj.onload = function() {
context2.drawImage(imageObj, 0, 0);
if (texture2) {
texture2.needsUpdate = true;
}
};
var material2 = new THREE.MeshBasicMaterial({ map: texture2, side: THREE.DoubleSide });
material2.transparent = true;
material2.opacity = 0.8;
var mesh2 = new THREE.Mesh(new THREE.PlaneGeometry(canvas2.width, canvas2.height), material2);
mesh2.position.set(xpos, ypos, zpos);
mesh2.rotation.set(xrot, yrot, zrot);
mesh2.name = "swoosh";
scene.add(mesh2);
}
function rotateNodes() {
for (let i = scene.children.length - 1; i > 0; i--) {
if (scene.children[i].name === "swoosh") {
scene.children[i].rotation.z -= .05;
}
}
}
function animate() {
requestAnimationFrame(animate);
if (stats) {
stats.update();
}
if (world === 'HOME') {
rotateNodes();
}
render();
}