Babylon.js基础场景搭建

  • 路由
  • 前言
  • 最终实现效果
  • 本文实现效果
  • 技术选型
    • 1.前端
    • 2.后端
  • 完整代码
  • 代码分解
    • 0.npm安装相关依赖
    • 1.引入模块
    • 2.场景初始化
    • 3.ArcRotateCamera 相机初始化
    • 4.灯光初始化
    • 5.地面初始化
      • 5-1. 绿地
      • 5-2.网格地面
    • 6.正方体物体初始化
    • 7.天空盒初始化
  • 后续计划
    • Babylon.js
    • Blockly
  • 开源项目GitHub链接
  • 资源下载链接
  • 你的点赞是我继续编写的动力

路由

  • 下一篇内容:Vue实现图形化积木式编程(二) ---- Babylon.js加载模型到场景中

前言

前段时间想要做一个web端的图形化积木式编程（类似少儿编程）的案例，网上冲浪了一圈又一圈，终于技术选型好，然后代码一顿敲，终于出来了一个雏形。

TIPS：该案例设计主要参考iRobot Coding,只用做学习用途，侵删。

https://code.irobot.com/#/

最终实现效果

本文实现效果

  • 可移动相机视角查看3d模型

技术选型

1.前端

  • vuetify - 基于vue的界面框架

  • babylon.js - 3d图形引擎

  • ammo.js - 物理引擎库

  • blockly - 模块化编程工具

2.后端

  • ThinkJS - 基于Node.js的后端框架

完整代码

  • 一个完整的vue文件
<template><div style="height: 100%;width: 100%;"><div><canvas id="renderCanvas"></canvas></div></div>
</template><script>
import * as BABYLON from 'babylonjs';
import * as BABYLON_MATERAIAL from "babylonjs-materials"function loadScene() {//获取到renderCanvas这个元素var canvas = document.getElementById("renderCanvas");//初始化引擎var engine = new BABYLON.Engine(canvas, true);//初始化场景var scene = new BABYLON.Scene(engine);//注册一个渲染循环来重复渲染场景engine.runRenderLoop(function () {scene.render();});//浏览器窗口变化时监听window.addEventListener("resize", function () {engine.resize();});//相机初始化var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 5, new BABYLON.Vector3(0, 0, 10), scene);camera.setPosition(new BABYLON.Vector3(20, 200, 400));//相机角度限制camera.upperBetaLimit = 1.5;//最大z轴旋转角度差不多45度俯瞰camera.lowerRadiusLimit = 50;//最小缩小比例camera.upperRadiusLimit = 1500;//最大放大比例//变焦速度camera.wheelPrecision = 1; //电脑滚轮速度 越小灵敏度越高camera.pinchPrecision = 20; //手机放大缩小速度 越小灵敏度越高scene.activeCamera.panningSensibility = 100;//右键平移灵敏度// 将相机和画布关联camera.attachControl(canvas, true);//灯光初始化var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 10, 0), scene);//设置高光颜色light.specular = new BABYLON.Color3(0, 0, 0);//设置灯光强度light.intensity = 1// 绿地初始化var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);materialPlane.diffuseColor = new BABYLON.Color3(152 / 255.0, 209 / 255.0, 115 / 255.0)materialPlane.backFaceCulling = false;materialPlane.freeze()var plane = BABYLON.MeshBuilder.CreateDisc("ground", {radius: 3000}, scene);plane.rotation.x = Math.PI / 2;plane.material = materialPlane;plane.position.y = -0.1;plane.freezeWorldMatrix()//网格地板初始化const groundSide = 144;var ground = BABYLON.Mesh.CreateGround("ground", groundSide, groundSide, 1, scene, true);var groundMaterial = new BABYLON_MATERAIAL.GridMaterial("grid", scene);groundMaterial.mainColor = BABYLON.Color3.White();//底板颜色groundMaterial.alpha = 1;//透明度const gridLineGray = 0.95;groundMaterial.lineColor = new BABYLON.Color3(gridLineGray, gridLineGray, gridLineGray);groundMaterial.backFaceCulling = true; // 可看到背面//大网格间距groundMaterial.majorUnitFrequency = 16;//小网格间距groundMaterial.minorUnitVisibility = 0;const gridOffset = 8; // 网格偏移量groundMaterial.gridOffset = new BABYLON.Vector3(gridOffset, 0, gridOffset);groundMaterial.freeze(); // 冻结材质，优化渲染速度ground.material = groundMaterialground.freezeWorldMatrix()//正方形物体初始化var blueBox = BABYLON.Mesh.CreateBox("blue", 10, scene);var blueMat = new BABYLON.StandardMaterial("ground", scene);blueMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);blueMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);blueMat.emissiveColor = BABYLON.Color3.Blue();// blueMat.wireframe = true;//网格状blueBox.material = blueMat;//起始位置坐标blueBox.position.x = 0;blueBox.position.y = 5;blueBox.position.z = 0;//天空盒初始化var skyMaterial = new BABYLON_MATERAIAL.SkyMaterial("skyMaterial", scene);skyMaterial.inclination = 0skyMaterial.backFaceCulling = false;var skybox = BABYLON.Mesh.CreateBox("skyBox", 5000.0, scene);skybox.material = skyMaterial;
}export default {name: "test",data() {return {}},mounted() {//加载场景loadScene()},
}
</script><style scoped>
#renderCanvas {width: 680px;height: 680px;touch-action: none;z-index: 10000;border-radius: 10px;
}
</style>

