Spaces:

awacke1
/

HTML5-BabylonJS-Javascript-3DAnimation

Running

App Files Files Community

HTML5-BabylonJS-Javascript-3DAnimation / index.html

awacke1

Update index.html

b9204cd about 3 years ago

raw

history blame contribute delete

4.23 kB

	<!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);

	// Create a camera
	var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);

	// Create a light
	var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

	// Create an array to hold the spheres
	var spheres = [];

	// Load the texture and bump map
	var texture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor.png", scene);
	var bumpMap = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor_n.jpg", scene);

	// Create a fountain of spheres that follow the mouse
	canvas.addEventListener('mousemove', function (event) {
	// Create a new sphere
	var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: Math.random() * 2 + 0.5, segments: 16}, scene);
	sphere.position = new BABYLON.Vector3(Math.random() * 4 - 2, Math.random() * 4 - 2, Math.random() * 4 - 2);
	sphere.material = new BABYLON.StandardMaterial("texture", scene);
	sphere.material.diffuseTexture = texture;
	sphere.material.bumpTexture = bumpMap;
	spheres.push(sphere);

	// Follow the mouse with the spheres
	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);
	}

	// Animate the texture of the spheres
	var textureAnimation = new BABYLON.Animation("textureAnimation", "material.diffuseTexture.uOffset", 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
	var keys = [];
	keys.push({frame: 0, value: 0});
	keys.push({frame: 100, value: 1});
	textureAnimation.setKeys(keys);
	sphere.material.diffuseTexture.wrapU = BABYLON.Texture.WRAP_ADDRESSMODE;
	sphere.material.diffuseTexture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;
	sphere.material.diffuseTexture.uScale = 10;
	sphere.material.diffuseTexture.vScale = 10;
	sphere.animations.push(textureAnimation);
	scene.beginAnimation(sphere, 0, 100, true);

	// Animate the spheres
	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>