用babylon.js画个3D的房子

最新推荐文章于 2024-05-07 08:53:02 发布
最新推荐文章于 2024-05-07 08:53:02 发布
阅读量2.9k 收藏 5
点赞数
分类专栏： JavaScript HTML(div+css) 文章标签： babylon
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq373591361/article/details/84138796
版权 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    <title>Babylon - Getting Started</title>
    <!-- link to the last version of babylon -->
    @*<script src="~/Scripts/babylon.js"></script>
    <script src="~/Scripts/babylon.gui.min.js"></script>*@



    @*<script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>*@
    @*<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>*@
    @*<script src="https://preview.babylonjs.com/cannon.js"></script>*@
    @*<script src="https://preview.babylonjs.com/Oimo.js"></script>*@
    @*<script src="https://preview.babylonjs.com/gltf_validator.js"></script>*@
    <script src="https://preview.babylonjs.com/earcut.min.js"></script>
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    @*<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>*@
    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>







    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<style>
    html, body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #renderCanvas {
        width: 100%;
        height: 100%;
        touch-action: none;
    }
</style>

<body>
    <canvas id="renderCanvas"></canvas>
    <script type="text/javascript">
        var Dictionary = function () {
            this.elements = new Array();
            //Length of Dictionary
            this.length = function () {
                return this.elements.length;
            };
            //Check whether the Dictionary is empty
            this.isEmpty = function () {
                return (this.length() < 1);
            };
            //remove all elements from the Dictionary
            this.removeAll = function () {
                this.elements = new Array();
            };
            //get specify element of the dictionary
            this.element = function (index) {
                var rlt = null;
                if (index >= 0 && index < this.elements.length) {
                    rlt = this.elements[index];
                }
                return rlt;
            }
            //check whether the Dictionary contains this key
            this.Exists = function (key) {
                var rlt = false;
                try {
                    for (var i = 0, iLen = this.length(); i < iLen; i++) {
                        if (this.elements[i].key == key) {
                            rlt = true;
                            break;
                        }
                    }
                }
                catch (ex) {
                }
                return rlt;
            };
            //check whether the Dictionary contains this value
            this.containsValue = function (value) {
                var rlt = false;
                try {
                    for (var i = 0, iLen = this.length(); i < iLen; i++) {
                        if (this.elements[i].value == value) {
                            rlt = true;
                            break;
                        }
                    }
                }
                catch (ex) {
                }
                return rlt;
            };
            //remove this key from the Dictionary
            this.remove = function (key) {
                var rlt = false;
                try {
                    for (var i = 0, iLen = this.length(); i < iLen; i++) {
                        if (this.elements[i].key == key) {
                            this.elements.splice(i, 1);
                            rlt = true;
                            break;
                        }
                    }
                }
                catch (ex) {
                }
                return rlt;
            };
            //add this key/value to the Dictionary,if key is exists,replace the value
            this.add = function (key, value) {
                this.remove(key);
                this.elements.push({
                    key: key,
                    value: value
                });
            };
            //add this key/value to the Dictionary,if key is exists,append value
            this.set = function (key, value) {
                var arr = this.getItem(key);
                if (arr != null) {
                    if (typeof (arr) == "object") {
                        arr.unshift.apply(arr, value);
                        value = arr;
                    }
                    else {
                        var array = [];
                        array.push(arr);
                        array.unshift.apply(array, value);
                        value = array;
                    }
                    this.remove(key);
                }
                this.elements.push({
                    key: key,
                    value: value
                });
            }
            //get value of the key
            this.getItem = function (key) {
                var rlt = null;
                try {
                    for (var i = 0, iLen = this.length(); i < iLen; i++) {
                        if (this.elements[i].key == key) {
                            rlt = this.elements[i].value;
                            break;
                        }
                    }
                }
                catch (ex) {
                }
                return rlt;
            };
            //get all keys of the dictionary
            this.keys = function () {
                var arr = [];
                for (var i = 0, iLen = this.length(); i < iLen; i++) {
                    arr.push(this.elements[i].key);
                }
                return arr;
            }
            //get all values of the dictionary
            this.values = function () {
                var arr = [];
                for (var i = 0, iLen = this.length(); i < iLen; i++) {
                    arr.push(this.elements[i].value);
                }
                return arr;
            }
        }
        //初始的元素参数队列
        var dicS = new Dictionary();
        //盒子对象队列
        var dicW = new Dictionary();
    </script>
    <script>
        //获取画布对象
        var canvas = document.getElementById('renderCanvas');
        //加载巴比伦3D引擎
        var engine = new BABYLON.Engine(canvas, true);
        var sphere_0 = null;
        var planeBG = null;
        var scene = null;
        var camera = null;
        var light = null;
        var colorArray = new Array(null, null, null);
        var materialPlane = null;
        var currentFloor = 1;//当前楼层
        $(document).ready(function () {
            engine.displayLoadingUI();
            //赋予该场景于变量
            scene = createScene223();

            createUiPanel();
            createUiPanelLegend();
            //在引擎中循环运行这个场景
            engine.runRenderLoop(function () {
                scene.render();
            });

            scene.beforeRender = function () {

            };
            //追加事件：帆布与大小调整程序
            window.addEventListener('resize', function () {
                engine.resize();
            });
            engine.hideLoadingUI();
        });

        var createScene223 = function () {
            //场景
            var scene = new BABYLON.Scene(engine);
            //scene.clearColor = BABYLON.Color3.White();
            scene.clearColor = new BABYLON.Color3(0.5, 0.5, 0.5)

            // Skybox
            var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
            var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
            skyboxMaterial.backFaceCulling = false;
            skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("/textures/TropicalSunnyDay", scene);
            skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
            skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
            skyboxMaterial.disableLighting = true;
            skybox.material = skyboxMaterial;

            //镜头
            camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 0.6, Math.PI / 6, 250,new BABYLON.Vector3(57.5,0,50), scene);
            camera.attachControl(canvas, true);
            //灯光
            var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0.4, 0.3, -0.4), scene);
            //底图-草地
            planeBG = BABYLON.Mesh.CreatePlane("plane", 550, scene);
            planeBG.position.y = -0.1;
            planeBG.rotation.x = Math.PI / 2;
            var materialBG = new BABYLON.StandardMaterial("texturePlane", scene);
            materialBG.diffuseTexture = new BABYLON.Texture("../../Content/images/bgpanle.jpg", scene);
            materialBG.diffuseTexture.uScale = 5.0;//Repeat 5 times on the Vertical Axes
            materialBG.diffuseTexture.vScale = 5.0;//Repeat 5 times on the Horizontal Axes
            materialBG.backFaceCulling = false;//Always show the front and the back of an element
            planeBG.material = materialBG;
            //工厂地面
            var plane = BABYLON.Mesh.CreatePlane("plane", 512, scene);
            plane.position.y = -0;
            plane.rotation.x = Math.PI / 2;
            plane.rotation.z = 0;
            plane.scaling.x = 1;
            plane.scaling.y = 0.724569;
            materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
            materialPlane.diffuseTexture = new BABYLON.Texture("../../Content/images/shuinidi.jpg", scene);
            materialPlane.diffuseTexture.uScale = 5.0;//Repeat 5 times on the Vertical Axes
            materialPlane.diffuseTexture.vScale = 5.0;//Repeat 5 times on the Horizontal Axes
            materialPlane.backFaceCulling = false;//Always show the front and the back of an element
            //materialPlane.diffuseColor = new BABYLON.Color3(0.2, 0.2, 0.3); //Red
            plane.material = materialPlane;
            createXYZ(scene);

            Test(scene);

            return scene;
        }

        var createXYZ = function (scene) {
            //原点
            var sphere_0 = BABYLON.Mesh.CreateSphere("Sphere1", 1, 3, scene);
            sphere_0.position.x = 0;
            sphere_0.position.y = 0;
            sphere_0.position.z = 0;
            //x点
            var sphere_x = BABYLON.Mesh.CreateSphere("Sphere1", 1, 3, scene);
            sphere_x.position.x = 10;
            sphere_x.position.y = 0;
            sphere_x.position.z = 0;
            var materialSphere2 = new BABYLON.StandardMaterial("texture2", scene);
            materialSphere2.diffuseColor = new BABYLON.Color3(1, 0, 0); //Red
            sphere_x.material = materialSphere2;
            //z点
            var sphere_z = BABYLON.Mesh.CreateSphere("Sphere1", 1, 3, scene);
            sphere_z.position.x = 0;
            sphere_z.position.y = 0;
            sphere_z.position.z = 10;
            var materialSphere3 = new BABYLON.StandardMaterial("texture2", scene);
            materialSphere3.diffuseColor = new BABYLON.Color3(0, 2, 0); //green
            sphere_z.material = materialSphere3;
        }
         

        //图例面板
        var createUiPanelLegend = function () {
            // UI
            var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
            var UiPanel = new BABYLON.GUI.StackPanel();
            //UiPanel.height = "220px";
            UiPanel.fontSize = "14px";
            UiPanel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
            UiPanel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
            advancedTexture.addControl(UiPanel);
            // ..
            var button = BABYLON.GUI.Button.CreateSimpleButton("but1", "正常");
            button.paddingTop = "1px";
            button.paddingLeft = "5px";
            button.width = "50px";
            button.height = "30px";
            button.color = "black";
            button.background = "green";

            UiPanel.addControl(button);
            // ..
            var button1 = BABYLON.GUI.Button.CreateSimpleButton("but2", "待机");
            button1.paddingTop = "1px";
            button1.paddingLeft = "5px";
            button1.width = "50px";
            button1.height = "30px";
            button1.color = "black";
            button1.background = "yellow";

            UiPanel.addControl(button1);
            // ..
            var button1 = BABYLON.GUI.Button.CreateSimpleButton("but3", "停机");
            button1.paddingTop = "1px";
            button1.paddingLeft = "5px";
            button1.width = "50px";
            button1.height = "30px";
            button1.color = "black";
            button1.background = "red";

            UiPanel.addControl(button1);
            // ..
            var button1 = BABYLON.GUI.Button.CreateSimpleButton("but4", "未连接");
            button1.paddingTop = "1px";
            button1.paddingLeft = "5px";
            button1.width = "50px";
            button1.height = "30px";
            button1.color = "black";
            button1.background = "gray";

            UiPanel.addControl(button1);
        }

        //控制面板
        var createUiPanel = function () {
            // UI
            var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
            var UiPanel = new BABYLON.GUI.StackPanel();
            UiPanel.fontSize = "14px";
            UiPanel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
            UiPanel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
            advancedTexture.addControl(UiPanel);
            // ..
            var button = BABYLON.GUI.Button.CreateSimpleButton("but1", "全图");
            button.paddingTop = "5px";
            button.paddingLeft = "5px";
            button.width = "80px";
            button.height = "40px";
            button.color = "white";
            button.background = "green";
            button.onPointerDownObservable.add(() => {
                if (currentFloor != 0) {
                    currentFloor = 0;
                    scene = createScene2();
                    createUiPanel();
                }
            });

            UiPanel.addControl(button);
            // ..
            var button1 = BABYLON.GUI.Button.CreateSimpleButton("but2", "一楼");
            button1.paddingTop = "1px";
            button1.paddingLeft = "5px";
            button1.width = "80px";
            button1.height = "40px";
            button1.color = "white";
            button1.background = "green";
            button1.onPointerDownObservable.add(() => {
                if (currentFloor != 1) {
                    currentFloor = 1;
                    scene = createScene();
                    createUiPanel();
                    createUiPanelLegend();
                }
            });

            UiPanel.addControl(button1);
            // ..
            var button1 = BABYLON.GUI.Button.CreateSimpleButton("but3", "二楼");
            button1.paddingTop = "1px";
            button1.paddingLeft = "5px";
            button1.width = "80px";
            button1.height = "40px";
            button1.color = "white";
            button1.background = "green";

            UiPanel.addControl(button1);
            // ..
            var button1 = BABYLON.GUI.Button.CreateSimpleButton("but4", "三楼");
            button1.paddingTop = "1px";
            button1.paddingLeft = "5px";
            button1.width = "80px";
            button1.height = "40px";
            button1.color = "white";
            button1.background = "green";

            UiPanel.addControl(button1);
            // ..
            var button1 = BABYLON.GUI.Button.CreateSimpleButton("but4", "四楼");
            button1.paddingTop = "1px";
            button1.paddingLeft = "5px";
            button1.width = "80px";
            button1.height = "40px";
            button1.color = "white";
            button1.background = "green";

            UiPanel.addControl(button1);
        }