代码分解

0.npm安装相关依赖

npm install babylonjs babylonjs-gui babylonjs-loaders babylonjs-materials --save
  • 安装的模块在package.json中生成
"dependencies": {{"babylonjs": "^4.2.0",//babylon核心库"babylonjs-gui": "^4.2.0",//UI界面库（按钮等）"babylonjs-loaders": "^4.2.0",//开机加载库（修改启动动画的）"babylonjs-materials": "^4.2.0"//材质库，有些材质像是SkyMaterial，babylonjs库的默认材质中是没有这个对象的
}

1.引入模块

import * as BABYLON from 'babylonjs';
import * as BABYLON_MATERAIAL from "babylonjs-materials"

2.场景初始化

  • template中
<div><canvas id="renderCanvas"></canvas>
</div>
  • css中
#renderCanvas {width: 680px;height: 680px;touch-action: none;z-index: 10000;border-radius: 10px;
}
  • js中
//获取到renderCanvas这个元素
var canvas = document.getElementById("renderCanvas");
//初始化引擎
var engine = new BABYLON.Engine(canvas, true);
//初始化场景
var scene = new BABYLON.Scene(engine);
//注册一个渲染循环来重复渲染场景
engine.runRenderLoop(function () {scene.render();
});
//浏览器窗口变化时监听
window.addEventListener("resize", function () {engine.resize();
});

3.ArcRotateCamera 相机初始化

var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 5, new BABYLON.Vector3(0,0,10), scene);
camera.setPosition(new BABYLON.Vector3(20, 200, 400));
//相机角度限制camera.upperBetaLimit = 1.5;//最大z轴旋转角度差不多45度俯瞰
camera.lowerRadiusLimit = 50;//最小缩小比例
camera.upperRadiusLimit = 1500;//最大放大比例
//变焦速度
camera.wheelPrecision = 1; //电脑滚轮速度 越小灵敏度越高
camera.pinchPrecision = 20; //手机放大缩小速度 越小灵敏度越高
scene.activeCamera.panningSensibility = 100;//右键平移灵敏度
// 将相机和画布关联
camera.attachControl(canvas, true);

4.灯光初始化

//设置半球光
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 10, 0), scene);
//设置高光颜色
light.specular = new BABYLON.Color3(0, 0, 0);
//设置灯光强度
light.intensity = 1

5.地面初始化

5-1. 绿地

// 添加地面
var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
materialPlane.diffuseColor = new BABYLON.Color3(152 / 255.0, 209 / 255.0, 115 / 255.0)
materialPlane.backFaceCulling = false;//Allways show the front and the back of an element
materialPlane.freeze()
var plane = BABYLON.MeshBuilder.CreateDisc("ground", {radius: 6000}, scene);
plane.rotation.x = Math.PI / 2;
plane.material = materialPlane;
plane.position.y = -0.01;
plane.freezeWorldMatrix()

