babylon 初试
出于对web端3D技术的对比,以及WebGL的发展现状和WebGPU的发展前景,我觉得有必要涉猎一下babylon.js了。
可以参考一下下列文章:
1⃣️下一代web端图形接口现状与前景:https://zhuanlan.zhihu.com/p/59691803
今天就先在react里面测试一下官方demo:
demo的核心代码如下:
import {MiddleComponent,React} from '../../../utils/MiddleComponent'
import * as BABYLON from 'babylonjs'; export class babylon1 extends MiddleComponent {
constructor(props){
} render() {
return (
<canvas id="renderCanvas" style={{width:'100%',height:'100%',position:'relative'}}></canvas>
);
} componentDidMount() {
this.init();
} init = ()=> {
// Get the canvas DOM element
var canvas = document.getElementById('renderCanvas');
// Load the 3D engine
var engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});
// Create a basic BJS Scene object
var scene = new BABYLON.Scene(engine);
// Create a FreeCamera, and set its position to {x: 0, y: 5, z: -10}
var camera = new BABYLON.ArcRotateCamera("Camera", ,,, BABYLON.Vector3.Zero(), scene);
// Target the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());
// Attach the camera to the canvas
camera.attachControl(canvas, false);
// Create a basic light, aiming 0, 1, 0 - meaning, to the sky
var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(, , ), scene);
// Create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation
var sphere = BABYLON.Mesh.CreateSphere('sphere1', , , scene, false, BABYLON.Mesh.FRONTSIDE);
// Move the sphere upward 1/2 of its height
sphere.position.y = ;
// Create a built-in "ground" shape; its constructor takes 6 params : name, width, height, subdivision, scene, updatable
var ground = BABYLON.Mesh.CreateGround('ground1', , , , scene, false);
// run the render loop
engine.runRenderLoop(function(){
scene.render();
});
// the canvas/window resize event handler
window.addEventListener('resize', function(){
engine.resize();
});
}
}
如果你接触过three.js的话,其实上述代码并没有什么值得讲解的地方,并且你也会发现babylon.js和three.js还是有一些差异的。
如果没有接触过three.js或者其他webgl类库或者引擎,那就先学习一下webgl相关知识吧。
注意:
MiddleComponent 是我自己封装的组件,你可以选择在你的react程序里继承自Component。 点击当前页面右上角箭头,有我自制的babylon相关api文档
babylon 初试的更多相关文章
- Egret3D 研究报告(一)初试
了解的朋友应该知道我最近一直都在鼓吹webgl. 今天有一点时间,加了一个Egret3D的群,就开始了这个坑. 耳听为虚,眼见为实.让我们荡起双桨,一起去刷一下egret 打开姿势 至于以什么姿势打开 ...
- Gate Of Babylon bzoj 1272
Gate Of Babylon (1s 128MB) babylon [问题描述] [输入格式] [输出格式] [样例输入] 2 1 10 13 3 [样例输出] 12 [样例说明] [数据范围] 题 ...
- caffe初试(一)happynear的caffe-windows版本的配置及遇到的问题
之前已经配置过一次caffe环境了: Caffe初试(一)win7_64bit+VS2013+Opencv2.4.10+CUDA6.5配置Caffe环境 但其中也提到,编译时,用到了cuda6.5,但 ...
- 网页3D引擎“Babylon.JS”入门教程翻译总结
使用三个月的业余时间把官方教程的入门部分译为中文并上传到github,在下一步编程前做一个总结. 历程: 最早接触游戏编程是在大三下学期,用汇编语言和实验室里的单片机.触摸屏.电机(提供声效)编的打地 ...
- 初试Nodejs——使用keystonejs创建博客网站2(修改模板)
上一篇(初试Nodejs——使用keystonejs创建博客网站1(安装keystonejs))讲了keystonejs的安装.安装完成后,已经具备了基本的功能,我们需要对页面进行初步修改,比如,增加 ...
- 项目中初试PHP单元测试
只能叫初试,前面虽然做了一些PHPUnit与团队所用框架的整合,但在整个团队还没有人可以主动推动这个事情,而作为Leader最重要的一种能力应该是"让正确的事情发生",所以今天开始 ...
- UVa 437 The Tower of Babylon(经典动态规划)
传送门 Description Perhaps you have heard of the legend of the Tower of Babylon. Nowadays many details ...
- VPS -Digital Ocean -初试以及VPN的搭建
首先恭喜你找到这篇博客,它会带你走出困境. 题外话(请忽略):一直以来想搞一个VPS,终于在自己的刺激下试了一下Digital Ocean,还没有使用很长时间不做太多评论,唯一给我的感觉是各种操作还算 ...
- 初试微信小程序
2016年11月3日,微信小程序终于公测了,大家可以正式开发了.早在这之前,应公司要求,和同事就早早的试了一下微信小程序的开发,特此记录一下: 微信官方小程序文档:https://mp.weixin. ...
随机推荐
- JS 时间差计算 XX秒前、XX小时前、XX天前
//时间差 function GetTime(time) {//di作为一个变量传进来 //如果时间格式是正确的,那下面这一步转化时间格式就可以不用了 var dateBegin = new Date ...
- Hive的JDBC连接
首相要安装好hive 1.首先修改配置文件文件为hive 路径下的 conf/hive-sit.xml 将内容增加 <property> <name>hive.server2 ...
- Java日期工具类DateUtils详解(转)
jar包 appache下的 common-lang3 一. 对指定的日期新增年.月.周.日.小时.分钟.秒.毫秒 public static Date addDays(Date date, int ...
- ubuntu服务器常用命令
1.查看系统版本 cat /etc/issue cat /etc/lsb-release 2.查看cpu lscpu 3.查看内存 free -m 4.查看硬盘大小 fdisk -l |grep Di ...
- Mybatis的mapper接口在Spring中实例化过程
在spring中使用mybatis时一般有下面的配置 <bean id="mapperScannerConfigurer" class="org.mybatis.s ...
- Luogu P1903 [国家集训队]数颜色 or 维护队列
标准的带修莫队...咕到了现在$qwq$ 莫队是对询问排序来优化复杂度的(不带修就是对询问区间$[l,r]$排序).. 那么现在带修了,我们再可以维护一个时间维度$tm$:对于每个询问,每次回答前先检 ...
- 016_linuxC++之_多重继承
(一)代码 #include <iostream> #include <string.h> #include <unistd.h> using namespace ...
- tomcat使用实践三种运行模式之apr
tomcat有三种运行模式 nio,bio,apr bio是阻塞式IO操作,使用的是传统的java i/o处理方式,对于每一个请求都要创建一个线程来进行处理,所以开销较大不适合处理高并发的场景 nio ...
- HDU6513/CCPC2017--A Secret(KMP)
A Secret Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 256000/256000 K (Java/Others)Total ...
- HTML语义化是什么?为什么要语义化?
HTML语义化HTML的语义化总结为: 用最恰当的标签来标记内容. 该如何理解呢?比如需要加入一个标题,这个标题的字体比正文的要大写,还要加粗.能够实现这种效果的方法有很多,比如用CSS样式进行渲染. ...