簡體   English   中英

Three.js中的紋理

[英]Texture in Three.js

我正在嘗試將紋理應用於Three.js中的Birds示例

  // instantiate a loader var loader = new THREE.TextureLoader(); // load a resource loader.load('imgs/birdtexture.jpg', function (texture) { var material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide }); var bird = new THREE.Mesh( new Bird(), material); ); 

由於某種原因,這不起作用,並且我沒有收到任何錯誤。似乎我缺少了一些東西。 我究竟做錯了什么?

編輯:我把它用UV工作作為描述在這里 這是代碼:

  var texture = new THREE.TextureLoader().load("imgs/birdtexture.jpg");
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.set( 0.05, 0.05);

  var geometry = new Bird();

  function assignUVs(geometry) {

  geometry.faceVertexUvs[0] = [];

  geometry.faces.forEach(function(face) {

    var components = ['x', 'y', 'z'].sort(function(a, b) {
        return Math.abs(face.normal[a]) > Math.abs(face.normal[b]);
    });

    var v1 = geometry.vertices[face.a];
    var v2 = geometry.vertices[face.b];
    var v3 = geometry.vertices[face.c];

    geometry.faceVertexUvs[0].push([
        new THREE.Vector2(v1[components[0]], v1[components[1]]),
        new THREE.Vector2(v2[components[0]], v2[components[1]]),
        new THREE.Vector2(v3[components[0]], v3[components[1]])
    ]);

    });

    geometry.uvsNeedUpdate = true;
    }

    assignUVs(geometry);

    var bird = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial(     {map:texture, side: THREE.DoubleSide }));

試試這個(未試用):

  // instantiate a loader
  var loader = new THREE.TextureLoader();
  // Create material
  var material = new THREE.MeshBasicMaterial({side: THREE.DoubleSide});

  // load a resource
  loader.load('imgs/birdtexture.jpg',   function (texture) {
     marterial.map = texture;
  });

  var bird = new THREE.Mesh( new Bird(), material);
);

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM