CODEWITHSUNDEEP
javascriptthree.js
user1628311
user1628311

Reputation: 176

How to change the normal of a PlaneGeometry in three.js?

I'm using Three.js to display planes, however I can't seem to find a way to change the normal of it. There's a Plane class that has a normal property so is there any way to use this instead of the PlaneGeometry one?

Upvotes: 2

Views: 4183

Answers (2)

Dejan Zivkovic
Dejan Zivkovic

Reputation: 31

There is another option that perhaps can suit you. You can use lookAt method from the Mesh class. This method is inherited from Object3D class. You just need to specify the point where the plane will look. This way you can reuse your PlaneGeometry for other Mesh instances.

var geometry = new THREE.PlaneGeometry( 12, 12 );
var material = new THREE.MeshBasicMaterial( { color: 0x005E99 } );
var plane = new THREE.Mesh( geometry, material );
plane.lookAt(new THREE.Vector3(0.7, 0.7, 0.7));

Upvotes: 2

Peter O.
Peter O.

Reputation: 32878

PlaneGeometry offers no means to change its normal, which is effectively always (0,0,1). To make the plane geometry face in a different direction, you need to transform its vertices. This is done by converting a Plane object to a transformation matrix and applying that matrix to the PlaneGeometry. Here is code that generates a transformation matrix:

// Assumes that "plane" is the source THREE.Plane object.
// Normalize the plane
var normPlane=new THREE.Plane().copy(plane).normalize();
// Rotate from (0,0,1) to the plane's normal
var quaternion=new THREE.Quaternion()
  .setFromUnitVectors(new THREE.Vector3(0,0,1),normPlane.normal);
// Calculate the translation
var position=new THREE.Vector3(
  -normPlane.constant*normPlane.normal.x,
  -normPlane.constant*normPlane.normal.y,
  -normPlane.constant*normPlane.normal.z);
 // Create the matrix
var matrix=new THREE.Matrix4()
 .compose(position,quaternion,new THREE.Vector3(1,1,1));
// Transform the geometry (assumes that "geometry"
// is a THREE.PlaneGeometry or indeed any
// THREE.Geometry)
geometry.applyMatrix(matrix);

Upvotes: 3

Related Questions