blondegeek/test_cylinder.html Secret

## test_cylinder.html
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Babylon Template</title>

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

  #renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
  }
  </style>
  <script src="https://cdn.babylonjs.com/cannon.js"></script>
  <script src="babylon.custom.3.2.js"></script>
  <!-- <script src="babylon.custom.3.3.js"></script> -->
</head>

<body>

<canvas id="renderCanvas" touch-action="none"></canvas> //touch-action="none" for best results from PEP

<script>
var canvas = document.getElementById("renderCanvas"); // Get the canvas element

// Stencil for highlight
var engine = new BABYLON.Engine(canvas, true);

function updateCylinder(cylinder) {
  cylinder = BABYLON.MeshBuilder.CreateTube(
    "cylinder",
    {path : [cylinder.start_mesh.position, cylinder.end_mesh.position],
      radius: cylinder.radius,
      instance: cylinder
    },
    scene
  )
  return cylinder
}

function createGUISlider(joint){
  // Add GUI for slider
  var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
  var panel = new BABYLON.GUI.StackPanel();
  panel.width = "220px";
  panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
  panel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
  advancedTexture.addControl(panel);

  var header = new BABYLON.GUI.TextBlock();
  header.text = "Spring length: 8";
  header.height = "30px";
  header.color = "white";
  panel.addControl(header);

  var slider = new BABYLON.GUI.Slider();
  slider.minimum = 1;
  slider.maximum = 15;
  slider.value = 8;
  slider.height = "20px";
  slider.width = "200px";
  slider.onValueChangedObservable.add(function(value) {
      header.text = "Spring length: " + value.toFixed(2);
      if (joint) {
          joint.physicsJoint.restLength = value;
      }
  });
  panel.addControl(slider);
  return panel, header, slider
}

function createCylinder(joint) {
  var vstart = joint.start_mesh.position;
  var vend = joint.end_mesh.position;
  var path = [joint.start_mesh.position, joint.end_mesh.position];
  var cyl_diameter = 0.5; // Ultimately, make this reflect the strength of spring
  var number_of_sides = 36;

  var cylinderMat = new BABYLON.StandardMaterial("cylinder_mat", scene);
  cylinderMat.diffuseColor = new BABYLON.Color3(1, 1, 1);

  var cylinder = new BABYLON.MeshBuilder.CreateTube(
      "cylinder",
      {path : path,
        radius: cyl_diameter/2.0,
        updatable: true
      },
      scene
    )

  cylinder.material = cylinderMat;
  cylinder.start_mesh = joint.start_mesh;
  cylinder.end_mesh = joint.end_mesh;

  joint.cylinder = cylinder
}

var createScene = function () {

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

    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 20, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true, 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;

    // Enable physics no gravity
    scene.enablePhysics(new BABYLON.Vector3(0, 0, 0));

    // Create two spheres and physics impostors
    var sphere1 = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
    sphere1.physicsImpostor = new BABYLON.PhysicsImpostor(sphere1, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1, restitution: 0.9, friction: 10}, scene);
    sphere1.position.y = 2.0
    var sphere2 = BABYLON.Mesh.CreateSphere("sphere2", 16, 2, scene);
    sphere2.physicsImpostor = new BABYLON.PhysicsImpostor(sphere2, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1, restitution: 0.9, friction: 10}, scene);

    // Create spring joint
    var joint = new BABYLON.PhysicsJoint(BABYLON.PhysicsJoint.SpringJoint, {
            length: 5.0,
            stiffness: 10,
            damping: 0.5
          });
    sphere1.physicsImpostor.addJoint(sphere2.physicsImpostor, joint);

    // Create GUI
    createGUISlider(joint)

    // Add cylinder to visualize spring joint
    joint.start_mesh = sphere1
    joint.end_mesh = sphere2

    createCylinder(joint)

    scene.registerBeforeRender(function () {
      cylinder = updateCylinder(joint.cylinder);
    });

    return scene;

};
var scene = createScene();
engine.runRenderLoop(function () { // Register a render loop to repeatedly render the scene
  scene.render();
});

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

