三.js雾不渲染？

Question

我正在尝试为我的场景添加雾，但它不会渲染？

我已经进行了一些搜索，但我的问题似乎没有答案。这是问题的截图

这是代码演示：https://jsfiddle.net/7orbmn4t/

var scene = new THREE.Scene();
scene.background = new THREE.Color(0xcce0ff);
scene.fog = new THREE.Fog(0xff0000, 10, 500);

var camera = new THREE.PerspectiveCamera(
  90,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

camera.rotation.x = 0.7853;
camera.position.set(0, 0, 15);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

scene.add( new THREE.AmbientLight( 0xffffff ) );

var geometry = new THREE.PlaneBufferGeometry(100, 100, 0);
var material = new THREE.MeshLambertMaterial({
  color: 0x898989,
  fog: true
});
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);

renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);

Answer 1

材质中的fog 标志仅指定材质是否受到雾的影响：material.fog

它不会产生雾。为此，您需要先创建雾：Fog