solved [SOLVED]+ How to rotate object around it's local axis

dbawel · January 1, 2018

Hello,

How might I rotate the propeller in the following scene:

http://qedsoft.com/DEMOS2017/bjs_loader/index8.html

I'm obviously not defining the variable for the prop correctly.

Below is the full code:

Quote

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Skybox Test</title>
<script src="./js/babylon.max.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}

#renderCanvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
</body>
</html>

<script>
var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);

var createScene = function(){

   var scene;

   BABYLON.SceneLoader.Load("", "baloon.babylon", engine, function (newScene) {

       newScene.executeWhenReady(function () {
           for(var i = 0; i < newScene.meshes.length; i++){
               let mesh = newScene.meshes;
               mesh.isVisible = true;

               switch(mesh.name){
                   case "Blimp_body":
                   case "engine":
                       mesh.scaling = new BABYLON.Vector3(1,1,1);
                       mesh.rotation = new BABYLON.Vector3.Zero();
                   break;

                   case "prop":
                       mesh.scaling = new BABYLON.Vector3(1,1,1);
                       mesh.rotation = new BABYLON.Vector3.Zero();
                       mesh.setPivotMatrix(BABYLON.Matrix.Translation(0, 0, 10));
                       var mesh_prop = mesh
                   break;

                   default:
                   break;
               }
           }


           newScene.clearColor = new BABYLON.Color3(1, 1, 1);


//camera.attachControl(canvas, true);

           newScene.activeCamera.attachControl(canvas);
           newScene.activeCamera.minZ = 0.001;
           newScene.activeCamera.maxZ = 10000;
           newScene.activeCamera.position = new BABYLON.Vector3(90,0,0);

           var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), newScene);

           var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", newScene);
               skyboxMaterial.backFaceCulling = false;
               skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("skybox/TropicalSunnyDay", newScene);
               skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
               skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
               skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);

           var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:1000.0}, newScene);
               skybox.material = skyboxMaterial;

           engine.runRenderLoop(function() {
               newScene.render();
           });

           scene = newScene;
       });
   });

       scene.registerBeforeRender(function () {
       if (mesh_prop) {
           mesh_prop.rotate(BABYLON.Axis.Y, Math.PI / 64, BABYLON.Space.LOCAL);
           }
       });

return scene;
};

var scene = createScene();

window.addEventListener('resize', function(){
   engine.resize();
});

</script>

Thanks,

DB

NasimiAsl · January 1, 2018

hi

http://www.babylonjs-playground.com/#IW99H0

dbawel · January 1, 2018

Hi @NasimiAsl-

I've been able to accomplish this using primitives, but not sure how to integrate into my code. Might I import the mesh to rotate independent of the rest of the model and hierarchy?

Thanks,

DB

NasimiAsl · January 1, 2018

i ask it before in this post maybe that can help

dbawel · January 1, 2018

@NasimiAsl-

I'm familiar with pivot points, but need to integrate a simple rotation animation onto one of my imported model object. I truly appreciate the help. I hope the code I included above helps.

Thanks,

DB

NasimiAsl · January 1, 2018

i think you can use this

var pivot = new BABYLON.TransformNode("root");

pivot.position = new BABYLON.Vector3(-2.,0.,-2.);

// Our built-in 'sphere' shape. Params: name, subdivs, size, scene

var box = BABYLON.Mesh.CreateBox("sphere1", 2 , scene);

// Move the sphere upward 1/2 its height

box.position.y = 1;

box.position.x = 2;

box.position.z = 2;

box.parent = pivot;

that is @MarianG recommend it is good solution if you don't wanna make any mesh

http://www.babylonjs-playground.com/#2SN4VZ#6

Dad72 · January 1, 2018

you can define a mesh.rotationQuaternion = null; for use mesh.rotation.y += 0.1;

satguru · January 1, 2018

@dbawel if you check the browser console you will see the following error

Uncaught TypeError: Cannot read property 'registerBeforeRender' of undefined
at createScene (index8.html:92)
at index8.html:102

maybe you need to move

scene.registerBeforeRender(function ()

after line

var scene = createScene();

scene loader function is async.

dbawel · January 2, 2018

@satguru-

The script originally in the post is not complete - just a template to work from. I knew this was not going to work, and simply trying solve the structure issue which I'm obviously missing in defining the loaded mesh. So I was hoping that someone might be able to look at the script (which will not run) and advise on how I might define the loaded mesh in my register before render function - but I'm not certain how to define the "prop" mesh in my load function in order to use it in a separate function to continually rotate it.

Thanks,

DB

satguru · January 3, 2018

@dbawel

Here is one way you can do this

Instead of creating a scene using
BABYLON.SceneLoader.Load() function
Create the scene using
var scene = new BABYLON.Scene(engine);
Then load your .babylon file using
BABYLON.SceneLoader.Append() function

Here's some pseudo code

=========================

var scene = new BABYLON.Scene(engine);

//add camera, light etc
.....
//run loop here or from within SceneLoader.append()
engine.runRenderLoop(function() {
scene.render();
});

var mesh_prop;

BABYLON.SceneLoader.Append("", "baloon.babylon", scene, function () {

mesh_prop=....;

//register here or outside this function
scene.registerBeforeRender(function () {
mesh_prop.rotate(BABYLON.Axis.Y, Math.PI / 64, BABYLON.Space.LOCAL);
});

});

scene.registerBeforeRender(function () {
       if (mesh_prop) {
           mesh_prop.rotate(BABYLON.Axis.Y, Math.PI / 64, BABYLON.Space.LOCAL);
           }
  });
================================

dbawel · January 3, 2018

Hi @satguru-

Yes, this will work. I thought perhaps I could avoid appending the scene with multiple more objects as it's not only the prop which must animate separately. So I was looking for a way to use the existing mesh with the propeller in place and animate it in the existing script - just to decrease the amount of code as well as simplify. However, I cannot find a way to write the script efficiently as is and accomplish the propeller rotation.

So I'll end up doing what you recommend as it appears to be the most efficient method. Thank you for all of your help, and for verifying my initial thoughts on writing and assigning the animation functions. I hope you had a great New Year.

Thanks,

DB

jdansev · December 19, 2019

I've poured through so many forums but no one has given me a satisfactory solution so I had to find one myself.

Solution: https://www.babylonjs-playground.com/#IW99H0#7

solved [SOLVED]+ How to rotate object around it's local axis

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members