//********************************************************************************************************************************************************
//*
//*
//*
//********************************************************************************************************************************************************
        //挖孔
        var waKong = function (x, y, width, height) {
            var xx = x + width;
            var yy = y + height;
            return [
                new BABYLON.Vector3(x, 0, y),
                new BABYLON.Vector3(xx, 0, y),
                new BABYLON.Vector3(xx, 0, yy),
                new BABYLON.Vector3(x, 0, yy)
            ];
        }
        //画窗
        var windowMaker = function (width, height, frames, frameDepth, frameThickness) {
            var windowShape = [
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(width, 0, 0),
                new BABYLON.Vector3(width, 0, height),
                new BABYLON.Vector3(0, 0, height)
            ];
            var glassWidth = (width - (frames + 1) * frameThickness) / frames;
            var glassTopHeight = height / 3 - frameThickness;
            var glassBotHeight = 2 * glassTopHeight;
            var glass = [];
            var acf = frameThickness;
            for (var f = 0; f < frames; f++) {
                glass[2 * f] = [];
                glass[2 * f].push(new BABYLON.Vector3(acf, 0, 2 * frameThickness + glassBotHeight));
                glass[2 * f].push(new BABYLON.Vector3(acf + glassWidth, 0, 2 * frameThickness + glassBotHeight));
                glass[2 * f].push(new BABYLON.Vector3(acf + glassWidth, 0, 2 * frameThickness + glassBotHeight + glassTopHeight));
                glass[2 * f].push(new BABYLON.Vector3(acf, 0, 2 * frameThickness + glassBotHeight + glassTopHeight));
                glass[2 * f + 1] = [];
                glass[2 * f + 1].push(new BABYLON.Vector3(acf, 0, frameThickness));
                glass[2 * f + 1].push(new BABYLON.Vector3(acf + glassWidth, 0, frameThickness));
                glass[2 * f + 1].push(new BABYLON.Vector3(acf + glassWidth, 0, frameThickness + glassBotHeight));
                glass[2 * f + 1].push(new BABYLON.Vector3(acf, 0, frameThickness + glassBotHeight));
                acf += frameThickness + glassWidth;
            }
            var window = BABYLON.MeshBuilder.ExtrudePolygon("window", { shape: windowShape, holes: glass, depth: frameDepth }, scene);
            window.rotation.x = -Math.PI / 2;
            return window;
        }
        //画门
        var doorMaker = function (width, height, depth) {
            var doorShape = [
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(width, 0, 0),
                new BABYLON.Vector3(width, 0, height),
                new BABYLON.Vector3(0, 0, height)
            ];
            edgeThickness = width / 8
            var panelWidth = width - 2 * edgeThickness;
            var panelBotHeight = (height - 3 * edgeThickness) / 1.75;
            var panelTopHeight = 0.75 * panelBotHeight;
            var panel = [];
            panel[0] = [];
            panel[0].push(new BABYLON.Vector3(edgeThickness, 0, 2 * edgeThickness + panelBotHeight));
            panel[0].push(new BABYLON.Vector3(edgeThickness + panelWidth, 0, 2 * edgeThickness + panelBotHeight));
            panel[0].push(new BABYLON.Vector3(edgeThickness + panelWidth, 0, 2 * edgeThickness + panelBotHeight + panelTopHeight));
            panel[0].push(new BABYLON.Vector3(edgeThickness, 0, 2 * edgeThickness + panelBotHeight + panelTopHeight));
            panel[1] = [];
            panel[1].push(new BABYLON.Vector3(edgeThickness, 0, edgeThickness));
            panel[1].push(new BABYLON.Vector3(edgeThickness + panelWidth, 0, edgeThickness));
            panel[1].push(new BABYLON.Vector3(edgeThickness + panelWidth, 0, edgeThickness + panelBotHeight));
            panel[1].push(new BABYLON.Vector3(edgeThickness, 0, edgeThickness + panelBotHeight));
            var door = BABYLON.MeshBuilder.ExtrudePolygon("door", { shape: doorShape, holes: panel, depth: depth }, scene);
            door.rotation.x = -Math.PI / 2;
            var panelB = BABYLON.MeshBuilder.CreateBox("p1b", { width: panelWidth, height: panelBotHeight, depth: depth / 2 }, scene);
            panelB.position.x = edgeThickness + panelWidth / 2;
            panelB.position.y = edgeThickness + panelBotHeight / 2;
            panelB.position.z = depth / 2;
            var panelT = BABYLON.MeshBuilder.CreateBox("p1t", { width: panelWidth, height: panelTopHeight, depth: depth / 2 }, scene);
            panelT.position.x = edgeThickness + panelWidth / 2;
            panelT.position.y = 2 * edgeThickness + panelBotHeight + panelTopHeight / 2;
            panelT.position.z = depth / 2;

            return BABYLON.Mesh.MergeMeshes([door, panelB, panelT], true);
        };
        //画地板
        var drawFloor = function () {
            var floormat = new BABYLON.StandardMaterial("floormaterial", scene);
            floormat.diffuseTexture = new BABYLON.Texture(
                "http://i.imgur.com/DRSozlo.jpg",
                scene);

            //一楼地板
            var floorData = [
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(115, 0, 0),
                new BABYLON.Vector3(115, 0, 100),
                new BABYLON.Vector3(0, 0, 100)
            ];

            var stairSpace = [];
             
            var floorFaceUV = new Array(3);

            floorFaceUV[0] = new BABYLON.Vector4(0, 0, 0.5, 1);
            floorFaceUV[2] = new BABYLON.Vector4(0.5, 0, 1, 1);

            var floor = BABYLON.MeshBuilder.ExtrudePolygon("floor", { shape: floorData, holes: stairSpace, depth: 0.1, faceUV: floorFaceUV }, scene);
            floor.position.y = 0.3;
            floor.position.z = 0;

            floor.material = floormat;

            //二楼地板
            var floorData = [
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(115, 0, 0),
                new BABYLON.Vector3(115, 0, 100),
                new BABYLON.Vector3(0, 0, 100)
            ];

            var stairSpace = [];
            stairSpace[0] = waKong(3, 0, 11, 10);
            stairSpace[1] = waKong(43, 0, 11, 10);
            stairSpace[2] = waKong(103, 0, 11, 10);

            var floorFaceUV = new Array(3);

            floorFaceUV[0] = new BABYLON.Vector4(0, 0, 0.5, 1);
            floorFaceUV[2] = new BABYLON.Vector4(0.5, 0, 1, 1);

            var floor = BABYLON.MeshBuilder.ExtrudePolygon("floor", { shape: floorData, holes: stairSpace, depth: 0.1, faceUV: floorFaceUV }, scene);
            floor.position.y = 13;
            floor.position.z = 0;

            floor.material = floormat;

            //三楼地板
            var floorData = [
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(115, 0, 0),
                new BABYLON.Vector3(115, 0, 100),
                new BABYLON.Vector3(0, 0, 100)
            ];

            var stairSpace = [];
            stairSpace[0] = waKong(3, 0, 11, 10);
            stairSpace[1] = waKong(43, 0, 11, 10);
            stairSpace[2] = waKong(103, 0, 11, 10);

            var floorFaceUV = new Array(3);

            floorFaceUV[0] = new BABYLON.Vector4(0, 0, 0.5, 1);
            floorFaceUV[2] = new BABYLON.Vector4(0.5, 0, 1, 1);

            var floor = BABYLON.MeshBuilder.ExtrudePolygon("floor", { shape: floorData, holes: stairSpace, depth: 0.1, faceUV: floorFaceUV }, scene);
            floor.position.y = 23;
            floor.position.z = 0;

            floor.material = floormat;
             
            //四楼地板
            var floorData = [
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(115, 0, 0),
                new BABYLON.Vector3(115, 0, 100),
                new BABYLON.Vector3(0, 0, 100)
            ];

            var stairSpace = [];
            stairSpace[0] = waKong(3, 0, 11, 10);
            stairSpace[1] = waKong(43, 0, 11, 10);
            stairSpace[2] = waKong(103, 0, 11, 10);

            var floorFaceUV = new Array(3);

            floorFaceUV[0] = new BABYLON.Vector4(0, 0, 0.5, 1);
            floorFaceUV[2] = new BABYLON.Vector4(0.5, 0, 1, 1);

            var floor = BABYLON.MeshBuilder.ExtrudePolygon("floor", { shape: floorData, holes: stairSpace, depth: 0.1, faceUV: floorFaceUV }, scene);
            floor.position.y = 33;
            floor.position.z = 0;

            floor.material = floormat;


            var wallmat = new BABYLON.StandardMaterial("wallmaterial", scene);
            wallmat.diffuseTexture = new BABYLON.Texture("http://i.imgur.com/2b1C7UH.jpg", scene);
            //五楼地板
            var floorData = [
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(115, 0, 0),
                new BABYLON.Vector3(115, 0, 100),
                new BABYLON.Vector3(0, 0, 100)
            ];

            var stairSpace = [];
            stairSpace[0] = waKong(3, 0, 11, 10);
            stairSpace[1] = waKong(43, 0, 11, 10);
            stairSpace[2] = waKong(103, 0, 11, 10);

            var floorFaceUV = new Array(3);
            floorFaceUV[0] = new BABYLON.Vector4(1, 0, 0.5, 1);
            floorFaceUV[1] = new BABYLON.Vector4(1, 0, 1, 1);

            var floor = BABYLON.MeshBuilder.ExtrudePolygon("floor", { shape: floorData, holes: stairSpace, depth: 0.1, faceUV: floorFaceUV }, scene);
            floor.position.y = 43;
            floor.position.z = 0;

            floor.material = wallmat;
        }
        //前面墙
        var drawFrontWall = function () {

            var wallmat = new BABYLON.StandardMaterial("wallmaterial", scene);
            wallmat.diffuseTexture = new BABYLON.Texture("http://i.imgur.com/2b1C7UH.jpg", scene);

            var width = 115;
            var height = 50;
            var rearWallnb1Data = [
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(width, 0, 0),
                new BABYLON.Vector3(width, 0, height),
                new BABYLON.Vector3(0, 0, height),
            ];

            //Holes in XoZ plane
            var rear1WindowHoles = [];
            rear1WindowHoles[0] = [
                new BABYLON.Vector3(7, 0, 0),
                new BABYLON.Vector3(14, 0, 0),
                new BABYLON.Vector3(14, 0, 6),
                new BABYLON.Vector3(7, 0, 6)
            ];

            rear1WindowHoles[1] = [
                new BABYLON.Vector3(30, 0, 0),
                new BABYLON.Vector3(42, 0, 0),
                new BABYLON.Vector3(42, 0, 10),
                new BABYLON.Vector3(30, 0, 10)
            ];

            rear1WindowHoles[2] = waKong(2, 16, 5, 2);
            rear1WindowHoles[3] = waKong(2, 26, 5, 2);
            rear1WindowHoles[4] = waKong(2, 36, 5, 2);

            rear1WindowHoles[5] = waKong(21, 3, 6, 5);
            rear1WindowHoles[6] = waKong(21, 15, 6, 5);
            rear1WindowHoles[7] = waKong(21, 25, 6, 5);
            rear1WindowHoles[8] = waKong(21, 35, 6, 5);

            rear1WindowHoles[9] = waKong(31, 13, 10, 7);
            rear1WindowHoles[10] = waKong(31, 23, 10, 7);
            rear1WindowHoles[11] = waKong(31, 33, 10, 7);

            rear1WindowHoles[12] = waKong(45, 0, 3, 5);
            rear1WindowHoles[13] = waKong(45, 15, 3, 5);
            rear1WindowHoles[14] = waKong(45, 25, 3, 5);
            rear1WindowHoles[15] = waKong(45, 35, 3, 5);
            rear1WindowHoles[16] = waKong(45, 43, 3, 2.5);

            rear1WindowHoles[17] = waKong(57, 3, 6, 5);
            rear1WindowHoles[18] = waKong(57, 15, 6, 5);
            rear1WindowHoles[19] = waKong(57, 25, 6, 5);
            rear1WindowHoles[20] = waKong(57, 35, 6, 5);

            rear1WindowHoles[21] = waKong(64, 3, 6, 5);
            rear1WindowHoles[22] = waKong(64, 15, 6, 5);
            rear1WindowHoles[23] = waKong(64, 25, 6, 5);
            rear1WindowHoles[24] = waKong(64, 35, 6, 5);

            rear1WindowHoles[25] = waKong(73, 3, 6, 5);
            rear1WindowHoles[26] = waKong(73, 15, 6, 5);
            rear1WindowHoles[27] = waKong(73, 25, 6, 5);
            rear1WindowHoles[28] = waKong(73, 35, 6, 5);

            rear1WindowHoles[29] = waKong(80, 3, 6, 5);
            rear1WindowHoles[30] = waKong(80, 15, 6, 5);
            rear1WindowHoles[31] = waKong(80, 25, 6, 5);
            rear1WindowHoles[32] = waKong(80, 35, 6, 5);

            rear1WindowHoles[33] = waKong(89, 3, 6, 5);
            rear1WindowHoles[34] = waKong(89, 15, 6, 5);
            rear1WindowHoles[35] = waKong(89, 25, 6, 5);
            rear1WindowHoles[36] = waKong(89, 35, 6, 5);

            rear1WindowHoles[37] = waKong(96, 3, 6, 5);
            rear1WindowHoles[38] = waKong(96, 15, 6, 5);
            rear1WindowHoles[39] = waKong(96, 25, 6, 5);
            rear1WindowHoles[40] = waKong(96, 35, 6, 5);

            rear1WindowHoles[41] = waKong(105, 0, 3, 5);

            for (var k = 0; k < rear1WindowHoles.length; k++) {
                var kog = rear1WindowHoles[k][0];
                var kog2 = rear1WindowHoles[k][2];
                var width = kog2.x - kog.x;
                var height = kog2.z - kog.z;
                var frames = 4;
                if (height == 2 || width == 3) {
                    frames = 2;
                }
                if (kog.z == 0 || width == 10) {
                    continue;
                }
                //窗
                var windowFBL = windowMaker(width, height, frames, 0.15, 0.1);
                //windowFBL.rotation.z = -Math.PI / 2;
                //windowFBL.rotation.x = -Math.PI / 2;
                windowFBL.position.x = kog.x;
                windowFBL.position.y = kog.z;
                windowFBL.position.z = -0.1;
            }

            var rearFaceUV = [];
            rearFaceUV[2] = new BABYLON.Vector4(7 / 15, 0, 14 / 15, 1);
            rearFaceUV[1] = new BABYLON.Vector4(14 / 15, 0, 1, 1);
            rearFaceUV[0] = new BABYLON.Vector4(0, 0, 7 / 15, 1);

            var rearWallnb1 = BABYLON.MeshBuilder.ExtrudePolygon("rearWallnb1", { shape: rearWallnb1Data, depth: 0.1, holes: rear1WindowHoles, faceUV: rearFaceUV }, scene);
            //rearWallnb1.rotation.x = -Math.PI / 0.99; 
            rearWallnb1.rotation.x = -Math.PI / 2;

            rearWallnb1.material = wallmat;

            rearWallnb1.position.y = 0.0;
            rearWallnb1.position.x = 0;
            rearWallnb1.position.z = 0;
            console.log("frontWall.scaling.x:" + rearWallnb1.scaling.x);
            console.log("frontWall.scaling.y:" + rearWallnb1.scaling.y);
            console.log("frontWall.scaling.z:" + rearWallnb1.scaling.z);
            
            var doormat = new BABYLON.StandardMaterial("door", scene);
            doormat.diffuseColor = new BABYLON.Color3(82 / 255, 172 / 255, 106 / 255);

            var frontDoor = doorMaker(3, 5, 0.05);
            frontDoor.position.x = 45;
            frontDoor.position.y = 0;
            frontDoor.position.z = 0.15;
            frontDoor.material = doormat;

            var frontDoor = doorMaker(3, 5, 0.05);
            frontDoor.position.x = 105;
            frontDoor.position.y = 0;
            frontDoor.position.z = 0.15;
            frontDoor.material = doormat;
        }
        //后面墙
        var drawRearWall = function () {
            var wallmat = new BABYLON.StandardMaterial("wallmaterial", scene);
            wallmat.diffuseTexture = new BABYLON.Texture("http://i.imgur.com/2b1C7UH.jpg", scene);
            var width = 115;
            var height = 50;
            var rearWallnb1Data = [
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(width, 0, 0),
                new BABYLON.Vector3(width, 0, height),
                new BABYLON.Vector3(0, 0, height),
            ];

            var coun = 13;
            var i = 0;
            //Holes in XoZ plane
            var rear1WindowHoles = [];
            //0
            rear1WindowHoles[i++] = waKong(coun, 0, 3, 6);
            coun = coun - 3;
            for (var k = 0; k < 6; k++) {
                coun += 6+3;
                rear1WindowHoles[i++] = waKong(coun, 3, 6, 5);
                rear1WindowHoles[i++] = waKong(coun, 15, 6, 5);
                rear1WindowHoles[i++] = waKong(coun, 25, 6, 5);
                rear1WindowHoles[i++] = waKong(coun, 35, 6, 5);
                //2
                coun += 6 + 1;
                rear1WindowHoles[i++] = waKong(coun, 3, 6, 5);
                rear1WindowHoles[i++] = waKong(coun, 15, 6, 5);
                rear1WindowHoles[i++] = waKong(coun, 25, 6, 5);
                rear1WindowHoles[i++] = waKong(coun, 35, 6, 5);
            } 
            for (var k = 0; k < rear1WindowHoles.length; k++) {
                var kog = rear1WindowHoles[k][0];
                var kog2 = rear1WindowHoles[k][2];
                var width = kog2.x - kog.x;
                var height = kog2.z - kog.z;
                if (kog.z == 0) {
                    continue;
                }
                var frames = 4;
                if (height == 2 || width == 3) {
                    frames = 2;
                }
                //窗
                var windowFBL = windowMaker(width, height, frames, 0.15, 0.1);
                //windowFBL.rotation.z = -Math.PI / 2;
                //windowFBL.rotation.x = -Math.PI / 2;
                windowFBL.position.x = kog.x;
                windowFBL.position.y = kog.z;
                windowFBL.position.z = 100.1;
            }
            
            var rearFaceUV = [];
            rearFaceUV[0] = new BABYLON.Vector4(7 / 15, 0, 14 / 15, 1);
            rearFaceUV[1] = new BABYLON.Vector4(14 / 15, 0, 1, 1);
            rearFaceUV[2] = new BABYLON.Vector4(0, 0, 7 / 15, 1);

            var rearWallnb1 = BABYLON.MeshBuilder.ExtrudePolygon("rearWallnb1", { shape: rearWallnb1Data, depth: 0.1, holes: rear1WindowHoles, faceUV: rearFaceUV }, scene);
            rearWallnb1.rotation.x = -Math.PI / 2;
            rearWallnb1.position.z = 100;
            rearWallnb1.material = wallmat;

        }
        //左面墙
        var drawSideWallnb2 = function () {
            var wallmat = new BABYLON.StandardMaterial("wallmaterial", scene);
            wallmat.diffuseTexture = new BABYLON.Texture("http://i.imgur.com/2b1C7UH.jpg", scene);
              
            var width = 100;
            var height = 50;
            var sideWallnb2Data = [
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(width, 0, 0),
                new BABYLON.Vector3(width, 0, height),
                new BABYLON.Vector3(0, 0, height),
            ];

            /
            var sideWindowHoles = [];
            //1
            sideWindowHoles[0] = waKong(3, 25, 6, 5);
            sideWindowHoles[1] = waKong(3, 35, 6, 5);
            //2
            sideWindowHoles[2] = waKong(10, 25, 6, 5);
            sideWindowHoles[3] = waKong(10, 35, 6, 5);
            //3
            sideWindowHoles[4] = waKong(20, 3, 6, 5);
            sideWindowHoles[5] = waKong(20, 15, 6, 5);
            sideWindowHoles[6] = waKong(20, 25, 6, 5);
            sideWindowHoles[7] = waKong(20, 35, 6, 5);
            //4
            sideWindowHoles[8] = waKong(27, 3, 6, 5);
            sideWindowHoles[9] = waKong(27, 15, 6, 5);
            sideWindowHoles[10] = waKong(27, 25, 6, 5);
            sideWindowHoles[11] = waKong(27, 35, 6, 5);
            //5
            sideWindowHoles[12] = waKong(36, 3, 6, 5);
            sideWindowHoles[13] = waKong(36, 15, 6, 5);
            sideWindowHoles[14] = waKong(36, 25, 6, 5);
            sideWindowHoles[15] = waKong(36, 35, 6, 5);
            //6
            sideWindowHoles[16] = waKong(43, 3, 6, 5);
            sideWindowHoles[17] = waKong(43, 15, 6, 5);
            sideWindowHoles[18] = waKong(43, 25, 6, 5);
            sideWindowHoles[19] = waKong(43, 35, 6, 5);

            //7
            sideWindowHoles[20] = waKong(52, 3, 6, 5);
            sideWindowHoles[21] = waKong(52, 15, 6, 5);
            sideWindowHoles[22] = waKong(52, 25, 6, 5);
            //8
            sideWindowHoles[23] = waKong(59, 3, 6, 5);
            sideWindowHoles[24] = waKong(59, 15, 6, 5);
            sideWindowHoles[25] = waKong(59, 25, 6, 5);
            //9
            sideWindowHoles[26] = waKong(68, 3, 6, 5);
            sideWindowHoles[27] = waKong(68, 15, 6, 5);
            sideWindowHoles[28] = waKong(68, 25, 6, 5);
            //10
            sideWindowHoles[29] = waKong(75, 3, 6, 5);
            sideWindowHoles[30] = waKong(75, 15, 6, 5);
            sideWindowHoles[31] = waKong(75, 25, 6, 5);
            
            //11
            sideWindowHoles[32] = waKong(84, 3, 6, 5);
            sideWindowHoles[33] = waKong(84, 15, 6, 5);
            sideWindowHoles[34] = waKong(84, 25, 6, 5);

            //12
            sideWindowHoles[35] = waKong(93, 8, 6, 5);
            sideWindowHoles[36] = waKong(93, 20, 6, 5);
            sideWindowHoles[37] = waKong(93, 30, 6, 5);

            for (var k = 0; k < sideWindowHoles.length; k++) {
                var kog = sideWindowHoles[k][0];
                var kog2 = sideWindowHoles[k][2];
                var width = kog2.x - kog.x;
                var height = kog2.z - kog.z; 
                //窗
                var windowFBL = windowMaker(width, height, 4, 0.15, 0.1);
                windowFBL.rotation.z = -Math.PI / 2;
                windowFBL.rotation.x = -Math.PI / 2;
                windowFBL.position.x = 0;
                windowFBL.position.y = kog.z;
                windowFBL.position.z = kog.x;
            }
            
            var side2FaceUV = new Array(3);

            side2FaceUV[0] = new BABYLON.Vector4(7 / 15, 0, 14 / 15, 1);
            side2FaceUV[1] = new BABYLON.Vector4(14 / 15, 0, 1, 1);
            side2FaceUV[2] = new BABYLON.Vector4(0, 0, 7 / 15, 1)

            var sideWallnb2 = BABYLON.MeshBuilder.ExtrudePolygon("sideWallnb2", { shape: sideWallnb2Data, depth: 0.1, holes: sideWindowHoles, faceUV: side2FaceUV }, scene);
            sideWallnb2.rotation.z = -Math.PI / 2;
            sideWallnb2.rotation.x = -Math.PI / 2;
            sideWallnb2.position.x = 0;
            sideWallnb2.position.z = 0;
            sideWallnb2.position.y = 0;
            sideWallnb2.material = wallmat;
            
        }
        //右面墙
        var drawSideWallnb3 = function () {
            var wallmat = new BABYLON.StandardMaterial("wallmaterial", scene);
            wallmat.diffuseTexture = new BABYLON.Texture("http://i.imgur.com/2b1C7UH.jpg", scene);

            var width = 100;
            var height = 50;
            var sideWallnb3Data = [
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(width, 0, 0),
                new BABYLON.Vector3(width, 0, height),
                new BABYLON.Vector3(0, 0, height),
            ];
             
            var coun = 3;
            var i = 0;
            //Holes in XoZ plane
            var sideWindowHoles = [];
            sideWindowHoles[i++] = waKong(coun, 8, 6, 5);
            sideWindowHoles[i++] = waKong(coun, 25, 6, 5);
            sideWindowHoles[i++] = waKong(coun, 40, 6, 5);
            //sideWindowHoles[i++] = waKong(coun, 40, 6, 5);
            coun += 6 + 3; 
            sideWindowHoles[i++] = waKong(coun, 8, 6, 3);
            sideWindowHoles[i++] = waKong(coun, 20, 6, 3);
            sideWindowHoles[i++] = waKong(coun, 30, 6, 3);
            sideWindowHoles[i++] = waKong(coun, 40, 6, 3);
             
            for (var k = 0; k < 5; k++) {
                coun += 6 + 3; 
                sideWindowHoles[i++] = waKong(coun, 3, 6, 5);
                sideWindowHoles[i++] = waKong(coun, 15, 6, 5);
                sideWindowHoles[i++] = waKong(coun, 25, 6, 5);
                sideWindowHoles[i++] = waKong(coun, 35, 6, 5);
                //2
                coun += 6 + 1;
                sideWindowHoles[i++] = waKong(coun, 3, 6, 5);
                sideWindowHoles[i++] = waKong(coun, 15, 6, 5);
                sideWindowHoles[i++] = waKong(coun, 25, 6, 5);
                sideWindowHoles[i++] = waKong(coun, 35, 6, 5);
            }
            for (var k = 0; k < sideWindowHoles.length; k++) {
                var kog = sideWindowHoles[k][0];
                var kog2 = sideWindowHoles[k][2];
                var width = kog2.x - kog.x;
                var height = kog2.z - kog.z;
                if (kog.z == 0) {
                    continue;
                }
                //窗
                var windowFBL = windowMaker(width, height, 4, 0.15, 0.1);
                windowFBL.rotation.z = -Math.PI / 2;
                windowFBL.rotation.x = -Math.PI / 2;
                windowFBL.position.x = 115.1;
                windowFBL.position.y = kog.z;
                windowFBL.position.z = kog.x;
            } 
             
            var side3FaceUV = new Array(3);

            side3FaceUV[0] = new BABYLON.Vector4(0, 0, 7 / 15, 1);
            side3FaceUV[1] = new BABYLON.Vector4(14 / 15, 0, 1, 1);
            side3FaceUV[2] = new BABYLON.Vector4(7 / 15, 0, 14 / 15, 1);

            var sideWallnb3 = BABYLON.MeshBuilder.ExtrudePolygon("sideWallnb3", { shape: sideWallnb3Data, depth: 0.1, holes: sideWindowHoles, faceUV: side3FaceUV }, scene);
            sideWallnb3.rotation.z = -Math.PI / 2;
            sideWallnb3.rotation.x = -Math.PI / 2;
            sideWallnb3.position.x = 115;
            sideWallnb3.position.z = 0;
            sideWallnb3.position.y = 0;

            sideWallnb3.material = wallmat;
        }
        //画全图
        var Test = function (scene) {
            drawFrontWall();
            drawRearWall();
            drawFloor();
            drawSideWallnb2();
            drawSideWallnb3();
        }


    </script>
