BabylonJs基础(一) 基本图形

<script src="~/Scripts/babylon.custom.js"></script>
<canvas touch-action="none" id="renderCanvas" width="1955" height="1407" tabindex="1" style="position: static; width: 100%; height: 100%; padding: 0px; margin: 0px; top: auto; bottom: auto; left: auto; right: auto;"></canvas>
<div id="mydiv" width="955" height="407"></div>
<script>
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);
    //var loadingScreen = new MyLoadingScreen("I'm loading!!");
    Set the loading screen in the engine to replace the default one
    //engine.loadingScreen = loadingScreen;
    var createScene = function () {

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

        // This creates and positions a free camera (non-mesh)
        var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(3, 5,-10), scene);

        // This targets the camera to scene origin
        camera.setTarget(BABYLON.Vector3.Zero());

        // This attaches the camera to the canvas
        camera.attachControl(canvas, 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;


        // show axis
        var showAxis = function (size) {
            var makeTextPlane = function (text, color, size) {
                var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
                dynamicTexture.hasAlpha = true;
                dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color, "transparent", true);
                var plane = BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
                plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
                plane.material.backFaceCulling = false;
                plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
                plane.material.diffuseTexture = dynamicTexture;
                return plane;
            };

            var axisX = BABYLON.Mesh.CreateLines("axisX", [
              BABYLON.Vector3.Zero(), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, 0.05 * size, 0),
              new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
            ], scene);
            axisX.color = new BABYLON.Color3(1, 0, 0);
            var xChar = makeTextPlane("X", "red", size / 10);
            xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);
            var axisY = BABYLON.Mesh.CreateLines("axisY", [
                BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(-0.05 * size, size * 0.95, 0),
                new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(0.05 * size, size * 0.95, 0)
            ], scene);
            axisY.color = new BABYLON.Color3(0, 1, 0);
            var yChar = makeTextPlane("Y", "green", size / 10);
            yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
            var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
                BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, -0.05 * size, size * 0.95),
                new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, 0.05 * size, size * 0.95)
            ], scene);
            axisZ.color = new BABYLON.Color3(0, 0, 1);
            var zChar = makeTextPlane("Z", "blue", size / 10);
            zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
        };

        showAxis(5);
        // 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", 6, 6, 2, scene);

        var box = BABYLON.Mesh.CreateBox("box", 1.0, scene);

        box.position = new BABYLON.Vector3(0, 2, 0);

        //var plane = BABYLON.Mesh.CreatePlane("plane", 2.0, scene);

        //plane.position = new BABYLON.Vector3(2, 0, 1);

        //var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);

        //cylinder.position = new BABYLON.Vector3(-2, 0, 1);

        //var cylinder1 = BABYLON.Mesh.CreateCylinder("cylinder", 3, 2, 4, 6, 1, scene, false);

        //cylinder1.position = new BABYLON.Vector3(-2, 0, 1);
        //var cylinder2 = BABYLON.Mesh.CreateCylinder("cylinder", 3, 1, 5, 6, 1, scene, false);

        //cylinder2.position = new BABYLON.Vector3(-2, 0, 1);
        //var cylinder3 = BABYLON.Mesh.CreateCylinder("cylinder", 3, 0, 6, 6, 1, scene, false);

        //cylinder3.position = new BABYLON.Vector3(-2, 0, 1);
        //var cylinder4 = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 7, 6, 1, scene, false);

        //cylinder4.position = new BABYLON.Vector3(-2, 0, 1);
        //var cylinder5 = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 8, 6, 1, scene, false);

        //cylinder5.position = new BABYLON.Vector3(-2, 0, 1);
        //var cylinder6 = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 9, 6, 1, scene, false);

        //cylinder6.position = new BABYLON.Vector3(-2, 0, 1);

        //var torus = BABYLON.Mesh.CreateTorus("torus", 3, 0.2, 25, scene, false);

        //torus.position = new BABYLON.Vector3(0, 0, 1);

        //var knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 32, 2, 3, scene);

        //knot.position.y = 3;

        return scene;

    };
    var scene = createScene();

    engine.runRenderLoop(function () {
        scene.render();
    });

    window.addEventListener("resize",function(){
        engine.resize();
    });


    //function MyLoadingScreen(text) {
    //    //init the loader
    //    this.loadingUIText = text;
    //    this.loadingUIBackgroundColor = "#FFB6C1";
    //}
    //MyLoadingScreen.prototype.displayLoadingUI = function () {
    //    alert(this.loadingUIText);
    //};
    //MyLoadingScreen.prototype.hideLoadingUI = function () {
    //    alert("Loaded!");
    //};
    //myloadingscreen.prototype = {
    //    displayloadingui: function () {

    //    },
    //    hideloadingui: function () {

    //    },
    //    loadinguibackgroundcolor: "#ffb6c1"
    //};
</script>

源自网络，基本图形，添加坐标系以便计算坐标，loading不好用，也没发现有什么解决办法。