</script>
</body>
</html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Babylon Template</title>

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

	#renderCanvas {
	width: 100%;
	height: 100%;
	touch-action: none;
	}
	</style>
	<script src="https://cdn.babylonjs.com/cannon.js"></script>
	<script src="babylon.custom.3.2.js"></script>
	<!-- <script src="babylon.custom.3.3.js"></script> -->
	</head>

	<body>

	<canvas id="renderCanvas" touch-action="none"></canvas> //touch-action="none" for best results from PEP

	<script>
	var canvas = document.getElementById("renderCanvas"); // Get the canvas element

	// Stencil for highlight
	var engine = new BABYLON.Engine(canvas, true);

	function updateCylinder(cylinder) {
	cylinder = BABYLON.MeshBuilder.CreateTube(
	"cylinder",
	{path : [cylinder.start_mesh.position, cylinder.end_mesh.position],
	radius: cylinder.radius,
	instance: cylinder
	},
	scene
	)
	return cylinder
	}

	function createGUISlider(joint){
	// Add GUI for slider
	var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
	var panel = new BABYLON.GUI.StackPanel();
	panel.width = "220px";
	panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
	panel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
	advancedTexture.addControl(panel);

	var header = new BABYLON.GUI.TextBlock();
	header.text = "Spring length: 8";
	header.height = "30px";
	header.color = "white";
	panel.addControl(header);

	var slider = new BABYLON.GUI.Slider();
	slider.minimum = 1;
	slider.maximum = 15;
	slider.value = 8;
	slider.height = "20px";
	slider.width = "200px";
	slider.onValueChangedObservable.add(function(value) {
	header.text = "Spring length: " + value.toFixed(2);
	if (joint) {
	joint.physicsJoint.restLength = value;
	}
	});
	panel.addControl(slider);
	return panel, header, slider
	}

	function createCylinder(joint) {
	var vstart = joint.start_mesh.position;
	var vend = joint.end_mesh.position;
	var path = [joint.start_mesh.position, joint.end_mesh.position];
	var cyl_diameter = 0.5; // Ultimately, make this reflect the strength of spring
	var number_of_sides = 36;

	var cylinderMat = new BABYLON.StandardMaterial("cylinder_mat", scene);
	cylinderMat.diffuseColor = new BABYLON.Color3(1, 1, 1);

	var cylinder = new BABYLON.MeshBuilder.CreateTube(
	"cylinder",
	{path : path,
	radius: cyl_diameter/2.0,
	updatable: true
	},
	scene
	)

	cylinder.material = cylinderMat;
	cylinder.start_mesh = joint.start_mesh;
	cylinder.end_mesh = joint.end_mesh;

	joint.cylinder = cylinder
	}

	var createScene = function () {

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

	var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 20, BABYLON.Vector3.Zero(), scene);
	camera.attachControl(canvas, true, 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;

	// Enable physics no gravity
	scene.enablePhysics(new BABYLON.Vector3(0, 0, 0));

	// Create two spheres and physics impostors
	var sphere1 = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
	sphere1.physicsImpostor = new BABYLON.PhysicsImpostor(sphere1, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1, restitution: 0.9, friction: 10}, scene);
	sphere1.position.y = 2.0
	var sphere2 = BABYLON.Mesh.CreateSphere("sphere2", 16, 2, scene);
	sphere2.physicsImpostor = new BABYLON.PhysicsImpostor(sphere2, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1, restitution: 0.9, friction: 10}, scene);

	// Create spring joint
	var joint = new BABYLON.PhysicsJoint(BABYLON.PhysicsJoint.SpringJoint, {
	length: 5.0,
	stiffness: 10,
	damping: 0.5
	});
	sphere1.physicsImpostor.addJoint(sphere2.physicsImpostor, joint);

	// Create GUI
	createGUISlider(joint)

	// Add cylinder to visualize spring joint
	joint.start_mesh = sphere1
	joint.end_mesh = sphere2

	createCylinder(joint)

	scene.registerBeforeRender(function () {
	cylinder = updateCylinder(joint.cylinder);
	});

	return scene;

	};
	var scene = createScene();
	engine.runRenderLoop(function () { // Register a render loop to repeatedly render the scene
	scene.render();
	});

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

	</script>
	</body>
	</html>