Background Color Not Working

weshoke commented 6 years ago

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

salfield commented 6 years ago

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.

R3sistance commented 5 years ago

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

xeolabs / xeogl