有没有一种方法可以使用 WebGLRenderer 在 three.js 中将 HTML-Page 嵌入到 Mesh 中答案

【问题标题】：Is there a way to embed HTML-Page onto Mesh in three.js with WebGLRenderer有没有一种方法可以使用 WebGLRenderer 在 three.js 中将 HTML-Page 嵌入到 Mesh 中
【发布时间】：2023-01-20 08:13:10
【问题描述】：

我是 three.js 的新手，正在尝试在框对象上显示 html 页面。我找到了使用 CSS3DRenderer 执行此操作的方法，但我找不到解决方案来执行此操作并保留我的原始场景：

// 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)
   
}

我想更改 monitorMaterial 的网格，以便它显示一个 html 站点，用户可以像普通网站一样使用它，但在画布内部和元素上。

【问题讨论】：

标签： javascript html css three.js mesh

【解决方案1】：

在 Three.js 的 3D 空间中包含功能性 HTML 的唯一方法是with a CSS3DRenderer。然而，这不是真正的 WebGL，而是一个 HTML <div>，带有 CSS 转换看起来像 3D。由于它不是真正的 WebGL，因此您会失去深度、遮挡、材质、照明、阴影和您期望从真实 3D 网格获得的其他属性。根据您的用例，您必须权衡沿着这条路线走下去的利弊。

请参阅 this demo for an example 的具有 3D 转换功能的 YouTube 视频播放器。

【讨论】：