Help. three js newbie

Questions
,
1

import * as THREE from ‘three’;
import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls.js’;

const sizes = { width: 500, height: 500 };

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.001, 100);
camera.position.z = 1;

window.addEventListener(‘resize’, () => {
sizes.width = 800;
sizes.height = 600;
camera.aspect = sizes.width / sizes.height;
camera.updateProjectionMatrix();
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 3));
});

const textureLoader = new THREE.TextureLoader();
const colorTexture = textureLoader.load(‘/textures/door/color.jpg’);
const mirroredColorTexture = textureLoader.load(‘textures/door/color.jpg’); // Add the new texture

const scene = new THREE.Scene();

const vertexShader = `
varying vec2 vUv;

void main() {
vUv = uv;
vUv.x += position.z > 0.0 ? 0.25 : -1.3;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);
}`;

const fragmentShader = `
uniform sampler2D colorMap;
uniform sampler2D mirroredColorMap;
varying vec2 vUv;

void main() {
vec4 color;

if (vUv.x < 1.5) {
    // Original side of the coin
    color = texture2D(colorMap, vUv);
} else {
    // Mirrored side of the coin
    vec2 mirroredUV = vec2((vUv.x - 1.5) * 2.5, vUv.y);
    mirroredUV = vec2(6.0 - mirroredUV.x, mirroredUV.y); // Flip horizontally

    // Smooth the transition between the two regions
    float smoothstepFactor = smoothstep(1.48, 1.52, vUv.x);
    color = mix(texture2D(colorMap, vUv), texture2D(mirroredColorMap, mirroredUV), smoothstepFactor);
}

gl_FragColor = color;

}`;

const material = new THREE.ShaderMaterial({
uniforms: {
colorMap: { value: colorTexture },
mirroredColorMap: { value: mirroredColorTexture },
},
vertexShader: vertexShader,
fragmentShader: fragmentShader,
side: THREE.DoubleSide,
});

const coin = new THREE.Mesh(new THREE.SphereGeometry(0.5, 199, 100).scale(1, 1, 0.1), material);
scene.add(coin);

const mirroredCoin = new THREE.Mesh(new THREE.SphereGeometry(0.5, 199, 100).scale(1, 1, 0.1), material.clone());
mirroredCoin.rotation.y = Math.PI; // Rotate the mirrored side
mirroredCoin.position.x += 0.0; // Move the cloned coin closer to the camera
scene.add(mirroredCoin);

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(2, 3, 4);
scene.add(pointLight);

const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector(‘canvas.webgl’) });
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
coin.castShadow = true;
mirroredCoin.castShadow = true;

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const clock = new THREE.Clock();

const animate = () => {
const elapsedTime = clock.getElapsedTime();

coin.rotation.y = 2 * elapsedTime;
mirroredCoin.rotation.y = Math.PI + 2 * elapsedTime; // Rotate the mirrored side

controls.update();
renderer.render(scene, camera);

requestAnimationFrame(animate);

};

animate();
The image its divied by stripes i dont know what to do can somebody help me with this problem
2

2

what you are seeing is z-fighting
you have 2 meshes in the scene, coin and mirroredCoin, the same size and in the same place.
Maybe find a different way to create your model and texture it. I would use blender.