|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<title>Babylon.js Game Example</title> |
|
<script src="https://cdn.babylonjs.com/babylon.js"></script> |
|
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script> |
|
<style> |
|
canvas { |
|
width: 100%; |
|
height: 100%; |
|
touch-action: none; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<canvas id="renderCanvas"></canvas> |
|
<script> |
|
window.addEventListener('DOMContentLoaded', function () { |
|
var canvas = document.getElementById('renderCanvas'); |
|
var engine = new BABYLON.Engine(canvas, true); |
|
|
|
var createScene = function () { |
|
var scene = new BABYLON.Scene(engine); |
|
|
|
|
|
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene); |
|
|
|
|
|
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); |
|
|
|
|
|
var spheres = []; |
|
|
|
|
|
canvas.addEventListener('mousemove', function (event) { |
|
|
|
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: Math.random() * 2 + 0.5}, scene); |
|
sphere.position = new BABYLON.Vector3(Math.random() * 4 - 2, Math.random() * 4 - 2, Math.random() * 4 - 2); |
|
spheres.push(sphere); |
|
|
|
|
|
var ray = scene.createPickingRay(event.clientX, event.clientY, BABYLON.Matrix.Identity(), camera); |
|
var pickInfo = scene.pickWithRay(ray, function (mesh) { return mesh == sphere; }); |
|
if (pickInfo.hit) { |
|
sphere.position.copyFrom(pickInfo.pickedPoint); |
|
} |
|
|
|
|
|
var animation = new BABYLON.Animation("myAnimation", "position.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); |
|
var keys = []; |
|
keys.push({frame: 0, value: sphere.position.y}); |
|
keys.push({frame: 50, value: sphere.position.y + 2}); |
|
keys.push({frame: 100, value: sphere.position.y}); |
|
animation.setKeys(keys); |
|
sphere.animations.push(animation); |
|
scene.beginAnimation(sphere, 0, 100, true); |
|
}); |
|
|
|
return scene; |
|
} |
|
|
|
var scene = createScene(); |
|
|
|
engine.runRenderLoop(function () { |
|
scene.render(); |
|
}); |
|
|
|
window.addEventListener('resize', function () { |
|
engine.resize(); |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|
