Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
bbb = {
// A shorthand to get the current width.
const getWidth = () => document.body.clientWidth;
const canvas2 = html`<canvas width=${getWidth()} height=600>`;
// BabylonJS expects the canvas to be present in the DOM.
yield canvas2;
// Create a new engine with enabled antialiasing and attach it to the canvas.
var engine = new BABYLON.Engine(canvas2, true);
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 1, 1);
function getmat(scene) {
let i = 0;
var ar = [];
for (i in fFpP) {
ar.push(BABYLON.Material.Parse(fFpP[i], scene, ""));
}
return ar;
}
var mats = getmat(scene);
// Add a rotatable camera with a radius of 3 units and point it to the center of the scene.
const camera = new BABYLON.ArcRotateCamera(
"camera",
Math.PI / 2,
(2 * Math.PI) / 4,
5,
new BABYLON.Vector3(0, 0, 0),
scene
);
//scene.cameras[0].inputs.attached["mousewheel"].wheelPrecision = 400;
// Prevent zooming by setting the lower and upper radius boundaries to the current radius.
// camera.lowerRadiusLimit = camera.upperRadiusLimit = camera.radius;
// Attach the camera to the canvas and prevent default events.
camera.attachControl(canvas2, true);
var light9 = new BABYLON.DirectionalLight(
"DirectionalLight",
new BABYLON.Vector3(0, 1, -1),
scene
);
var light99 = new BABYLON.DirectionalLight(
"DirectionalLight2",
new BABYLON.Vector3(0, -1, 1),
scene
);
var l9 = new BABYLON.PointLight("light1");
l9.position = new BABYLON.Vector3(0, 0, -50);
l9.intensity = 0.9;
light99.intensity = 0.9;
// lights(140, scene);
const mat = new BABYLON.StandardMaterial("mat");
mat.diffuseTexture = new BABYLON.Texture("https://i.imgur.com/8TH71NX.png");
const columns = 1;
const rows = 1;
//Face UVs
const faceUV = [];
for (let i = 0; i < 12; i++) {
faceUV[i] = new BABYLON.Vector4(
(i % 6) / columns,
Math.floor(i / 6) / rows,
(1 + (i % 6)) / columns,
1 / rows + Math.floor(i / 6) / rows
);
}
var cntr = BABYLON.Mesh.CreatePolyhedron(
"shape",
{ type: 2, faceUV: faceUV, size: 1.103 },
scene
);
cntr.position = new BABYLON.Vector3(0, 0, 0);
cntr.material = mat;
scene.registerBeforeRender(function () {
cntr.rotation.x += 0.002;
cntr.rotation.z += 0.001;
cntr.rotation.y += 0.0014;
});
scene.onPointerDown = function (evt, pickResult) {
//console.log(pickResult.thinInstanceIndex)
console.log(pickResult.pickedMesh);
console.log();
// pickResult.pickedMesh.isVisible = false;
};
scene.createDefaultCameraOrLight(true, true, true);
// The main render loop.
var ll = 0;
const renderLoop = () => {
ll += 0.001;
// box.rotation.y += 0.007;
scene.render();
};
const onResize = () => {
canvas2.width = getWidth();
engine.resize();
};
window.addEventListener("resize", onResize);
// Remove handlers, destroy the WebGL context and free up resources.
invalidation.then(() => {
window.removeEventListener("resize", onResize);
engine.dispose();
});
// Start the render loop.
engine.runRenderLoop(renderLoop);
}
import { fFpP, BABYLON, lights } from "@obeymy/ral-materials"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
