CODEWITHSUNDEEP
htmlsvgd3.jshtml5-canvasthree.js
Mateusz Piwnicki
Mateusz Piwnicki

Reputation: 35

Three.js ugly rendering effect

I am trying to render 3D map of buildings with Three.js based on the 2D svg file. Basically, what I am doing is I take each path from svg, use transformSVGPath from d3.js to create shape and then extrude it, like that:

var material = new THREE.MeshLambertMaterial({
    color: 0xffffff,
    shading: THREE.FlatShading,
    overdraw: 0.5
});
var obj = {
    name: id,
    shape: transformSVGPathExposed(el.path)
};
obj.shape3d = obj.shape.extrude({
    amount: 5,
    bevelEnabled: false
});
obj.mesh = new THREE.Mesh(obj.shape3d, material);
obj.mesh.rotation.x = Math.PI/2;
obj.mesh.scale.set(1,1,1);
obj.mesh.position.x = -750;
obj.mesh.position.z = -500;
obj.mesh.position.y = 20;
MapEngine.shops.push(obj);

transformSVGPathExposed is transformSVGPath function from d3.js exposed to be callable from outside. My svg file looks like this: map svg. And rendering effect looks like this: Three.js render

What's the reason I am seeing those ugly nonsmooth meshes?

Upvotes: 2

Views: 1065

Answers (1)

yaku
yaku

Reputation: 3101

This is a well known problem with CanvasRenderer and is apparently by design. Workaround is to set material.overdraw to some non-zero value, like 0.35 (this parameter was recently changed from boolean to float). See https://github.com/mrdoob/three.js/pull/3407

Other option is to switch to WebGLRenderer. It doesn't have that rendering problem, and is usually much faster.

Upvotes: 3

Related Questions