CanvasRenderer produces distorted texture when using PlaneGeometry

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:

use WebGlRenderer result is right:

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 “”};
   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 );


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

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.


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

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

Out it curiosity, why are you using CanvasRenderer?