1.4.1. fejezet, alapok

Beküldte pzoli - 2022, július 28 - 1:14du

Alapok a formákhoz és az animációhoz, valamint a GUI-hoz.

<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas {
        width: 100%;
        height: 100%;
      }
      html, body {
        margin: 0;
      }
    </style>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/gui/babylon.gui.js"></script>
    <script>
      const createScene = () => {
        let switched = false;
        var firsAnimation;
 
        const canvas = document.getElementById("renderCanvas");
        const engine = new BABYLON.Engine(canvas, true);
        const scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color3.FromHexString("#e5e5e5");
 
        var advanceTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
 
        //scene.ambientColor = new BABYLON.Color3(1, 1, 1);
 
        const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0.5, 0), scene);
        //const camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0,0,-10),scene);
        camera.attachControl(canvas, true);
        //const light2 = new BABYLON.HemisphericLight("light2", new BABYLON.Vector3(0, 1, 0), scene);
        const light2 = new BABYLON.SpotLight("spot02", new BABYLON.Vector3(15, 20, 10), new BABYLON.Vector3(-1, -2, -1), 1.1, 16, scene);
      	light2.intensity = 0.5;
 
        var light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(-5, -5, 5), scene);
       	light.position = new BABYLON.Vector3(20, 40, 20);
	      light.intensity = 1;
 
        const box = BABYLON.MeshBuilder.CreateBox("box", {
          size: 1
        }, scene);
        box.rotation.x = 2;
        box.rotation.y = 3;
        box.position = new BABYLON.Vector3(0,0.5,0);
 
        const sphere = BABYLON.MeshBuilder.CreateSphere('shape', {
          segments: 32,
          diameter: 1
 
        }, scene);
        sphere.position = new BABYLON.Vector3(1.5,0.5,0);
 
        const plane = BABYLON.MeshBuilder.CreatePlane('plane',{}, scene);
        plane.position = new BABYLON.Vector3(-1.5,0.5,0);
 
        const points = [
          new BABYLON.Vector3(2,0,0),
          new BABYLON.Vector3(2,1,0),
          new BABYLON.Vector3(2,1,1),
          new BABYLON.Vector3(2,0,1),
          new BABYLON.Vector3(2,0,0),
        ];
 
        const line = BABYLON.MeshBuilder.CreateLines('lines',{
          points
        },scene);
        line.position = new BABYLON.Vector3(0,0.5,0);
 
        const material  = new BABYLON.StandardMaterial('material', scene);
        material.diffuseColor = new BABYLON.Color3(1,0,1);
        box.material = material;
 
        const material2  = new BABYLON.StandardMaterial('material2', scene);
        material2.diffuseTexture = new BABYLON.Texture('ping.png', scene);
        sphere.material = material2;
 
        const material3  = new BABYLON.StandardMaterial('material3', scene);
        material3.diffuseColor = new BABYLON.Color3(1,0,1);
        line.material = material3;
 
        const material4  = new BABYLON.StandardMaterial('material4', scene);
        material4.diffuseColor = new BABYLON.Color3(0,0,1);
        plane.material = material4;
 
        new BABYLON.AxesViewer(scene, 1);
 
        const localAxes = new BABYLON.AxesViewer(scene, 1);
        localAxes.xAxis.parent = box;
        localAxes.yAxis.parent = box;
        localAxes.zAxis.parent = box;	
 
        const startFrame = 0;
        const endFrame = 10;
        const frameRate = 10;
 
        const xSlide = new BABYLON.Animation("xSlide", "rotation.x", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
 
        const keyFrames = [];
 
        keyFrames.push({
            frame: 0,
            value: 1,
        });
 
        keyFrames.push({
            frame: frameRate,
            value: -1,
        });
 
        keyFrames.push({
            frame: 2 * frameRate,
            value: 1,
        });
 
        xSlide.setKeys(keyFrames);
 
        box.animations.push(xSlide);
 
        var firsAnimation = scene.beginAnimation(box, 0, 2 * frameRate, true);
 
        const pointerDown = (mesh) => {
            if (mesh === box) {
                switched = !switched;
                if(switched) {
                  firsAnimation.pause();
                  //scene.stopAnimation(box);
                  play.textBlock.text = "Resume";
                }
                else {
                  firsAnimation.restart();
                  play.textBlock.text = "Pause";
                }
            }
 
        }        
 
        scene.onPointerObservable.add((pointerInfo) => {      		
            switch (pointerInfo.type) {
              case BABYLON.PointerEventTypes.POINTERDOWN:
                if(pointerInfo.pickInfo.hit) {
                            pointerDown(pointerInfo.pickInfo.pickedMesh)
                        }
                break;
                }
        });
 
        var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 50, height: 50}, scene);
        var groundMaterial = new BABYLON.StandardMaterial("ground Material", scene);
        groundMaterial.specularColor = new BABYLON.Color3.Black();
 
        ground.material = groundMaterial;
 
        var shadowGenerator = new BABYLON.ShadowGenerator(1024, light2);
        shadowGenerator.getShadowMap().renderList.push(box);
        shadowGenerator.getShadowMap().renderList.push(sphere);
 
        shadowGenerator.usePoissonSampling = true;
        shadowGenerator.useExponentialShadowMap = true;
        shadowGenerator.useBlurExponentialShadowMap = true;
 
        ground.receiveShadows = true;
 
 
        var play = BABYLON.GUI.Button.CreateSimpleButton("Play Button", "Pause");
        play.width = "90px";
        play.height = "40px";
        play.color = "black";
        play.background = "transparent";
        play.left = "-35%";
        play.top = "-30%";
        play.cornerRadius = 5;
 
        play.onPointerEnterObservable.add(function() {
            play.background = "yellow";
        });
 
        play.onPointerOutObservable.add(function() {
            play.background = "transparent";
        });
 
        play.onPointerClickObservable.add(function(meshes){
          switched = !switched;
          if(switched) {
            firsAnimation.pause();
            play.textBlock.text = "Resume";
          } else {
            firsAnimation.restart();
            play.textBlock.text = "Pause";
          }
        });
 
        advanceTexture.addControl(play);
 
        engine.runRenderLoop(() => {
          scene.render();
        });
      }
    </script>
  </head>
  <body onload="createScene()">
    <canvas id="renderCanvas" touch-action="none"></canvas>
 
  </body>
</html>