Untitled

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const textureLoader = new THREE.TextureLoader();
const diffuseTexture = textureLoader.load('path/to/your/diffuseTexture.png');
const normalTexture = textureLoader.load('path/to/your/normalMap.png');

const customShaderMaterial = new THREE.ShaderMaterial({
    vertexShader: `
        attribute vec3 position;
        attribute vec3 normal;
        attribute vec2 uv;

        uniform mat4 modelViewMatrix;
        uniform mat4 projectionMatrix;
        uniform mat3 normalMatrix;

        varying vec2 vUv;
        varying vec3 vNormal;
        varying vec3 vPosition;

        void main() {
            vUv = uv;
            vNormal = normalize(normalMatrix * normal);
            vPosition = (modelViewMatrix * vec4(position, 1.0)).xyz;

            gl_Position = projectionMatrix * vec4(vPosition, 1.0);
        }
    `,
    fragmentShader: `
        precision mediump float;

        uniform sampler2D u_diffuseTexture;
        uniform sampler2D u_normalMap;

        uniform vec3 u_lightDirection;
        uniform vec3 u_ambientLight;

        varying vec2 vUv;
        varying vec3 vNormal;

        void main() {
            vec3 normal = normalize(texture2D(u_normalMap, vUv).rgb * 2.0 - 1.0);
            vec4 diffuseColor = texture2D(u_diffuseTexture, vUv);

            // Ustawienie roughness na domyślną wartość 0.5
            float roughness = 0.5;

            // Obliczenia oświetlenia
            vec3 lightDir = normalize(u_lightDirection);
            float diff = max(dot(normal, lightDir), 0.0);

            // Finalny kolor
            vec3 finalColor = u_ambientLight * diffuseColor.rgb + diff * diffuseColor.rgb * (1.0 - roughness);

            gl_FragColor = vec4(finalColor, diffuseColor.a);
        }
    `,
    uniforms: {
        u_diffuseTexture: { value: diffuseTexture },
        u_normalMap: { value: normalTexture },
        u_lightDirection: { value: new THREE.Vector3(1, 1, 1).normalize() },
        u_ambientLight: { value: new THREE.Vector3(0.2, 0.2, 0.2) }
    }
});

const loader = new THREE.GLTFLoader();
loader.load('path/to/your/model.gltf', function(gltf) {
    const model = gltf.scene;
    model.traverse(function(node) {
        if (node.isMesh) {
            node.material = customShaderMaterial;
        }
    });
    scene.add(model);
    renderer.render(scene);
});

const ambientLight = new THREE.AmbientLight(0x404040, 2);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

renderer.render(scene);