CODEWITHSUNDEEP
javascriptthree.js
Kamila Jarek
Kamila Jarek

Reputation: 117

How to get rid of geometry?

I am trying to create an opening door when the user clicks on a sphere in three.js. I tried doing it with a model but I managed to get it to just appear in the correct position rather than rota to it through animation.

I decided to try to focus on an easier scenario and just use a rectangle I would make in three.js. After hours of trying to get it to work I managed to get it to spin and stop when at 90 degrees. However it was rotating around its y axis which was found in the center of the rectangle.

I found this tutorial : https://jsfiddle.net/uxzmsLfr/1/

var camera, scene, renderer;
var mesh, pivot;

 init();
 animate();

 function init() {

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;

scene = new THREE.Scene();

var geometry = new THREE.PlaneGeometry( 0.2, 0.5, 0.2 );
var material = new THREE.MeshNormalMaterial();

mesh = new THREE.Mesh( geometry, material );
mesh.position.set(0, -.25, 0);
scene.add( mesh );

var geo2 = geometry.clone();
geo2.rotateZ(THREE.Math.degToRad(90)); // ROTATE GEOMETRY SO IT'S IN THE CORRECT ORIENTATION

  var mesh2 = new THREE.Mesh( geo2, material );
mesh2.position.set( 0, .25, 0 ); // MOVE THE GEOMOETRY UP BY HALF SO PIVOT IS AT THE BOTTOM OF THE GEO
mesh2.rotation.set(0, 0, Math.PI / 2);
 mesh.add(mesh2);

pivot = new THREE.Group();
pivot.position.set( 0.0, 0.25, 0 ); // MOVE THE PIVOT BACK TO WORLD ORIGN
mesh.add( pivot ); // THIS ADDS THE PIVOT TO THE CENTRE OF THE GEOMOETRY, WHICH WAS THEN ADDING MESH2 IN THE WRONG PLACE
pivot.add( mesh2 );

// VISUALISE PIVOT
var pivotSphereGeo = new THREE.SphereGeometry( 0.01 );
var pivotSphere = new THREE.Mesh(pivotSphereGeo);
pivotSphere.position.set( 0,0,0 );
pivotSphere.position.z = 0.1;
 scene.add( pivotSphere );

scene.add( new THREE.AxesHelper() );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

}

function animate() {

requestAnimationFrame( animate );

    pivot.rotation.z += 0.01;

renderer.render( scene, camera );

}

And so far I managed to do the same with my code. The only thing that I'm struggling with now is how to remove the stationary rectangle?

I would appreciate any help you can give me.

Upvotes: 1

Views: 77

Answers (2)

Toribio
Toribio

Reputation: 4078

The example uses the mesh plane to offset the position of the second mesh. You can always use a group for these purposes if you don't want to render anything.

So, replace the line:

mesh = new THREE.Mesh( geometry, material );

with:

mesh = new THREE.Group();

And rename the variable accordingly to not have a confusing code.

Upvotes: 1

TheJim01
TheJim01

Reputation: 8866

There are two plane meshes in the code above. The first one is defined by:

mesh = new THREE.Mesh( geometry, material );
mesh.position.set(0, -.25, 0);
scene.add( mesh );

The second one (the "door") is defined by:

var mesh2 = new THREE.Mesh( geo2, material );
mesh2.position.set( 0, .25, 0 ); // MOVE THE GEOMOETRY UP BY HALF SO PIVOT IS AT THE BOTTOM OF THE GEO
mesh2.rotation.set(0, 0, Math.PI / 2);
mesh.add(mesh2);

Removing the code that defines the first one will remove the non-door rectangle. But you can't simply remove that code can call it a day, because notice the last line of the mesh2 definition:

mesh.add(mesh2);

This means mesh2 was added as a child of mesh. The pivot group is also a child of mesh. In both cases, replace mesh with scene, and you should be good to go.

Upvotes: 1

Related Questions