5-2.网格地面

//地板const groundSide = 144;var ground = BABYLON.Mesh.CreateGround("ground", groundSide, groundSide, 1, scene, true);var groundMaterial = new BABYLON_MATERAIAL.GridMaterial("grid", scene);groundMaterial.freeze(); // Optimization.groundMaterial.mainColor = BABYLON.Color3.White();//底板颜色groundMaterial.alpha = 1;//透明度const gridLineGray = 0.95;groundMaterial.lineColor = new BABYLON.Color3(gridLineGray, gridLineGray, gridLineGray);groundMaterial.backFaceCulling = true; // Change this if the back of the pad needs to be visible.//大网格间距groundMaterial.majorUnitFrequency = 16;//小网格间距groundMaterial.minorUnitVisibility = 0;const gridOffset = 0; // This makes the grid cells to be aligned with the pad's borders.groundMaterial.gridOffset = new BABYLON.Vector3(gridOffset, 0, gridOffset);ground.material = groundMaterialground.freezeWorldMatrix()
  • TIPS：很多同学会发现，将两个平面叠加时，移动相机视角，会出现虫影现象

  • 优化方案
//1、冻结材质和模型
//绿地
//设置为静态网格,freezeWorldMatrix之后，改变postion、rotation是无效的
plane.freezeWorldMatrix()
//将材质冻结
plane.material.freeze()
//网格
ground.freezeWorldMatrix()
ground.material.freeze()
//2、增大两个物体的y轴间距
plane.position.y = -0.1

6.正方体物体初始化

 //添加物体
var blueBox = BABYLON.Mesh.CreateBox("blue", 10, scene);
var blueMat = new BABYLON.StandardMaterial("ground", scene);
blueMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
blueMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
blueMat.emissiveColor = BABYLON.Color3.Blue();
// blueMat.wireframe = true;//网格状
blueBox.material = blueMat;
//起始位置坐标
blueBox.position.x = 0;
blueBox.position.y = 5;
blueBox.position.z = 0;

7.天空盒初始化

//天空盒初始化
var skyMaterial = new BABYLON_MATERAIAL.SkyMaterial("skyMaterial", scene);
skyMaterial.inclination = 0
skyMaterial.backFaceCulling = false;
var skybox = BABYLON.Mesh.CreateBox("skyBox", 5000.0, scene);
skybox.material = skyMaterial;

后续计划

Babylon.js

  • 加载网络模型
  • 点击移动物体
  • 自定义启动界面
  • 初始化摄像机动画
  • 物体重力效果
  • babylonjs-gui 按钮实现
  • babylonjs+ammojs 碰撞体实现
  • 将3d界面放入可拖动窗口中

Blockly

  • 入门使用blockly
  • 自定义block块
  • blockly第三方组件使用
  • 接入js-interpreter，步骤运行block块
  • …(想到啥写啥)

开源项目GitHub链接

https://github.com/Wenbile/Child-Programming-Web

资源下载链接

  • Vue前端源码
  • ThinkJS后端源码

你的点赞是我继续编写的动力

