使用Babylon.js实现的3D台球桌

本例可以用来学习Babylon.js的基础知识。Babylon.js是一款WebGL开发框架。

babylon, ball, table

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.querySelector("canvas");
var engine = new BABYLON.Engine(canvas, true);

var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0.2, 0.2, 0.2);

var camera = new BABYLON.FreeCamera("mainCamera", new BABYLON.Vector3(0, 5, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, false);

var light = new BABYLON.SpotLight("light", new BABYLON.Vector3(0, 14, -1), new BABYLON.Vector3(0, -1, 0), 1, 16, scene);
light.intensity = 0.9;

var sphereMaterial = new BABYLON.StandardMaterial("sphereMaterial", scene);
sphereMaterial.diffuseColor = new BABYLON.Color3(0.6, 0.2, 0.2);
sphereMaterial.specularPower = 128;

var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 2, scene);
sphere.position.y = 1;
sphere.material = sphereMaterial;

var groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
groundMaterial.diffuseColor = new BABYLON.Color3(0.1, 0.3, 0.1);

var ground = BABYLON.Mesh.CreateGround("ground", 10, 10, 2, scene);
ground.material = groundMaterial;
ground.receiveShadows = true;

var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
shadowGenerator.setDarkness(0.4);
shadowGenerator.getShadowMap().renderList.push(sphere);
shadowGenerator.useBlurVarianceShadowMap = true;
shadowGenerator.blurScale = 2;
shadowGenerator.bias = 0.01;

engine.runRenderLoop(function() {
    scene.render();
});

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

编译

CSS

HTML

本例可以用来学习Babylon.js的基础知识。Babylon.js是一款WebGL开发框架。

babylon, ball, table

编辑器支持Emmet

快捷键

本例可以用来学习Babylon.js的基础知识。Babylon.js是一款WebGL开发框架。

babylon, ball, table

使用babylon.js模拟3D草地（带渐变色）

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：