0

I am working on a sketching tool with the help of threejs. This tool should allow users drawing cubes at any direction. I partially achieved this but still when I scale an object at negative direction the face colors get inverted. I am looking for a solution to avoid color inversion. mean the cube should be the same at both positive and negative scaling.

Please kindly help..!!

Thanks in advance.

Scaling at positive direction.

Scaling at positive direction

Scaling at negative direction.

Scaling at negative direction

Micho
  • 3,929
  • 13
  • 37
  • 40
Rajesh kumar
  • 3
  • 2

2 Answers2

2

If scaling negatively has unwanted artifacts, why don't you just avoid doing it? Your cubical meshes are symmetrical, so there no desired behaviour as far as I can tell.

In other words, display -50, but scale by the absolute value (50).

scale.set(Math.abs(scale)...)

If you really -do- need geometry flipping, take a look at this answer.

Paul-Jan
  • 16,746
  • 1
  • 63
  • 95
1

Since you draw cube and scale it lower than, it vertices are being drawn inside. you can set box's material as double sided.

I assume you are using MeshBasicMaterial

var material = new THREE.MeshBasicMaterial({side:THREE.DoubleSide});
var box = new THREE.Mesh(boxGeometryInstance,  material);
None
  • 330
  • 2
  • 16
  • Thanks @Selim, but still it did not resolve the problem even after applying this side property..!! – Rajesh kumar Jul 03 '17 at 06:46
  • `cubeGeo = new THREE.BoxGeometry(5, 5, 5); cubeGeo.translate(2.5, 2.5, 2.5); cubeMaterial = new THREE.MeshBasicMaterial(); cubeMaterial.side = THREE.DoubleSide; cubeMaterial.transparent = false; cubeMaterial = [loadTexture('textures/busrun/rightLeft.jpg'), loadTexture('textures/busrun/rightLeft.jpg'), loadTexture('textures/busrun/topBottom.jpg'), loadTexture('textures/busrun/topBottom.jpg'), loadTexture('textures/busrun/rightLeft.jpg'), loadTexture('textures/busrun/rightLeft.jpg') ]; ` – Rajesh kumar Jul 03 '17 at 06:50