</body>
</html>

 

qq373591361
关注
专栏目录
用 Babylon.js 实现震撼的爆炸效果：全面解析与代码示例
嘿嘿，大部分都是前端三维开发的时候遇到的问题，顺手解决了，如果你也遇到了和我一样的问题，希望我的文章可以帮到你
10-09 557
中实现震撼的爆炸效果，从应用场景到实现原理，再到详细的代码示例，帮助开发者全面了解该技术的实现过程。随着技术的不断发展，未来的 3D 应用将能够实现更复杂和真实的效果，期待各位开发者在实际项目中不断探索和应用。方法给了模型的root随机的位置，那是因为模型给过来的时候用的是自身的中心点，需要用统一的中心点，所以给了随机效果，在实际应用的时候可以去掉。此示例包括加载模型、设置爆炸效果，以及在渲染循环中更新模型的位置。实现令人惊叹的爆炸效果，涵盖其应用场景、实现原理及详细的代码示例，帮助开发者掌握这一技术。
BabylonNative：使用Babylon.js JavaScript框架的功能构建跨平台的本机应用程序
01-28
该项目的目标是允许支持Web上Babylon.js应用程序的同一JavaScript在Windows，macOS，iOS，Android和Linux上的本机应用程序中相同地工作。 请查看和以获取更多信息。 注意：该项目正在大量开发中，并且当前并非...
room-finder:使用Babylon.JS渲染房间查找应用程序的SharePoint框架（spfx）Web部件
05-17
这到底是什么？ 所以，我有这个远见... 看完2018年SharePoint大会的演示后，我认为该门槛很低，我可以自己构建一个比我更有用的东西。 我每天都在玩Babylon.js，并与SharePoint Web Parts一起工作，想知道将3D Babylon驱动的应用程序嵌入到SharePoint Web部件中将需要什么。 这就是这个仓库的全部意义。 在第一个版本中，我能够在大约30分钟的时间内将一个简单的Babylon应用程序嵌入到Web部件中。 我的长期目标是使用可点击的区域渲染我公司的办公室的3D模型，以查看办公室中会议室的可用性。
Babylon.js 入门 - 第 2 章 - 建造村庄(2)
能带孩子会做饭
03-11 6223
Babylon.js 入门 - 第 2 章 - 建造村庄(2) Babylon.js是一款基于WebGL的3D图形引擎,也是目前处于该领域世界领先水平的引擎之一。 现在我们迈出了一大步，因为我们把这个简单的盒子变成了一两个房子。由于房屋不是漂浮在空中的，所以我们需要创建一些地面，然后看看我们如何定位、旋转和重新调整房屋大小并将其放置在地面上。由于空白盒子看起来太过空白，我们将添加纹理以使其具有窗户和门的外观。为了不让雨淋到屋内，我们添加一个屋顶网格并将两个网格合并在一起。当然，几座房子并不能构成一个村庄，因
Babylon.js 入门 - 第 2 章 - 建造村庄(1)
能带孩子会做饭
02-16 1112
Babylon.js 入门 - 第 2 章 - 建造村庄(1) Babylon.js是一款基于WebGL的3D图形引擎,也是目前处于该领域世界领先水平的引擎之一。 现在迈出了一大步，因为我们把这个简单的盒子变成了一两个房子。 由于房屋不漂浮，我们将创建一些地面，然后看看我们如何定位、旋转和重新调整房屋大小并将其放置在地面上。 由于空白盒子看起来就像一个空白盒子，我们将添加纹理以使其具有窗户和门的外观。 为了不下雨，让我们添加一个屋顶网格并将两个网格合并在一起。
vue3 + Babylon.js 构建Web 3D场景
通达的博客
02-12 2552
vue3 + Babylon.js 构建web 3D场景。
Cesium 与 Babylon.js 可视化 构建房子
haibalai2009的博客
01-08 363
cesium
Babylon.js：Babylon.js是功能强大，美观，简单且开放的游戏和渲染引擎，打包在友好JavaScript框架中
01-28
使用我们的直接使用Babylon.js API。 它还包含许多示例以学习如何使用它。 任何问题？ 这是我们的官方。 CDN 可以在上找到其他参考，其中xxx是您可以在/ dist文件夹中找到的文件夹结构，例如 对于预览版本，请...
Babylon.JS开发基础英文版 Babylon.JS.Essentials包含示例代码
12-28
Babylon.JS是一款强大的开源JavaScript库，专为构建3D游戏和应用程序而设计。它利用WebGL技术，使得在浏览器中实现高质量的三维图形变得轻而易举。本资源"babylon.js开发基础英文版 - Babylon.JS.Essentials"提供了...
Exporters:Babylon.js和gltf文件格式的导出器
05-10
Babylon.js出口商 在此处获取适用于我们出口商的最新安装程序： : 有关3ds Max导出器的文档，请参见： : 从3ds Max导出到glTF的文档位于此处： ://doc.babylonjs.com/resources/3dsmax_to_gltf 有关Maya导出器的...
babylon-navigation-mesh:使用BABYLON.js在导航网格上移动的库
05-22
使用BABYLON.js在网格上导航的工具包。 在很大程度上受 for ThreeJS的启发。 Babylon-navigation-mesh是AI代理的探路者。 它使用A star和Funnel算法计算导航网格上的路径。 用法 将npm包到您的项目中： npm ...
babylonjs 官方虚拟展厅.glb模型资源
10-27
方便直接把.glb 丢到官方在线沙盒查看，或者是本地加载配合inspector调试。 如果不想下载，可以查看官方在线运行地址： 模型为两个展厅和lightmap二套uv技术展示 https://www.babylonjs-playground.com/#4AJ16M#5 https://www.babylonjs.com/demos/glowingespilit/ https://vernissage.phire.de/
jquery触摸滑动模块jquery.pep.js
06-12
效果描述： 一个非常不错的jquery插件——jquery.pep.js，支持拖拽等各种方式 附件提供了多种案例，希望总有一种是适合你的 使用方法这不再赘述
three.js 画的3D房间布局，可用Enter件控制开门，关门。
09-20
在支持webgl的浏览器上打开room.html,即可看到效果图。如果加载不出来，打开Chrome快捷方式的属性中设置：右击Chrome浏览器快捷方式， 选择“属性”，在“目标”中加上"--allow-file-access-from-files"，注意前面有个空格，重启Chrome浏览器便可。three.js 画的3D房间布局，可用Enter件控制开门，关门。
用babylon.js画房子的里面，第一层
July.Code的网络笔记
11-16 1481
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html" charset="utf-8" /&gt; &lt;title&gt;Babylon - Getting Started&lt;/title
babylon.js入门基础【创建babylon场景需要什么】【绘制球】【绘制正方形】【绘制平面】
老段的CSDN的博客
04-07 1301
创建场景七大步
Babylon.js 7.0开发入门教程
最新发布
新缸中之脑
05-07 2801
Babylon.js 是一个功能强大的开源 3D 引擎，能够使用 JavaScript 渲染交互式 3D 和 2D 图形。它是为 Web 甚至 VR 创建游戏、演示、可视化和其他 3D 应用程序的绝佳选择。Babylon.js最新版本是7.0。Babylon.js 是免费、开源和跨平台的，是 Unity 和 Unreal Engine 等专有 3D 引擎的绝佳替代品。
Babylon.js中使用ExtrudePolygon时报错“earcut is not defined“
小龙人的博客
02-05 386
Babylon.js中使用ExtrudePolygon时遇到"earcut is not defined"错误。解决此问题需要确保正确导入earcut库并检查版本兼容性。
Babylonjs 基础教程与填坑①入门常用网址
热门推荐
04-12 1万+
入坑babylon.js一段时间了，现在项目上线了，整理一下基础的入坑姿势和部分填坑技巧，记录一下遇到过的一些问题。 babylonjs大法好，在webgl领域，国内社区活跃度还比不过three，入坑时好多东西只能自己研究。 目录 先说总结： 以下网址中，只是我先做一下简单概括笼统的整合网址链接，具体拓展放在之后章节（大概不咕） 常用网址（国内）4.1版本 非最新版本 有playground基本表示就有源码了 这点非常非常关键，babylon这点比three好非常多 可以在线运行和ins.
Babylon.js入门指南：3D Web应用开发宝典
这本书旨在帮助读者理解和掌握如何使用Babylon.js开发3D Web应用程序和视频游戏，特别适合初学者入门。作者通过详尽的教程和实例，引导读者逐步了解Babylon.js的基础概念、API和工作原理，让读者能够快速上手并构建...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值