xeogl
xeogl copied to clipboard
Published
20 hours ago •
xeolabs
xeolabs
Background Color Not Working
Description of the problem
The scene config arg / canvas property backgroundColor doesn't seem to change anything:
<!DOCTYPE html>
<html lang="en">
<head>
<title>xeogl Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="xeogl.min.js"></script>
<body>
<script>
var scene = xeogl.scene;
scene.canvas.backgroundColor = [0.93, 0.93, 0.93, 1.];
var geometry = new xeogl.TorusGeometry(scene, {
radius: 1.0,
tube: 0.3,
radialSegments: 120,
tubeSegments: 60
});
var material = new xeogl.PhongMaterial(scene, {
diffuse: [ 0.6, 0.6, 0.7 ]
});
var entity = new xeogl.Entity(scene, {
geometry: geometry,
material: material
});
scene.camera.eye = [0, 0, -4];
scene.on("tick", function () {
entity.scene.camera.orbitYaw(0.2);
});
// new xeogl.CameraControl();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>xeogl Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="xeogl.min.js"></script>
<body>
<script>
var scene = new xeogl.Scene({
backgroundColor: [0.93, 0.93, 0.93, 1.]
});
var geometry = new xeogl.TorusGeometry(scene, {
radius: 1.0,
tube: 0.3,
radialSegments: 120,
tubeSegments: 60
});
var material = new xeogl.PhongMaterial(scene, {
diffuse: [ 0.6, 0.6, 0.7 ]
});
var entity = new xeogl.Entity(scene, {
geometry: geometry,
material: material
});
scene.camera.eye = [0, 0, -4];
scene.on("tick", function () {
entity.scene.camera.orbitYaw(0.2);
});
// new xeogl.CameraControl();
</script>
</body>
</html>
xeogl version
- [ ] Dev
- [ x] Master
- [ ] ...
Browser
- [x] All of them
- [ ] Chrome
- [ ] Firefox
- [ ] Internet Explorer
OS
- [x] All of them
- [ ] Windows
- [ ] Linux
- [ ] Android
- [ ] IOS
Hardware Requirements
I can confirm I had the same issue. Setting the background to transparent worked but I couldn't set the background color of the scene.
As a workaround I found out that if you add an ambient light to the scene like this...
new xeogl.AmbientLight({ color: [.7, .9, 1.0], intensity: 0.5 });
You get a background color from the light properties