Vue实现图形化积木式编程（一）相关推荐

  1. Vue实现图形化积木式编程(十二)

    执行Blockly生成代码 路由 下一篇 历史回顾 Babylon.js部分 Blockly部分 前言 最终实现效果 本文内容 实现思路 问题分析 问题 原因 不优雅解决 优雅解决 完整代码 后续计划 ...

  2. Vue实现图形化积木式编程(十三)

    步骤运行代码块高亮 路由 历史回顾 Babylon.js部分 Blockly部分 前言 最终实现效果 本文内容 实现 1. 安装依赖 2. 简化语法 3. 引入js解析器 4. 运行代码 5. 加入高 ...

  3. Vue实现图形化积木式编程(十)

    Blockly自定义块 路由 下一篇 历史回顾 Babylon.js部分 Blockly部分 前言 最终实现效果 本文实现效果 完整代码 代码分解 0.代码块前置知识 0.1 汉化 0.2 预置块 0 ...

  4. Vue实现图形化积木式编程(十一)

    Blockly插件使用 路由 下一篇 历史回顾 Babylon.js部分 Blockly部分 前言 最终实现效果 本文内容 安装 使用 后续计划 开源项目GitHub链接 资源下载链接 你的点赞是我继 ...

  5. Vue实现图形化积木式编程(二)

    Babylon.js加载模型到场景中 路由 下一篇 历史回顾 前言 最终实现效果 本文实现效果 完整代码 操作分解(Babylon.js模型格式转换与导入) 0.在开源模型网上下载一个模型/自己制作一 ...

  6. 原创教程：下载和安装“图形化积木Python编程”海龟编辑器

    一.简介 Python编辑器是一款界面简单充满童趣的Python编程软件,该软件普遍适用于低龄化用户,帮助培养用户对代码编程的兴趣:众所周知编写代码是比较枯燥的事情,所以学起来更是如此,为解决这一难题 ...

  7. python积木式编程_TurnipBit—MicroPython开发板：从积木式编程语言开始学作小小创客...

    编程.建模.制做动画和游戏--这些当初咱们默认只有成年人玩得转的事情,如今早已经被无数小孩子给颠覆甚至玩出新境界了.热爱科技和动手的"创客"(Maker)如今在全世界都煊赫一时.今 ...

  8. 竞赛无人机搭积木式编程——以2022年TI电赛送货无人机一等奖复现为例学习(7月B题)

    在学习本教程前,请确保已经学习了前4讲中无人机相关坐标系知识.基础飞行控制函数.激光雷达SLAM定位条件下的室内定点控制.自动飞行支持函数.导航控制函数等入门阶段的先导教程. 同时用户在做二次开发自定 ...

  9. python积木式编程_【发现教育版亮点之美】3D One还能这么玩：“趣味编程”建模让你脑洞大开...

    原标题:[发现教育版亮点之美]3D One还能这么玩:"趣味编程"建模让你脑洞大开 "[有奖征文]发现3D One教育版亮点之美"教育版功能文章征集活动已经告一 ...

最新文章

  1. 小型星形网络结构设计示例
  2. 2014年全国计算机等级一级考试复习资料,2014年全国计算机等级一级考试复习资料..doc...
  3. protobuf相关：反射、rmi
  4. DirectX11 With Windows SDK--01 DirectX11初始化
  5. 看得见的数据结构Android版之数组表(数据结构篇)
  6. 科大星云诗社动态20201206
  7. 【MyBatis框架】查询缓存-二级缓存原理
  8. mysql ssl jdbc_【MySQLSSLJAVA】关于MySQL开启SSL后，jdbc的配置
  9. cron计划任务、权限和归属 、 使用LDAP认证 、 家目录漫游
  10. 异常记录---Error creating bean with name ‘sqlSessionFactory‘
  11. c语言什么是关键字,c语言关键字是什么
  12. 关于计算机教室的寄语,教师寄语大全（精选90句）
  13. NLP常见词/典汇总
  14. c语言蚂蚁搬,关于蚂蚁搬食的作文
  15. Centos7安装网易云播放器
  16. Latex论文中用到的花体字
  17. 如何在ESXi中启用巨型帧支持？
  18. 我是如何学习Java的~标志寄存器及其应用
  19. 【ML4CO论文精读】用于组合优化的机器学习：方法论之旅(Yoshua Bengio, 2021)
  20. 遵循第一性原理：翻越思维的墙

热门文章

  1. Volar - vue终极开发神器！
  2. Proteus8.12 基于51单片机的家用供暖系统
  3. 阿里云SLB负载均衡
  4. 我的世界显示服务器领地指令,我的世界领地指令介绍 我的世界领地指令怎么设置...
  5. rust嵌入式key/value数据库
  6. 情绪：感觉、思考和沟通（无助益情绪通常由哪些非理性思考带来的、以及怎么减少这种无助益情绪...
  7. 2023年计算机毕设选题推荐
  8. 电控测试团队建设回顾
  9. 比较时间并计算时间差
  10. Python怎么计算时间差（含代码实例）