使用 THREEJS，我正在尝试在场景中切换雾答案

【问题标题】：Using THREEJS, i am trying to have a toggle for fog in a scene使用 THREEJS，我正在尝试在场景中切换雾
【发布时间】：2013-06-01 16:49:29
【问题描述】：

编辑： 渲染场景后不能添加 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);
}

【问题讨论】：

标签： javascript jquery three.js webgl

【解决方案1】：

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

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

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

【讨论】：

我会尝试快速确认一下，并提供一些创建雾的方法

【解决方案2】：

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

【讨论】：

不寻常的尺寸是为了让 FOG 立即显示在视口中，因为要显示很多对象。