首页 文章

threejs合并平面几何图形或从多个图像创建纹理

提问于
浏览 次
4

我有一组平面几何图形，每个几何图形都有一个来自网址的纹理 . 在导航（缩放/平移）期间的任何时刻，容器（THREE.Object3D）包含26个平面几何 . 我将如何将它们合并到一个大平面，以便我可以为合并几何中的所有切片应用高度图 .

或者我如何才能从36个图像中获取所有纹理（目前作为MeshPhongMaterial的 Map 属性）到单个几何体？

EDIT:

目前我按照 Dainel 的建议创建了一个Big几何体 . 并将纹理放置到几何体上，该纹理是通过画布组合的一组图像的组合纹理 .

context = canvas.getContext( '2d' );
var img = Image();
img.src = url //url of the texture tile
context.drawImage(img,xpos, ypos);

这是完成或每个图像 . 每个图像都有一个url，xpos，ypos . 图像被预加载，并且在加载每个图像之后调用回调，该回调创建几何（平面）并从画布添加纹理 .

var texture = new THREE.Texture(canvas); 
  texture.needsUpdate = true;
    var material = new THREE.MeshPhongMaterial({ map : texture });

var geom = new THREE.PlaneGeometry（canvas.width，canvas.height，57,40）; var mesh = new THREE.Mesh（geom，material）; scene.add（mesh）;

我也用高度值更新几何的z顶点 .

three.js

2 回答

  • 0

    你可以创建一个“大”平面并对其应用合并纹理

    或者你可以手动设置每个平面的顶点Y值以匹配高度图的相应部分 . 所以你有一组独立的平面，它们共享相同的“基础”高度图 .

    问候，丹尼尔

    回复于
  • 2

    使用terrainLoader class for threejs和canvas texture我能够实现

    scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(45, mywidth / myheight, 0.01, 10000);
  camera.position.set(0, 0, 240);

  scene.add(new THREE.AmbientLight(0xeeeeee));

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(mywidth, myheight);

  var group = new THREE.Object3D();

  var canvas = document.createElement( 'canvas' );
  canvas.width = mywidth;
  canvas.height = myheight;

  var ctx = canvas.getContext('2d');

  /* adjust width, height, segments based on height data;*/

  /* create a plane geometry */
  var geom = new THREE.PlaneGeometry(800, 692, 40, 55);

  /* 
  read height values from .bin file uing terrainLoader 
  and update the Z values of the plane 
   */

  heightdata = 'assets/heightmap.bin'; 
  terrainLoader.load(heightdata, function(data) {

    /* bin file generated from USGS SRTM tile */ 
    for (var i = 0, l = geom.vertices.length ; i < l; i++) {
      geom.vertices[i].z =   data[i] / 200; /*simple scale */
    }

    geom.verticesNeedUpdate = true;
  });

   /* 
   create a texture from canvas created above with width and height
   of the of the scene. This is to be careful as the size of texture 
   image may not be the same but as same ratio as height map. 
   Atleast for my case it was the situation. But geometry width and 
   texture width are in same ratio. So that i need a small array of 
   heightmap from bin but a much bigger texture 
   */   

  var texture = new THREE.Texture(canvas); 
  var material = new THREE.MeshPhongMaterial({ map : texture });
  var mesh = new THREE.Mesh(geom, material);
  group.add( mesh );
  scene.add(group);

    现在要绘制多个图像到画布检查此页面

    我将只复制HTML5 Canvas Image Loader Tutorial中的代码

    function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }

      var sources = {
        darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
        yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
      };

    在上面的代码中从高度图更新平面几何图形后，可以调用loadImages函数 .

    loadImages(sources, function(images) {

        //context = context of the texture put in threejs texture

        context.drawImage(images.darthVader, 100, 30, 200, 137);
        context.drawImage(images.yoda, 350, 55, 93, 104);
      });
    回复于

相关问题