BabylonJS入门教程和开发实例

带代码的详细注释

webgl, babylon.js

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 9159
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

window.addEventListener('DOMContentLoaded', function() {
    // 我们的渲染代码  
    var canvas = document.getElementById('renderCanvas');
    var engine = new BABYLON.Engine(canvas, true);
    var createScene = function() {
        // 创建一个基本的Scene对象，用来容纳所有其他对象  
        var scene = new BABYLON.Scene(engine);

// 创建一个相机，设置其位置为(x:0, y:5, z:-10)  
        var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);

// 相机聚焦在场景原点位置  
        camera.setTarget(BABYLON.Vector3.Zero());

// 使得我们可以控制相机拍摄角度，和three.js中的OrbitsControl效果类似，但简单得多  
        camera.attachControl(canvas, false);

// 创建一个半球形光源,朝向为天空  
        var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);

// 创建一个内置的“球”体；其构造函数的参数：名称、宽度、深度、精度，场景，其中精度表示表面细分数。  
        var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

// 设置球体位置，使其位于平面之上  
        sphere.position.y = 1;

// 创建一个内置的“地面”形状；其构造函数的5个参数和球体一样  
        var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

return scene;
    }
    var scene = createScene();
    engine.runRenderLoop(function() {
        scene.render();
    });

});

编译

CSS

HTML

带代码的详细注释

webgl, babylon.js

编辑器支持Emmet

快捷键

带代码的详细注释

webgl, babylon.js

使用BabylonJS（HTML5 WebGL）实现的刺客信条海盗网页游戏

使用WebAssembly（wasm）和Unity WebGL实现的FPS射击游戏：愤怒的机器人（AngryBots）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：