three.js – 闪烁飞机

前端之家收集整理的这篇文章主要介绍了three.js – 闪烁飞机前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个应用程序与大型2D飞机与纹理,但我遇到一些闪烁的问题.

有可能看到闪烁的问题在这里(飞机是witt纹理):EXAMPLE CODE

这个深度缓冲区(z-buffer)精度问题还是别的什么?

解决方案是缩小一切,不允许大型飞机/物体?最好的做法是什么?

我知道z近和远也影响精度,所以设置z接近1000修复了这个例子中的闪烁.

代码

/*
 * Scale = 1,no flickering. Scale = 1000,flickering. 
 */
  var scale = 1000;

  var scene = new THREE.Scene();

  var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1000,1000000);
  camera.position.x = 0;
  camera.position.y = 0;
  camera.position.z = 100 * scale;
  var renderer = new THREE.WebGLRenderer({
      antialias: false
  });
  renderer.setSize(window.innerWidth,window.innerHeight);
  document.body.appendChild(renderer.domElement);

  var light = new THREE.AmbientLight(0xFFFFFF);
  scene.add(light);

  var material = new THREE.MeshBasicMaterial({
      transparent: false,side: THREE.DoubleSide,fog: false,color: 0xFFFF00,opacity: 1.0
  });

  var cubeGeometry = new THREE.PlaneGeometry(50 * scale,50 * scale,1,1);
  var cubeMesh = new THREE.Mesh(cubeGeometry,material);
  cubeMesh.position.set(0,1 * scale);
  scene.add(cubeMesh);

  var material = new THREE.MeshBasicMaterial({
      transparent: false,color: 0xFF0000,opacity: 1.0
  });

  var cubeGeometry = new THREE.PlaneGeometry(100 * scale,100 * scale,material);
  scene.add(cubeMesh);

  function render() {
      var time = Date.now() * 0.5;
      camera.position.x = Math.sin(time / 1000) * 150 * scale;
      camera.position.y = 0;
      camera.position.z = Math.cos(time / 1000) * 150 * scale;
      camera.lookAt(scene.position);
      renderer.render(scene,camera);  
      requestAnimationFrame(render);
  }
  render();

解决方法

您所看到的是GPU的精度不足,因为您使用的范围太大.通过将相机的近平面设置为100(而不是1),闪烁消失.

http://jsfiddle.net/GYQ5v/74/

原文链接:https://www.f2er.com/js/152898.html

猜你在找的JavaScript相关文章