2

编辑： 渲染场景后不能添加 FOG，因为它必须使用着色器进行计算。

  • 如果你这样做，它将显示机器向下，因为所有着色器都必须重新渲染。
  • 如果你需要雾，最好用雾渲染它，但将密度设置为 0（或 0.01），这样就没有真正的可见雾。这样做的一个很好的理由是因为 FOG 计算已创建，您只需要调整密度即可加载页面。

当前计划：我需要弄清楚如何改变密度。我正在查看 FOG 对象和场景，看看我能找到什么。

原始问题：

我有一个打开/关闭的开关，当单击它时，假设从场景中添加/移除雾，但它似乎没有向场景添加任何雾。我在控制台上运行 scene.fog 以查看它有它。

我想我们可以像我一样添加和删除它。还有其他依赖于实现雾的东西吗？我试图从http://mrdoob.github.io/three.js/examples/webgl_materials_cubemap_dynamic.html工作以了解雾是如何工作的，但我没有看到任何其他行然后我做了什么。也许我需要像我一样调整场景后进行某种场景刷新？

function toggledata(){
  var toggle = $(this).val();  // 'on' or 'off'
  if (toggle == 'on')
  {
    scene.fog = new THREE.Fog(0xffffff, 10, 60);
    scene.fog.color.setHSL( 0.51, 0.6, 0.6 );
  }
  else if (toggle == 'off')
  {
    scene.fog = null;
  }
}

//GLOBALS
var scene, container, etc.

function init()
{
  container = $('#MODELDIV');

  // SCENE
  scene = new THREE.Scene();

  // CAMERA
  var SCREEN_WIDTH = container.width();
  var SCREEN_HEIGHT = container.height();

  var VIEW_ANGLE = 45;
  var ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT;
  var NEAR = 0.1;
  var FAR = 20000000;

  camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);

  scene.add(camera);

  camera.position.set(3043.0732, 98.8883, 141.0916);

  camera.lookAt(3043.0732, 98.8883, 41.0916);
  //CAMERA_LIST.push(camera);

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  renderer.setClearColor(0x000000);

  renderer.sortObjects = true;

  container.append(renderer.domElement);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  var directionalLight = new THREE.DirectionalLight(0xffffff);
  directionalLight.position.set(1, 1, 1).normalize();
  scene.add(directionalLight);
  LIGHT_LIST.push(directionalLight);

  var ambientLight = new THREE.AmbientLight(0xbbbbbb);
}
4

2 回答 2

3

见https://github.com/mrdoob/three.js/wiki/Updates

雾不能轻易从场景中移除，因为它在第一次渲染时被内置到材质着色器中。

但是，您可以将其强度设置为 0 以获得相似的外观。

于 2013-06-05T22:25:45.117 回答
0

雾的近距和远距参数是不寻常的。尝试将它们设置为其他一些（更大的）值，例如近处为 0.1，远处为 2000。

于 2013-06-05T22:22:00.247 回答