将画布纹理映射到平面

时间:2016-09-12 17:39:06

标签: javascript html three.js html5-canvas

我有一个画布,我想要在3D空间中映射到一个平面。出于某种原因,我看到的只是一个绿色矩形。

我在webgl渲染器旁边有画布,我知道在创建纹理之前绘制了画布。

this.geom = new THREE.Geometry();//, side:THREE.DoubleSide
    this.tex = new THREE.Texture(canvas2d);
    //this.tex.needsUpdate = false;
    //color: 0x0033ff,
    this.material = new THREE.MeshBasicMaterial( { map:this.tex, side:THREE.DoubleSide } );
    for(var i = 0; i < this.array.length;i++) {
        this.geom.vertices.push(new THREE.Vector3(this.array[i].x, 0, this.array[i].y));
        this.geom.vertices.push(new THREE.Vector3(this.array[i].x, this.h3d , this.array[i].y));
    }
    for(var i = 0; i < this.geom.vertices.length-3; i++) {
        this.geom.faces.push(new THREE.Face3(i+0,i+2,i+1));
        this.geom.faces.push(new THREE.Face3(i+2,i+3,i+1));
    }
    this.material.map.needsUpdate = true;
    var cube = new THREE.Mesh( this.geom, this.material );
    scene.add( cube );

1 个答案:

答案 0 :(得分:0)

除非我弄错了,否则你没有提供任何纹理映射。例如,this.geom.faceVertexUvs。这可能是问题的原因。