CanvasRenderer produces distorted texture when using PlaneGeometry

Questions
1

Hi:
I use CanvasRenderer to render the PlaneGeometry then rotate the mesh,Result is not right.
And I just change CanvasRenderer to WebGlrendder,Result is right.

use CanvasRenderer result is not right:
%E5%9B%BE%E7%89%87

use WebGlRenderer result is right:
%E5%9B%BE%E7%89%87

2 
var renderer;

var width;
var height;
var picWidth = 1200;
var picHeight = 1716;
var scale = 0.4;

function initThree() {

   width = picWidthscale;//window.innerWidth;//document.getElementById(‘canvas-frame’).clientWidth;
   height = picHeightscale;//window.innerHeight;//document.getElementById(‘canvas-frame’).clientHeight;
   console.log(“render size [” + [width,height].toString() + “]”)
   renderer = new THREE.WebGLRenderer();//new THREE.CanvasRenderer();//new THREE.WebGLRenderer();//
   renderer.setSize(width, height);
   //renderer.context.getShaderInfoLog = function(){return “”};
   document.body.appendChild(renderer.domElement);
   renderer.setClearColor(0x808088, 1.0);
}

function initTexture(){

   var geometry = new THREE.PlaneGeometry( picWidthscale, picHeightscale, 1, 1 );
   geometry.vertices[0].uv = new THREE.Vector2(0,0);
   geometry.vertices[1].uv = new THREE.Vector2(1,0);
   geometry.vertices[2].uv = new THREE.Vector2(1,1);
   geometry.vertices[3].uv = new THREE.Vector2(0,1);

   var texture = new THREE.TextureLoader().load("./image/sf.jpg");
   var material = new THREE.MeshBasicMaterial({map:texture,overdraw: 1,side:THREE.DoubleSide});
   var mesh = new THREE.Mesh( geometry,material );
   mesh.rotation.y = 45*Math.PI/180;
   scene.add( mesh );

}
3

This code is wrong since an instance of Vector3 has no uv property.

4

The problem was already discussed at stackoverflow:

The mentioned rendering problem is a known issue of CanvasRenderer which can be easily fixed by slightly increasing the polygon-count of your plane geometry.

Demo: https://jsfiddle.net/f2Lommf5/11480/

5

This way can solve the problem, but performance will be affected

6

:ok_hand:,Thanks.It’s true that it’s the same when i delete these code

7

Out it curiosity, why are you using CanvasRenderer?