Rotating an object around another object in a 3D matrix axis using Three.js

Question

Rotating an object around another object in a 3D matrix axis using Three.js

I currently have the ability to rotate one axis.

Here is the code that's working now: 
https://codepen.io/itzkinnu/full/erwKzY

Is there a way to rotate an object on a random axis instead of just one fixed axis?

Maybe something similar to this example: https://i.sstatic.net/PH6aj.jpg

javascript random three.js rotation axis

Answer 1

Answer №1

If you desire an object to be positioned relative to another object, then the object must be included as a child of the reference object.

Utilize the Object3D.add method to add a child to an object.

Check out the following example:

(function onLoad() {
  var container, loader, camera, scene, renderer, controls, mesh, child;
  
  init();
  animate();

  function init() {
    container = document.getElementById('container');
    
    renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
    camera.position.set(0, -4, -1.5);

    loader = new THREE.TextureLoader();
    loader.setCrossOrigin("");

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
    scene.add(camera);
    window.onresize = resize;
    
    var ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);

    var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
    directionalLight.position.x = -0.75;
    directionalLight.position.y = -0.5;
    directionalLight.position.z = -1;
    scene.add( directionalLight );

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    
    var axis = new THREE.AxesHelper(2);
    scene.add(axis);
    
    var material = new THREE.MeshPhongMaterial({color:'#f08080'});
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    mesh = new THREE.Mesh(geometry, material);

    var material2 = new THREE.MeshPhongMaterial({color:'#8080f0'});
    var geometry2 = new THREE.BoxGeometry( 1, 1, 1 );
    child = new THREE.Mesh(geometry2, material2);
    child.position.x = 1.5;

    mesh.add(child);
    scene.add(mesh);
  }

  function resize() {
    var aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
  }

  function animate() {
  
    child.position.set(0, 0, 0);
    child.rotateY(0.02)
    child.translateX(1.5);

    mesh.position.set(0, 0, 0);
    mesh.rotateZ(0.01);
    mesh.translateX(1.0);
    
    requestAnimationFrame(animate);
    render();
  }

  function render() {
    renderer.render(scene, camera);
  }
})();

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>

Answer 2

If you desire an object to be positioned relative to another object, then the object must be included as a child of the reference object.

Utilize the Object3D.add method to add a child to an object.

Check out the following example:

(function onLoad() {
  var container, loader, camera, scene, renderer, controls, mesh, child;
  
  init();
  animate();

  function init() {
    container = document.getElementById('container');
    
    renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
    camera.position.set(0, -4, -1.5);

    loader = new THREE.TextureLoader();
    loader.setCrossOrigin("");

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
    scene.add(camera);
    window.onresize = resize;
    
    var ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);

    var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
    directionalLight.position.x = -0.75;
    directionalLight.position.y = -0.5;
    directionalLight.position.z = -1;
    scene.add( directionalLight );

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    
    var axis = new THREE.AxesHelper(2);
    scene.add(axis);
    
    var material = new THREE.MeshPhongMaterial({color:'#f08080'});
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    mesh = new THREE.Mesh(geometry, material);

    var material2 = new THREE.MeshPhongMaterial({color:'#8080f0'});
    var geometry2 = new THREE.BoxGeometry( 1, 1, 1 );
    child = new THREE.Mesh(geometry2, material2);
    child.position.x = 1.5;

    mesh.add(child);
    scene.add(mesh);
  }

  function resize() {
    var aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
  }

  function animate() {
  
    child.position.set(0, 0, 0);
    child.rotateY(0.02)
    child.translateX(1.5);

    mesh.position.set(0, 0, 0);
    mesh.rotateZ(0.01);
    mesh.translateX(1.0);
    
    requestAnimationFrame(animate);
    render();
  }

  function render() {
    renderer.render(scene, camera);
  }
})();

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>

Answer 3

Answer №2

Thank you Rabbid76 for the quick response. It actually helped.

I have added

child.rotateY(0.02);

to the above code in animate function to rotate in a random axis.

May I know how to make the child box self-rotate?

