create3000 / x_ite

X_ITE X3D Browser, view and manipulate X3D, VRML, glTF and other 3D sources in HTML.
https://create3000.github.io/x_ite/
Other
67 stars 15 forks source link

EnvironmentLight has no effect (noob question number 3) #174

Closed Wagyx closed 6 months ago

Wagyx commented 6 months ago

Hello there, I have tried adding an environment light with a color to a default scene with a white cube and the cube remains white.

init();
function init(){
  const xBrowser = X3D.getBrowser();
  const scene = xBrowser.currentScene;

  const envLight = scene.createNode("EnvironmentLight");
  envLight.color = new X3D.SFColor(0,1,1);
  envLight.intensity = 1;
  envLight.ambientIntensity = 1;
  envLight.global = true;
  scene.rootNodes.push(envLight);

  const shape = scene.createNode("Shape");
  const geom = scene.createNode("Box");
  shape.geometry = geom;

  const appearance = scene.createNode("Appearance");
  const material = scene.createNode("Material");
  material.diffuseColor = X3D.Color3.White;
  appearance.material = material;
  shape.appearance = appearance;
  scene.rootNodes.push(shape);
}

I would appreciate your help a lot, what am I doing wrong (again ...) ? Also what is the default light in the scene ? Is it a DirectionalLight or a PointLight on the camera ? How can we change it ?

create3000 commented 6 months ago

EnvironmentLight is still experimental and will only work if you use PhysicalMaterial node, you then should set the diffuseTexture and specularTexture field. Here are some image that will work https://github.com/KhronosGroup/glTF-Sample-Environments/tree/b710a9fe6bcdfb8965530ede36e8279c298261de. A blurred image will be good for diffuse.

Otherwise DirectionalLight, SpotLight, or PointLight are your friends.

The default light is a DirectionalLight, which is tied to the Camera, it can be toggled on/off with a NavigationInfo node, with the headlight field. https://create3000.github.io/x_ite/components/navigation/navigationinfo/#sfbool-in-out-headlight-true

Wagyx commented 6 months ago

Okay, I think I'll make a new DirectionalLight with ambient intensity only since I don't have a need for a texture now.

create3000 commented 6 months ago

If you turn on DirectionalLight.ambientIntensity you should also adjust Material.ambientIntensity. ;)