Jump to content

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


dbawel
 Share

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

Link to comment
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
 
 
Link to comment
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. 

Link to comment
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

Link to comment
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);
            }
  });
================================

 

 

 

Link to comment
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

Link to comment
Share on other sites

  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...