Black Octopus Cartoons: [code]

#renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
    </head>

<body>
     
      <p>
        Click on canvas area to focus view. Arrow keys rotate camera.  Hold ctlr+arrow to move left, right, up, and down. (also has touch screen controls)
 </p>                                                         
 <br />

<canvas id="renderCanvas"></canvas>
        <script>
   
            window.addEventListener('DOMContentLoaded', async function () {
          
               window.addEventListener("click", function() {
          var pick = scene.pick(scene.pointerX, scene.pointerY);
          if (pick.pickedMesh.name == "ball") {
            // scene.getPhysicsEngine().setGravity(0, -9.81, 0);
          }
        })
              
                // get the canvas DOM element
                var canvas = document.getElementById('renderCanvas');
                // load the 3D engine
                var engine = new BABYLON.Engine(canvas, true);
                // createScene function that creates and return the scene
                var createScene = async function () {
                    // create a basic BJS Scene object
                    var scene = new BABYLON.Scene(engine);
                    // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
               /* select camera*//* var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene); */
                    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 1, 40, new BABYLON.Vector3(0, 0, 0), scene);
                    
                    
                    // target the camera to scene origin
                    camera.setTarget(BABYLON.Vector3.Zero());
                    // attach the camera to the canvas
                    camera.attachControl(canvas, true);
              
                  var music = new BABYLON.Sound("Music", "music.wav", scene, null, {
  loop: true,
  autoplay: true
});
                  
                  
                  
                  
                  
                  
                    // create a basic light, aiming 0,1,0 - meaning, to the sky
                    var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(10, -10, -20), scene);
                  light.intensity = 1;
                    var light = new BABYLON.HemisphericLight('light2', new BABYLON.Vector3(-50, 20, 50), scene);
                     light.intensity = 0.5;
                    scene.clearColor = new BABYLON.Color3(.1, .1, .2);

// create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation 
                    var sphere = BABYLON.Mesh.CreateSphere('ball', 32, 5, scene);
                   
                    sphere.position.y = 10;
                    sphere.position.x = 5;
                    sphere.position.z = 0;
                    
                  var sphere = BABYLON.Mesh.CreateSphere('sphere2', 32, 1, scene);
               
                    sphere.position.y = 5;
                    sphere.position.x = 5;
                    sphere.position.z = 5;
                  var sphere = BABYLON.Mesh.CreateSphere('sphere3', 32, 2, scene);
                    
                    sphere.position.y = 6;
                    sphere.position.x = 6;
                    sphere.position.z = 6;
                  
                  var sphere = BABYLON.Mesh.CreateSphere('sphere4', 32, 3, scene);
                   
                    sphere.position.y = 7;
                    sphere.position.x = 7;
                    sphere.position.z = 7;
                  
                  var sphere = BABYLON.Mesh.CreateSphere('sphere5', 32, 1, scene);
                   
                    sphere.position.y = .5;
                    sphere.position.x = 0;
                    sphere.position.z = 0;
               
                  var sphere = BABYLON.Mesh.CreateSphere('sphere6', 32, 5, scene);
                    sphere.position.x = 6;
                    sphere.position.y = 10;
                    sphere.position.z = 0;
                   scene.registerBeforeRender(function () {
		sphere.rotation.x += 0.01;
		sphere.rotation.z += 0.02;

});
                   
                  
            var alpha = 0;
	scene.registerBeforeRender(function () {
		sphere.rotation.x += 0.01;
		sphere.rotation.z += 0.02;

sphere.position = new BABYLON.Vector3(Math.cos(alpha) * 100, 10, Math.sin(alpha) * 50);
		alpha += 0.01;

});
        
                  
                 const box1 = BABYLON.MeshBuilder.CreateBox("box1", {width: 2, height: 1, depth: 3});
    box1.position.x = 1;
    box1.position.y = 1;
    box1.position.z = 4;
                  
    const box2 = BABYLON.MeshBuilder.CreateBox("box2", {});
    box2.scaling.x = 2;
    box2.scaling.y = 1;
    box2.scaling.z = 3;
    box2.position = new BABYLON.Vector3(4, 1, 4);

// call the createScene function
                var scene = await createScene();

// run the render loop
                engine.runRenderLoop(function () {
                    scene.render();
                });
scene.enablePhysics(null, new BABYLON.CannonJSPlugin()),
                // the canvas/window resize event handler
                window.addEventListener('resize', function () {
                    engine.resize();
  var createScene = function () {

// This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 3, 50, BABYLON.Vector3.Zero(), scene);

camera.attachControl(canvas, true);

// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

// Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.7;

// Our built-in 'sphere' shape. Params: name, subdivs, size, scene
    var sphere = BABYLON.Mesh.CreateSphere("sphere1", 3, 2, scene);

// Move the sphere upward 1/2 its height
    sphere.position.y = 2;

// Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
    var ground = BABYLON.Mesh.CreateGround("ground1", 32, 32, 2, scene);
	
	scene.enablePhysics();
	
	sphere.physicsImpostor = new BABYLON.PhysicsImpostor(sphere, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1, restitution: 0.5 }, scene);
	ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, restitution: 0.5 }, scene);

var g = new BABYLON.Vector3(0, -2, 0);

scene.onPointerUp = function () {
		g.y *= -1;
		scene.getPhysicsEngine().setGravity(g);
	}

return scene;

};
                  
                });
              
            });
          
          
        </script>
      
    </body>
</html>
";>

[code]_map