Javascript three.js HTML背景为clearColor

我想在three.js中将HTML背景设置为clearColor

这是我的three.js代码：

// init
var vWebGL = new WEBGL();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00fdf0 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;
renderer.clearColor(0x000000, 0.0);

// Render Loop
function animate() {
    renderer.setClearAlpha(0.0);
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}


if (vWebGL.isWebGLAvailable()) {
    // Initiate function or other initializations here
    animate();
} else {
    var warning = vWebGL.getWebGLErrorMessage();
    document.getElementById('container').appendChild(warning);
}

在我的Webgl中，我可以将HTML指定为clearColor

gl.clearColor(0.0, 0.0, 0.0, 0.0);
gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);

我的Webgl：

或

可以通过设置以下属性来设置背景：

e、 g

如果希望有一个透明的背景，则必须使用属性

{alpha:true}

初始化。清除颜色和alpha通道必须设置为0，但这是默认设置：

e、 g

请参见在背景图像上绘制立方体的示例：

（函数onLoad（）{
var容器、加载程序、摄影机、场景、渲染器、控件；
init（）；
制作动画（）；
函数init（）{
container=document.getElementById（'container'）；
renderer=new THREE.WebGLRenderer({
反别名：是的，
阿尔法：是的
});
renderer.setClearColor（0x000000，0）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（renderer.domeElement）；
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，1100）；
摄像机位置设置（0，1，-2）；
loader=新的三个.TextureLoader（）；
loader.setCrossOrigin（“”）；
场景=新的三个。场景（）；
场景。添加（摄影机）；
window.onresize=调整大小；
var环境光=新的三个环境光（0x404040）；
场景。添加（环境光）；
var方向光=新的三个方向光（0xffffff，0.5）；
定向灯位置设置（1,2,1.5）；
场景。添加（方向光）；
轨道控制=新的三个轨道控制（摄像机）；
addGridHelper（）；
createModel（）；
}
函数createModel（）{
var material=新的三个.MeshPhongMaterial（{color:'#b090b0'}）；
var geometry=新的3.BoxGeometry（1,1,1）；
var mesh=新的三个网格（几何体、材质）；
场景。添加（网格）；
}
函数addGridHelper（）{
var helper=新的三个.GridHelper（100100）；
helper.material.opacity=0.25；
helper.material.transparent=true；
场景.添加（助手）；
var轴=新的三轴帮助器（1000）；
场景。添加（轴）；
}
函数resize（）{
var aspect=window.innerWidth/window.innerHeight；
renderer.setSize（window.innerWidth、window.innerHeight）；
camera.aspect=aspect；
camera.updateProjectMatrix（）；
}
函数animate（）{
请求动画帧（动画）；
orbitControls.update（）；
render（）；
}
函数render（）{
渲染器。渲染（场景、摄影机）；
}
})();
#图像abs{位置：绝对；顶部：0；左侧：0；z索引：-1；宽度：100%；高度：100%；}

您是否尝试过
setClearColor（）
？我想在three.js中使用HTML作为背景。@Mick
three.WebGLRenderer（{alpha:true}）
scene = new THREE.Scene();
scene.background = new THREE.Color(0xff0000); // red

renderer = new THREE.WebGLRenderer( { alpha: true } ); 
renderer.setClearColor( 0x000000, 0 );