BabylonJS创建基础几何模型的测试

使用babylon.js动态创建立方体、柱体、球体、环形等3D模型。

babylon, models, box, sphere, mesh

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas,
    engine,
    scene,
    camera,
    light,
    counter = 0;

function init() {
    canvas = document.querySelector('canvas');
    engine = new BABYLON.Engine(canvas, true);
    scene = new BABYLON.Scene(engine);
    camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 10, 20), scene);
    camera.setTarget(new BABYLON.Vector3(0, 0, 0));
    camera.attachControl(canvas);
    //camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
    light = new BABYLON.PointLight('light', new BABYLON.Vector3(0, 100, 100), scene);

var sphere = BABYLON.Mesh.CreateSphere('sphere', 10, 1, scene);
    sphere.position = new BABYLON.Vector3(-5, 3, 0);

var box = BABYLON.Mesh.CreateBox('box', 2, scene);
    box.position = new BABYLON.Vector3(5, 3, 0);

var plane = BABYLON.Mesh.CreatePlane('plane', 10, scene);
    plane.position = new BABYLON.Vector3(0, -2, -50);
    plane.rotation.y = Math.PI;

var cylinder = BABYLON.Mesh.CreateCylinder('cylinder', 3, 3, 3, 12, scene, false);
    cylinder.position = new BABYLON.Vector3(0, -3, 0);

var torus = BABYLON.Mesh.CreateTorus('torus', 5, 1, 10, scene, false);
    torus.position = new BABYLON.Vector3(0, 2, 0);

engine.runRenderLoop(function() {
        counter += 0.1;

torus.rotation.x += 0.01;
        torus.rotation.y += 0.01;

plane.rotation.z += 0.01;

sphere.position.y += Math.sin(counter) / 10;

box.rotation.x += 0.01;
        box.rotation.y += 0.01;

cylinder.rotation.z += Math.sin(counter) / 10;
        cylinder.rotation.x += Math.sin(counter) / 10;

scene.render();
    });

window.addEventListener('resize', function() {
        engine.resize();
    });
}

document.addEventListener('DOMContentLoaded', function() {
    if (BABYLON.Engine.isSupported()) {
        init();
    }
}, false);

编译

CSS

HTML

使用babylon.js动态创建立方体、柱体、球体、环形等3D模型。

babylon, models, box, sphere, mesh

编辑器支持Emmet

快捷键

使用babylon.js动态创建立方体、柱体、球体、环形等3D模型。

babylon, models, box, sphere, mesh

Babylon.js实例学习：创建基础材料和阴影

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：