Question

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

Answer 1

请参阅https://github.com/mrdoob/three.js/wiki/Updates

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

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

Answer 2

雾的近和远参数不常见。尝试将其设置为其他（更大）值，例如0.1表示近处，而2000表示远处。

使用THREE JS，我试图在场景中进行雾的切换

2 个答案: