तीन.जेएस में मैं एक सड़क बनाना चाहता हूं। मेरे पर यह है

var width = 5;
var length = 4;
var height = 1;
var geometry = new THREE.BoxGeometry( width, length, height );
var textureloader = new THREE.TextureLoader();
var texture = textureloader.load('images/tile_brick.png', function(tx) {
    var material = new THREE.MeshBasicMaterial({
        map: tx,
        wireframe: false
    });        
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
});
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( width, length );

और यह इस तरह दिखना समाप्त होता है

यह x अक्ष पर 5 बार दोहराता है जो अच्छा है, यह y अक्ष पर 4 बार दोहराता है जो कि अच्छा है, लेकिन z अक्ष के लिए यह 4 बार दोहरा रहा है जो खराब है क्योंकि यह संकुचित हो रहा है, मैं चाहता हूं कि इसे 1 बार दोहराएं।

क्या किसी को पता है कि इसे कैसे ठीक करना है?

धन्यवाद

enter image description here

1
omega 1 पद 2019, 21:45

1 उत्तर

सबसे बढ़िया उत्तर

2 आयामी बनावट को 3 आयामी बॉक्स ऑब्जेक्ट पर लपेटा जाना है। बनावट लपेटने के लिए दोहराव कारक घनाभ पक्ष के आयाम पर निर्भर करता है।
पक्षों के 3 अलग-अलग जोड़े के लिए आपको 3 बनावट वाली वस्तुएं बनानी होंगी:

var width = 5, length = 4, height = 1;

var textureloader = new THREE.TextureLoader();

var texture1 = new THREE.TextureLoader().load('images/tile_brick.png');
texture1.wrapS = THREE.RepeatWrapping;
texture1.wrapT = THREE.RepeatWrapping;
texture1.repeat.set( width, length );
var material1 = new THREE.MeshBasicMaterial( { map: texture1 } );

var texture2 = new THREE.TextureLoader().load('images/tile_brick.png');
texture2.wrapS = THREE.RepeatWrapping;
texture2.wrapT = THREE.RepeatWrapping;
texture2.repeat.set( width, height );
var material2 = new THREE.MeshBasicMaterial( { map: texture2 } );

var texture3 = new THREE.TextureLoader().load('images/tile_brick.png');
texture3.wrapS = THREE.RepeatWrapping;
texture3.wrapT = THREE.RepeatWrapping;
texture3.repeat.set( height, length );
var material3 = new THREE.MeshBasicMaterial( { map: texture3 } );

var geometry = new THREE.BoxGeometry( width, length, height );
var mesh = new THREE.Mesh(geometry, [material3, material3, material2, material2, material1, material1]);

scene.add(mesh);

उदाहरण:

(function onLoad() {
  var camera, scene, renderer, orbitControls;
  
  init();
  animate();

  function init() {
    renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: false
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    document.body.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
    camera.position.set(0, -4, 4);
    camera.lookAt( 0, 0, 0 );

    loader = new THREE.TextureLoader();
    loader.setCrossOrigin("");

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x7f7f7f);
    scene.add(camera);
    
    window.onresize = function() {
      renderer.setSize(window.innerWidth, window.innerHeight);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
    }
    
    orbitControls = new THREE.OrbitControls(camera, document.body);
    createModel();
  }

  function createModel() {

    var width = 5, length = 4, height = 1;

    var textureloader = new THREE.TextureLoader();
    
    var texture1 = new THREE.TextureLoader().load("https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/brickwall.png");
    texture1.wrapS = THREE.RepeatWrapping;
    texture1.wrapT = THREE.RepeatWrapping;
    texture1.repeat.set( width, length );
    var material1 = new THREE.MeshBasicMaterial( { map: texture1 } );

    var texture2 = new THREE.TextureLoader().load("https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/brickwall.png");
    texture2.wrapS = THREE.RepeatWrapping;
    texture2.wrapT = THREE.RepeatWrapping;
    texture2.repeat.set( width, height );
    var material2 = new THREE.MeshBasicMaterial( { map: texture2 } );

    var texture3 = new THREE.TextureLoader().load("https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/brickwall.png");
    texture3.wrapS = THREE.RepeatWrapping;
    texture3.wrapT = THREE.RepeatWrapping;
    texture3.repeat.set( height, length );
    var material3 = new THREE.MeshBasicMaterial( { map: texture3 } );

    var geometry = new THREE.BoxGeometry( width, length, height );
    var mesh = new THREE.Mesh(geometry, [material3, material3, material2, material2, material1, material1]);

    scene.add(mesh);
  }

  function animate() {
    requestAnimationFrame(animate);
    orbitControls.update();
    render();
  }

  function render() {
    renderer.render(scene, camera);
    material.map = texture1;
  }
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
1
Rabbid76 2 पद 2019, 19:43