Is there a way to embed HTML-Page onto Mesh in three.js with WebGLRenderer

Question

I'm new to three.js and trying to show a html page on an box object. I found ways to do this with CSS3DRenderer but I can't find a solution to do this and also keep my original scene:

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

const monitorMaterial = new THREE.MeshPhongMaterial( {color: "darkgrey"} );
const monitorLength = 12
const monitorWidth = 7

const monitorX = 10
const monitorY = 5.5
const monitorZ = 10

const monitorGeometry = new THREE.BoxGeometry(monitorLength, monitorWidth, 0.25, 100, 50, 10);
const monitor = new THREE.Mesh( monitorGeometry, monitorMaterial );
monitor.position.x = monitorX
monitor.position.y = monitorY
monitor.position.z = monitorZ

const baseGeometry = new THREE.CylinderGeometry(3, 3, 0.25, 100);
const base = new THREE.Mesh( baseGeometry, new THREE.MeshPhongMaterial({ color:  "black"}) );
base.position.x = monitorX
base.position.y = 0.5
base.position.z = monitorZ

const bracketGeometry = new RoundedBoxGeometry( 0.5, 4, 0.5, 1, 1 );
const bracket = new THREE.Mesh( bracketGeometry, new THREE.MeshPhongMaterial({ color:  "black"}) );
bracket.position.x = monitorX
bracket.position.y = 2
bracket.position.z = 9.2
bracket.rotation.x = -2.75

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(50, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 36
camera.position.y = 35
camera.position.z = 65
scene.add(camera)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enabled = false
controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.setClearColor( 0xffffff, 1);

/**
 * Animate
 */
const clock = new THREE.Clock()

const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()

    // Update controls
    controls.update()

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
   
}

I'd like to change the Mesh of the monitorMaterial so it displays a html site that a user can use just like a normal website but inside the canvas and on the element.

score 0 · Answer 1 · answered Jan 20 '23 at 00:08

The only way to include functional HTML in Three.js's 3D space is with a CSS3DRenderer. However, this is not true WebGL, but an HTML <div> with CSS transforms to look like 3D. Since it's not true WebGL, you lose depth, occlusion, materials, lighting, shadows, and other properties you'd expect from real 3D meshes. You'll have to weigh the pros vs cons of going down this route given your use-case.

See this demo for an example of a functioning YouTube video player with 3D transformations.

Is there a way to embed HTML-Page onto Mesh in three.js with WebGLRenderer

1 Answers1