CODEWITHSUNDEEP
three.js
Sibi
Sibi

Reputation: 3

Three js - moving rotation axis

Using threejs I created a simple cylinder object and rotating it in z-axis. The object rotates around the center axis, both the ends of the cylinder rotate around the axis which is at the center of the cylinder.

How can I make it rotate in a different axis? I would like the cylinder to rotate by having one end in a fixed point while the other end goes around in circles. My code is below. 

init();
function init() {
    renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas'), antialias: true });
    renderer.setClearColor(0xeaebed);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera = new THREE.PerspectiveCamera(5, window.innerWidth / window.innerHeight, 0.1, 4000);
    scene = new THREE.Scene();
    //LIGHTS
    var light = new THREE.AmbientLight(0xffffff, 1);
    scene.add(light);
    var light1 = new THREE.PointLight(0xffffff, 0.3);
    scene.add(light1);
    //Gun holder
    var gunHolder = new THREE.Object3D();
    var gunHolderColour = 0x0f4207;
    var gunHolderBaseCylinderGeometry = new THREE.CylinderGeometry(10, 10, 50, 32);
    var gunHolderBaseCylinderMaterial = new THREE.MeshStandardMaterial({
        color: gunHolderColour,
        metalness: 0.5,
        roughness: 0.5
    });
    var gunHolderBaseCylinderMesh = new THREE.Mesh(gunHolderBaseCylinderGeometry, gunHolderBaseCylinderMaterial);
    gunHolderBaseCylinderMesh.position.set(0, -8, -3000);
    scene.add(gunHolderBaseCylinderMesh);
    requestAnimationFrame(render);
    function render() {
        gunHolderBaseCylinderMesh.rotation.z += 0.01;
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }

}

Upvotes: 0

Views: 937

Answers (1)

prisoner849
prisoner849

Reputation: 17576

You can use .translate() method of your geometry:

var gunHolderBaseCylinderGeometry = new THREE.CylinderGeometry(10, 10, 50, 32); // height is 50
gunHolderBaseCylinderGeometry.translate(0, 25, 0); // move upwards at half of height, 25


    renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setClearColor(0xeaebed);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    camera = new THREE.PerspectiveCamera(5, window.innerWidth / window.innerHeight, 0.1, 4000);
    scene = new THREE.Scene();
    //LIGHTS
    var light = new THREE.AmbientLight(0xffffff, 1);
    scene.add(light);
    var light1 = new THREE.PointLight(0xffffff, 0.3);
    scene.add(light1);
    //Gun holder
    var gunHolder = new THREE.Object3D();
    var gunHolderColour = 0x0f4207;
    var gunHolderBaseCylinderGeometry = new THREE.CylinderGeometry(10, 10, 50, 32);
    gunHolderBaseCylinderGeometry.translate(0, 25, 0);
    var gunHolderBaseCylinderMaterial = new THREE.MeshStandardMaterial({
      color: gunHolderColour,
      metalness: 0.5,
      roughness: 0.5
    });
    var gunHolderBaseCylinderMesh = new THREE.Mesh(gunHolderBaseCylinderGeometry, gunHolderBaseCylinderMaterial);
    gunHolderBaseCylinderMesh.position.set(0, -8, -3000);
    scene.add(gunHolderBaseCylinderMesh);
    requestAnimationFrame(render);

    function render() {
      requestAnimationFrame(render);
      gunHolderBaseCylinderMesh.rotation.z += 0.01;
      renderer.render(scene, camera);

    }
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://threejs.org/build/three.js"></script>

Upvotes: 1

Related Questions