How to make the texture fit properly on the geometric surface?

S

SpeNch2021-03-16 18:51:04

three.js

SpeNch, 2021-03-16 18:51:04

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My first three.js app</title>
    <style>
      body { margin: 0; }
    </style>
  </head>
  <body>
  <script src="https://threejs.org/build/three.js"></script>
    <script>
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

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

const geometry = new THREE.BufferGeometry();
// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
const vertices = new Float32Array( [
  -4.0, -4.0,  4.0,
   4.0, -4.0,  4.0,
   4.0,  4.0,  4.0,

  
] );

// itemSize = 3 because there are 3 values (components) per vertex
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );


 const loader = new THREE.TextureLoader();

  const material = new THREE.MeshBasicMaterial({
    map: loader.load('https://st.depositphotos.com/1092019/4797/i/600/depositphotos_47974205-stock-photo-gray-old-stone-road-surface.jpg'),
  });





const mesh = new THREE.Mesh( geometry, material );









scene.add( mesh );

      camera.position.z = 5;

      const animate = function () {
        requestAnimationFrame( animate );



        renderer.render( scene, camera );
      };

      animate();
    </script>
  </body>

</html>

I have such a code, there I connected the texture, but it was superimposed somehow incorrectly, which shows 1 color, how to change it so that the bricks can be seen?