Javascript 使用THREEJS，我尝试在场景中切换雾

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

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

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

原始问题：

我有一个开关，当点击时，它会在场景中添加/删除雾，但它似乎不会在场景中添加任何雾。我在控制台上运行scene.fog以查看它是否有

我想我们可以像我那样添加和删除它。是否有其他依赖于实施fog的因素？我试着去看雾是如何工作的，但我没有看到任何其他的线条。也许我需要在像现在这样调整场景之后进行某种场景刷新

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;
  }
}

---

---

Fog的近距离和远距离参数是不寻常的。 尝试将这些设置为其他一些（更大的）值，例如0.1表示近，2000表示远。

请参阅

雾无法轻松从场景中移除，因为它在第一次渲染时已内置到材质着色器中

---

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

不寻常的大小是为了使雾立即显示在视口中，因为有许多对象正在显示。我将尝试快速确认，并提供一些创建雾的方法

//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);
}