JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/3.0.0-alpha/babylon.max.js"></script>
<canvas id="renderCanvas"></canvas>
CSS
html, body {
overflow: hidden;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
}
#renderCanvas {
width : 100%;
height : 100%;
touch-action: none;
}
JavaScript
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
});
var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);
var createScene = function () {
var startPosition;
var endPosition;
var totalDistance;
var startTime;
var moveFlag;
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);
// 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", 16, 2, scene);
// Move the sphere upward 1/2 its height
sphere.position.y = 1;
// Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
var ground = BABYLON.Mesh.CreateGround("ground1", 100, 100, 2, scene);
var camera = new BABYLON.ArcRotateCamera('Camera', Math.PI / 2, 1.0, 50, sphere.position, scene);
camera.allowUpsideDown = false;
camera.lowerRadiusLimit = 10;
camera.upperRadiusLimit = 50;
// This attaches the camera to the canvas
camera.attachControl(canvas, true);
scene.onPointerDown = (event, pickResult) => {
if (pickResult.hit && event.button === 0) {
var diffX = pickResult.pickedPoint.x - sphere.position.x;
var diffZ = pickResult.pickedPoint.z - sphere.position.z;
startPosition = sphere.position;
endPosition = pickResult.pickedPoint;
...