Can't make my mesh rotate

Questions
1

Hello, could you please help me with this: My mesh won’t rotate along y axis for some reason.

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Babylon test page</title>

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 600px;
                height: 600px;
                touch-action: none;
				border: thin solid red;
            }
        </style>

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<!--<script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>-->
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<!--<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>-->
	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> 
<!--<script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>-->
	
	
		
	
    </head>

   <body>

    <canvas id="renderCanvas" touch-action="none" data-camdistance="160" data-camerax="0" data-cameray="50" data-cameraz="0" data-meshname="glTF"></canvas> <!-- touch-action="none" for best results from PEP -->

 
	   
	   
	   
    <script type="text/javascript">

		
        const canvas = document.getElementById("renderCanvas"); // Get the canvas element
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine


        // Add your code here matching the playground format
        const createScene = function () {
    
        const scene = new BABYLON.Scene(engine);  

			
			
	var defaultPipeline = new BABYLON.DefaultRenderingPipeline(
        "DefaultRenderingPipeline",
        true, // is HDR?
        scene,
        scene.cameras
    );
	
	
			
    if (defaultPipeline.isSupported) {
      
        defaultPipeline.samples = 8; 
       
        defaultPipeline.imageProcessingEnabled = true; 
        if (defaultPipeline.imageProcessingEnabled) {
            defaultPipeline.imageProcessing.contrast = 1; 
            defaultPipeline.imageProcessing.exposure = 1; 

		}}
		
		

		

			//CAMERA  
	
			var camdistance = $('#renderCanvas').data('camdistance');
			var camX = $('#renderCanvas').data('camerax');
			var camY = $('#renderCanvas').data('cameray');
			var camZ = $('#renderCanvas').data('cameraz');
			
            var camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, camdistance, new BABYLON.Vector3(camX, camY, camZ));
            //camera.attachControl(canvas, true);
			
			
			//LIGHTS
           const lighthemi = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
			lighthemi.intensity = 1;	
			
			
var  light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-200, -10, 200), scene);
light.position = new BABYLON.Vector3(0, 150, -250);
		light.intensity = 3;			


			canvas.removeEventListener('mousewheel', camera._wheel);canvas.removeEventListener('DOMMouseScroll', camera._wheel);
			camera.inputs.attached.pointers.buttons = [0,1]; // disables right button
			camera.panningSensibility = 0; 
			camera.lowerRadiusLimit = camdistance;
			camera.upperRadiusLimit = camdistance;
			camera.minZ = 0;
			//camera.useAutoRotationBehavior = true;

			// Shadows
		
	var shadowGenerator = new BABYLON.ShadowGenerator(2048, light);
			
			
			
			
			/*
            var mesh = BABYLON.SceneLoader.ImportMeshAsync(null,"./3D/glTF/", meshname, scene, function (scene) { 
				
				 .then((result) => {
    result.meshes[1].position.x = 20;
    const myMesh1 = scene.getMeshByName("myMesh_1");
    myMesh1.rotation.y = Math.PI / 2;
});
				
				 var mesh = scene.meshes[0];

	shadowGenerator.addShadowCaster(scene.meshes[2])	
				
				
				
	shadowGenerator.useBlurExponentialShadowMap = true;
    shadowGenerator.useKernelBlur = true;
    shadowGenerator.blurKernel = 32;

			});
	*/			
				
			
		
					//GROUND
			var ground = BABYLON.Mesh.CreateGround("ground", 200, 200, 10, scene);

			// Colour the ground
        var material = new BABYLON.StandardMaterial(scene);
        material.alpha = .5;
        ground.material = material;
	ground.receiveShadows = true;
				
						
			
			
				//MESH  

			var meshname = $('#renderCanvas').data('meshname');
			BABYLON.SceneLoader.ImportMesh("","./3D/glTF/", meshname+".glb", scene, function (newMeshes) {
        // Set the target of the camera to the first imported mesh
        
				
				camera.target = getMeshByName(name);
		var name = newMeshes[0].name;

	  scene.registerBeforeRender(function () {
	        light.position = camera.position;
			scene.getMeshByName(name).rotation.y += 0.02;
	    });
    });

    
	
			

            return scene;
        };

        const scene = createScene(); //Call the createScene function
//scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
			
                scene.render();
			
			
        });

        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
                engine.resize();
        });
    </script>

   </body>

</html>
2 Likes
2

Exported meshes usually(always?) have rotationQuaternions.
You can either null them out with mesh.rotationQuaternion = null and then use the .rotation property
Or you can use the rotate function Mesh | Babylon.js Documentation
Or manually rotate the quaternion.

2 Likes
3

I don’t know why but the mesh is still not rotating after adding:

scene.getMeshByName(name).rotationQuaternion = null;
4

Thanks but after adding

scene.getMeshByName(name).rotationQuaternion = null;

it still doesn’t rotate.

1 Like
5

See if this helps:

myMesh1.rotate(BABYLON.Vector3.Up(), -Math.PI / 2);

2 Likes
6

A repro in the playground would help us catch it in no time.

3 Likes
7

https://playground.babylonjs.com/#Q5B2PU#1

8

It’s spinning now

By opening the console you would have seen your error.: getMeshByName(name). Scene was missing.
Also the rotationQuaternion can be outside the loop registerBeforeRender
And you can directly use newMeshes [0] rather than getMeshByName.

https://playground.babylonjs.com/#Q5B2PU#3

3 Likes