Is it possible to render JavaScript inside a panel.HTML pane?

Hi,

I’m trying to run some HTML/JavaScript inside a panel.HTML pane. Running via a local webserver works:

image

But nothing appears if I run this code with python, and in the JavaScript browser console I get a few messages like:
image
image
image

import panel as pn

pn.extension()

html_pane = pn.pane.HTML("""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <script>
        // Your Three.js code goes here
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();

        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);

        scene.add(cube);

        camera.position.z = 5;

        const animate = function () {
            requestAnimationFrame(animate);

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

            renderer.render(scene, camera);
        };

        animate();
    </script>
</body>
</html>
""")

html_pane

Thanks for any help!

I think you might want to use ReactiveHTML
https://panel.holoviz.org/explanation/components/components_custom.html

1 Like

I really appreciate all your help @ahuang11, will give this a go.