初识babylon.js

最新推荐文章于 2024-05-07 08:53:02 发布

Only_city

最新推荐文章于 2024-05-07 08:53:02 发布

阅读量628

点赞数 1

分类专栏： babylon.js 文章标签：前端 3d 数据可视化

本文链接：https://blog.csdn.net/weixin_63007851/article/details/131780972

版权

babylon.js 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

鉴于国内babylonjs资料稀少，无法形成系统性的学习，故在学习过程中记录下学习过程，一个是巩固自身，一边与大家分享babylonjs的学习经验，由于官方没有中文文档，只能使用翻译器进行学习，有些翻译可能会有问题，望大家见谅。

序章:初识babylon.js

babylon.js与Three.js一样，最重要的几个组成部分都是渲染器，场景，相机，灯光，物体，由这几个重要的组成部分可以实现一个简单的小场景，下面将使用官方实例来帮助大家接触babylon.js.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
        }

        #box {
            display: block;
            width: 100%;
            height: 100%;
        }

        .btn {
            width: 70px;
            height: 30px;
            background-color: #ccc;
            z-index: 999;
            position: absolute;
            top: 0;
        }
    </style>
</head>

<body>
    <canvas id="box"></canvas>
    <div class="btn">取消高亮</div>

</body>
   <!-- 引入babylonjs -->
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <!-- 引入babylonjs加载器 -->
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- 引入触摸屏控制js -->
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
<script>
    // 获取canvas元素
    let canvas = document.getElementById("box");
    // 创建渲染引擎
    let engine = new BABYLON.Engine(canvas, true);
    // 创建场景
    let createScene = function () {
        // 创建场景
        let scene = new BABYLON.Scene(engine);
        // 创建相机
        let camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 0, BABYLON.Vector3.Zero(), scene);
        // 设置相机位置
        camera.setPosition(new BABYLON.Vector3(0, 0, -10));
        // 相机绑定到canvas
        camera.attachControl(canvas, true);
        // 创建光源 
        // 创建光源语法 let light = new BABYLON.光源类型(名称, 方向, 场景);
        let light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
        // 创建盒子
        // 物体创建语法 let shape = BABYLON.MeshBuilder.Create Shape(名称, 配置项, 场景);
        let box = BABYLON.MeshBuilder.CreateBox("box", {
            size: 2,
        }, scene);
        // 设置物体位置
        // box.position.y = 1;

        // 设置物体位置
        box.position = new BABYLON.Vector3(0, 1, 0);

        // 创建地面
        let ground = BABYLON.MeshBuilder.CreateGround("ground", {
            width: 6,
            height: 6
        }, scene);

        // 创建天空盒
        var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 1000.0 }, scene);
        var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
        skyboxMaterial.backFaceCulling = false;
        skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        skybox.material = skyboxMaterial;

        // 高亮显示
        let hl = new BABYLON.HighlightLayer("hl1", scene);
        hl.addMesh(box, BABYLON.Color3.Green());

        // 取消高亮
        let flag = false;
        let btn = document.querySelector(".btn");
        btn.onclick = function () {
            flag = !flag;
            if (flag) {
                hl.addMesh(box, BABYLON.Color3.Green());
                return;
            } else {
                hl.removeMesh(box);
            }
        }
        return scene;
    }
    // 渲染场景
    let scene = createScene();
    engine.runRenderLoop(function () {
        scene.render();
    });
    // 监听窗口变化，改变渲染尺寸
    window.addEventListener("resize", function () {
        engine.resize();
    });


</script>

</html>

效果图如下：