(function onLoading() {
  var container, loader, camera, scene, renderer, controls, mesh, child;
  
  initialize();
  startAnimating();

  function initialize() {
    container = document.getElementById('container');
    
    renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
    camera.position.set(0, -4, -1.5);

    loader = new THREE.TextureLoader();
    loader.setCrossOrigin("");

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
    scene.add(camera);
    window.onresize = resizeHandler;
    
    var ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);

    var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
    directionalLight.position.x = -0.75;
    directionalLight.position.y = -0.5;
    directionalLight.position.z = -1;
    scene.add( directionalLight );

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    
    var axis = new THREE.AxesHelper(2);
    scene.add(axis);
    
    var material = new THREE.MeshPhongMaterial({color:'#f08080'});
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    mesh = new THREE.Mesh(geometry, material);

    var material2 = new THREE.MeshPhongMaterial({color:'#8080f0'});
    var geometry2 = new THREE.BoxGeometry( 1, 1, 1 );
    child = new THREE.Mesh(geometry2, material2);
    child.position.x = 1.5;

    mesh.add(child);
    scene.add(mesh);
  }

  function resizeHandler() {
    var aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
  }

  function startAnimating() {
  
    child.position.set(0, 0, 0);
    child.rotateY(0.02)
    child.translateX(1.5);

    mesh.position.set(0, 0, 0);
    mesh.rotateZ(0.01);
    mesh.translateX(1.0);
    
    requestAnimationFrame(startAnimating);
    renderScene();
  }

  function renderScene() {
    renderer.render(scene, camera);
  }
})();

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>

Answer 4

Thank you Rabbid76 for the quick response. It actually helped.

I have added

child.rotateY(0.02);

to the above code in animate function to rotate in a random axis.

May I know how to make the child box self-rotate?

(function onLoading() {
  var container, loader, camera, scene, renderer, controls, mesh, child;
  
  initialize();
  startAnimating();

  function initialize() {
    container = document.getElementById('container');
    
    renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
    camera.position.set(0, -4, -1.5);

    loader = new THREE.TextureLoader();
    loader.setCrossOrigin("");

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
    scene.add(camera);
    window.onresize = resizeHandler;
    
    var ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);

    var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
    directionalLight.position.x = -0.75;
    directionalLight.position.y = -0.5;
    directionalLight.position.z = -1;
    scene.add( directionalLight );

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    
    var axis = new THREE.AxesHelper(2);
    scene.add(axis);
    
    var material = new THREE.MeshPhongMaterial({color:'#f08080'});
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    mesh = new THREE.Mesh(geometry, material);

    var material2 = new THREE.MeshPhongMaterial({color:'#8080f0'});
    var geometry2 = new THREE.BoxGeometry( 1, 1, 1 );
    child = new THREE.Mesh(geometry2, material2);
    child.position.x = 1.5;

    mesh.add(child);
    scene.add(mesh);
  }

  function resizeHandler() {
    var aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
  }

  function startAnimating() {
  
    child.position.set(0, 0, 0);
    child.rotateY(0.02)
    child.translateX(1.5);

    mesh.position.set(0, 0, 0);
    mesh.rotateZ(0.01);
    mesh.translateX(1.0);
    
    requestAnimationFrame(startAnimating);
    renderScene();
  }

  function renderScene() {
    renderer.render(scene, camera);
  }
})();

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>

Rotating an object around another object in a 3D matrix axis using Three.js

Answer №1

Answer №2

Similar questions

Accessing Struts2 tag attributes with JavaScript

What is the best method for retrieving the selected itemsPerPage in Vuetify's data-table in version 2.0

Incorporate an HTML code string into an Angular 2 template

Encountering ERR_EMPTY_RESPONSE when using the $.POST method

What is the best way to reach nested iframes?

Using a Promise to signal the completion of certain tasks

Encountering a Null Pointer Exception when trying to locate an element on an AngularJS website using Selenium

Error occurred: Unable to access 'client' property as it is undefined. Process will continue running

The Material-UI selector isn't functioning properly for me

Polygon Shapes in Motion

Issue: The hydration process has failed due to a discrepancy between the initial UI and the server-rendered content when utilizing the Link element

Obtain the beginning and ending positions of a substring within a larger string

Node.js throws an error with the message "Unexpected token *" while utilizing the robe

Determining the nearest upcoming date from a JSON dataset

JavaScript allows for the manipulation of elements within a webpage, which includes accessing elements from one

jquery-validation error in gulp automations

Encountered a CastError in Mongoose when trying to cast the value "Object" to a string

Adding a new element with Jquery when a dropdown option is selected

Merging two individual JavaScript scripts to ensure seamless functionality for both

Issue NG0203 encountered during material import attempt