As a beginner in three.js, I am attempting to display an HTML page on a box object. While I have managed to achieve this using CSS3DRenderer, I am struggling to find a solution that allows me to maintain 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 aim to modify the Mesh of the monitorMaterial to showcase an HTML site that users can interact with as they would with a regular website, but within the canvas and on the element.