three.js - 来自 youtube 的 3D 场景中的threejs 视频

Question

我有一个从加载的模型创建的场景。现场有电视。我想在电视屏幕上添加 youtube 播放器。

我对场景中的所有模型使用 THREE.WebGLRenderer。用于带有 youtube 的 iframe 的 THREE.CSS3DRenderer。

问题是 webGL 中电视模型的屏幕尺寸太小（1.2x0.8），我无法在电视屏幕中安装 iframe 和 youtube。

如何为 iframe 设置比例或单位，或以某种方式在 webGL 单位和 CSS3D 像素之间设置比例？

// creating css object    
function createCssObject(w, h, position, rotation, url) {
    var html = [
    '<div style="width:' + w + 'px; height:' + h + 'px;">',
    '<iframe src="' + url + '" width="' + w + '" height="' + h + '">',
    '</iframe>',
    '</div>'
    ].join('\n');
    var div = document.createElement('div');
    div.innerHTML = html;
    var cssObject = new THREE.CSS3DObject(div);
    cssObject.position.x = position.x;
    cssObject.position.y = position.y;
    cssObject.position.z = position.z;
    cssObject.rotation.x = rotation.x;
    cssObject.rotation.y = rotation.y;
    cssObject.rotation.z = rotation.z;
    return cssObject;
}

标签： three.js