mardi 28 juin 2016

rotate around pendulum 0.85 cylinder height

im stuck with a work that i need to do, basicly first i needed to create a pendulum that basicly is 2 spheres and 1 cylinder the 2 spheres are in the up and down a bigger 1 and a smaller 1, what i need to do is the pendulum should move not around his own center but about a center that is 0.85 the height of my cylinder, my idea was to create a pivot point, but since i dont know very good how the pivot point work i tryed a lot of things, i tryed first to add the cylinder to the scene and the spheres to the cylinder, then i created the pivot point and add the pivot point to the cylinder, in the animate function i just tried to rotate the pivot point in the x axis but nothing happens :/

Here is my code guys hope someone can give me a hand

var scene, camera, renderer;
var caixaGrande, caixaPequena1, caixaPequena2,cylinder,Cylinder2,esferaGrande;
var pivotPoint1, pivotPoint2;

const RAIOCILINDRO = 2.5;
const ALTURACILINDRO = 100;
const RAIOESFERAGRANDE = 15;
const RAIOESFERAPEQUENA = 5;
var rotacao = Math.PI/180;


window.onload = function init() {

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
  camera.up=new THREE.Vector3(0,1,0);
  camera.position.set(150,50,50);
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  // Add a directional light to show off the object
  var light = new THREE.DirectionalLight( 0xffffff, 1.5);
  // Position the light out from the scene, pointing at the origin
  light.position.set(1.5, 1.5, 1);
  scene.add( light );

  var textureCylindro = new THREE.TextureLoader().load("CylinderTexture.png");
  var textureSphere = new THREE.TextureLoader().load("SphereTexture.png");

  geometry = new THREE.CylinderGeometry(RAIOCILINDRO,RAIOCILINDRO,ALTURACILINDRO);
  material = new THREE.MeshPhongMaterial( {color: 0xffffff , map:textureCylindro} );
  cylinder = new THREE.Mesh(geometry,material);
  scene.add(cylinder);


  pivotPoint1 = new THREE.Object3D();
  pivotPoint1.position.y=ALTURACILINDRO*0.15;
  cylinder.add(pivotPoint1);

  var geometry = new THREE.SphereGeometry(RAIOESFERAGRANDE);
  var material = new THREE.MeshPhongMaterial( {color: 0xffffff,map:textureSphere} );
  esferaGrande = new THREE.Mesh( geometry, material );
  esferaGrande.position.y = -ALTURACILINDRO/2;
  cylinder.add( esferaGrande );

  var geometry = new THREE.SphereGeometry(RAIOESFERAPEQUENA);
  var material = new THREE.MeshPhongMaterial( {color: 0xffffff,map:textureSphere} );
  var esferaPequena = new THREE.Mesh( geometry, material );
  esferaPequena.position.y = ALTURACILINDRO/2;
  cylinder.add( esferaPequena );

  Cylinder2 = cylinder.clone();
  Cylinder2.position.z = 3 * RAIOESFERAGRANDE;
  scene.add(Cylinder2);


  renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );

  document.body.appendChild( renderer.domElement );
  animate();
}

function animate() {

  pivotPoint1.rotation.x += 10;

  requestAnimationFrame( animate );

  renderer.render( scene, camera );

}

Aucun commentaire:

Enregistrer un commentaire