出于对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){
    super(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 初试的更多相关文章

  1. Egret3D 研究报告(一)初试

    了解的朋友应该知道我最近一直都在鼓吹webgl. 今天有一点时间,加了一个Egret3D的群,就开始了这个坑. 耳听为虚,眼见为实.让我们荡起双桨,一起去刷一下egret 打开姿势 至于以什么姿势打开 ...

  2. Gate Of Babylon bzoj 1272

    Gate Of Babylon (1s 128MB) babylon [问题描述] [输入格式] [输出格式] [样例输入] 2 1 10 13 3 [样例输出] 12 [样例说明] [数据范围] 题 ...

  3. caffe初试(一)happynear的caffe-windows版本的配置及遇到的问题

    之前已经配置过一次caffe环境了: Caffe初试(一)win7_64bit+VS2013+Opencv2.4.10+CUDA6.5配置Caffe环境 但其中也提到,编译时,用到了cuda6.5,但 ...

  4. 网页3D引擎“Babylon.JS”入门教程翻译总结

    使用三个月的业余时间把官方教程的入门部分译为中文并上传到github,在下一步编程前做一个总结. 历程: 最早接触游戏编程是在大三下学期,用汇编语言和实验室里的单片机.触摸屏.电机(提供声效)编的打地 ...

  5. 初试Nodejs——使用keystonejs创建博客网站2(修改模板)

    上一篇(初试Nodejs——使用keystonejs创建博客网站1(安装keystonejs))讲了keystonejs的安装.安装完成后,已经具备了基本的功能,我们需要对页面进行初步修改,比如,增加 ...

  6. 项目中初试PHP单元测试

    只能叫初试,前面虽然做了一些PHPUnit与团队所用框架的整合,但在整个团队还没有人可以主动推动这个事情,而作为Leader最重要的一种能力应该是"让正确的事情发生",所以今天开始 ...

  7. UVa 437 The Tower of Babylon(经典动态规划)

    传送门 Description Perhaps you have heard of the legend of the Tower of Babylon. Nowadays many details ...

  8. VPS -Digital Ocean -初试以及VPN的搭建

    首先恭喜你找到这篇博客,它会带你走出困境. 题外话(请忽略):一直以来想搞一个VPS,终于在自己的刺激下试了一下Digital Ocean,还没有使用很长时间不做太多评论,唯一给我的感觉是各种操作还算 ...

  9. 初试微信小程序

    2016年11月3日,微信小程序终于公测了,大家可以正式开发了.早在这之前,应公司要求,和同事就早早的试了一下微信小程序的开发,特此记录一下: 微信官方小程序文档:https://mp.weixin. ...

随机推荐

  1. JS 时间差计算 XX秒前、XX小时前、XX天前

    //时间差 function GetTime(time) {//di作为一个变量传进来 //如果时间格式是正确的,那下面这一步转化时间格式就可以不用了 var dateBegin = new Date ...

  2. Hive的JDBC连接

    首相要安装好hive 1.首先修改配置文件文件为hive 路径下的  conf/hive-sit.xml 将内容增加 <property> <name>hive.server2 ...

  3. Java日期工具类DateUtils详解(转)

    jar包 appache下的 common-lang3 一. 对指定的日期新增年.月.周.日.小时.分钟.秒.毫秒 public static Date addDays(Date date, int ...

  4. ubuntu服务器常用命令

    1.查看系统版本 cat /etc/issue cat /etc/lsb-release 2.查看cpu lscpu 3.查看内存 free -m 4.查看硬盘大小 fdisk -l |grep Di ...

  5. Mybatis的mapper接口在Spring中实例化过程

    在spring中使用mybatis时一般有下面的配置 <bean id="mapperScannerConfigurer" class="org.mybatis.s ...

  6. Luogu P1903 [国家集训队]数颜色 or 维护队列

    标准的带修莫队...咕到了现在$qwq$ 莫队是对询问排序来优化复杂度的(不带修就是对询问区间$[l,r]$排序).. 那么现在带修了,我们再可以维护一个时间维度$tm$:对于每个询问,每次回答前先检 ...

  7. 016_linuxC++之_多重继承

    (一)代码 #include <iostream> #include <string.h> #include <unistd.h> using namespace ...

  8. tomcat使用实践三种运行模式之apr

    tomcat有三种运行模式 nio,bio,apr bio是阻塞式IO操作,使用的是传统的java i/o处理方式,对于每一个请求都要创建一个线程来进行处理,所以开销较大不适合处理高并发的场景 nio ...

  9. HDU6513/CCPC2017--A Secret(KMP)

    A Secret Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 256000/256000 K (Java/Others)Total ...

  10. HTML语义化是什么?为什么要语义化?

    HTML语义化HTML的语义化总结为: 用最恰当的标签来标记内容. 该如何理解呢?比如需要加入一个标题,这个标题的字体比正文的要大写,还要加粗.能够实现这种效果的方法有很多,比如用CSS样式进行渲染. ...