Sign in to follow this  
dbawel

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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
 
 

Share this post


Link to post
Share on other sites

@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. 

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

@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);
            }
  });
================================

 

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.