three.js HTML背景为clearColor

Question

I want to set the HTML background as clearColor in three.js ?

This is my three.js code:

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

In My Webgl I can specify the HTML as clearColor.

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

My Webgl:

or

Answer 1

The background of a THREE.Scene can be set by setting the property .background :

eg

scene = new THREE.Scene();
scene.background = new THREE.Color(0xff0000); // red

If you want to have a transparent background, then the THREE.WebGLRenderer has to be initialized with the property {alpha: true} . The clear color and alpha channel have to be set 0, but this is default:

eg

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

See the example with a cube which is drawn over a background image:

 (function onLoad() { var container, loader, camera, scene, renderer, orbitControls; init(); animate(); function init() { container = document.getElementById('container'); renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setClearColor( 0x000000, 0 ); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100); camera.position.set(0, 1, -2); loader = new THREE.TextureLoader(); loader.setCrossOrigin(""); scene = new THREE.Scene(); scene.add(camera); window.onresize = resize; var ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 ); directionalLight.position.set(1,2,1.5); scene.add( directionalLight ); orbitControls = new THREE.OrbitControls(camera); addGridHelper(); createModel(); } function createModel() { var material = new THREE.MeshPhongMaterial({color:'#b090b0'}); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); } function addGridHelper() { var helper = new THREE.GridHelper(100, 100); helper.material.opacity = 0.25; helper.material.transparent = true; scene.add(helper); var axis = new THREE.AxesHelper(1000); scene.add(axis); } function resize() { var aspect = window.innerWidth / window.innerHeight; renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = aspect; camera.updateProjectionMatrix(); } function animate() { requestAnimationFrame(animate); orbitControls.update(); render(); } function render() { renderer.render(scene, camera); } })(); 

 #image-abs { position : absolute; top : 0; left : 0; z-index: -1; width: 100%; height: 100%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script> <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> <img id="image-abs" src="https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/background.jpg"> <div id="container"></div>