javascript - 未捕获错误 : THREE. 四元数 : . setFromEuler() 现在需要欧拉旋转而不是 Vector3 和顺序

Question

我正在使用 ThreeJS/WebGL 来演示 iframe 内的旋转行星。除了警告和问题之外，它工作正常:

Warning: THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter. 

Issue: Uncaught Error: THREE.Quaternion: .setFromEuler() now expects a Euler rotation rather than a Vector3 and order.

我已将以下资源包含到 iframe 的主体中:

<div id="webgl"></div> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script> 
<script type="text/javascript" src="https://cdn.rawgit.com/bubblin/The-Solar-System/master/jupiter/js/detector.js"> 
</script> 
<script type="text/javascript" src="https://cdn.rawgit.com/bubblin/The-Solar-System/master/jupiter/js/trackBallControls.js"> </script>
<script type="text/javascript" src="https://cdn.rawgit.com/bubblin/The-Solar-System/master/jupiter/js/xRingGeometry.js"> </script>

如您所见，我使用 trackBallControls.js 根据用户输入/触摸来旋转球体，并且我重写了 RingGeometry 方法，以沿圆周分层ring_image，而不是径向发射它。

例如，这是我模拟木星的完整代码:

(function() {
  var webglEl = document.getElementById('webgl');
  if (!Detector.webgl) {
    Detector.addGetWebGLMessage(webglEl);
    return;
  }
  THREE.ImageUtils.crossOrigin = '';
  var width = window.innerWidth,
    height = window.innerHeight;
  var radius = 0.45,
    segments = 32,
    rotation = 5;
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
  camera.position.z = 3;
  camera.position.y = 1;
  camera.position.x = -1;
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);
  scene.add(new THREE.AmbientLight(0x553333));
  var light = new THREE.DirectionalLight(0xffffff, .5);
  light.position.set(5, 3, 5);
  scene.add(light);
  var sphere = createSphere(radius, segments);
  sphere.rotation.y = rotation;
  scene.add(sphere);
  var rings = createRings(radius, segments);
  rings.rotation.y = rotation;
  scene.add(rings);
  var stars = createStars(90, 64);
  scene.add(stars);
  var controls = new THREE.TrackballControls(camera);
  webglEl.appendChild(renderer.domElement);
  render();

  function render() {
    controls.update();
    sphere.rotation.y += 0.08;
    rings.rotation.y += 0.05;
    requestAnimationFrame(render);
    renderer.render(scene, camera);
  }

  function createSphere(radius, segments) {
    return new THREE.Mesh(new THREE.SphereGeometry(radius, segments, segments), new THREE.MeshPhongMaterial({
      map: THREE.ImageUtils.loadTexture('https://cdn.rawgit.com/marvindanig/Images/master/jupiter/jupitermap.jpg'),
      bumpScale: 0.05,
      specular: new THREE.Color('#190909')
    }));
  }

  function createRings(radius, segments) {
    return new THREE.Mesh(new THREE.XRingGeometry(1.3 * radius, 1.6 * radius, 2 * segments, 5, 0, Math.PI * 2), new THREE.MeshBasicMaterial({
      map: THREE.ImageUtils.loadTexture('https://cdn.rawgit.com/bubblin/The-Solar-System/master/jupiter/images/rings.png'),
      side: THREE.DoubleSide,
      transparent: true,
      opacity: 0.2,
      specular: new THREE.Color('#495909')
    }));
  }

  function createStars(radius, segments) {
    return new THREE.Mesh(new THREE.SphereGeometry(radius, segments, segments), new THREE.MeshBasicMaterial({
      map: THREE.ImageUtils.loadTexture('https://cdn.rawgit.com/marvindanig/Images/master/galaxy_starfield.png'),
      side: THREE.BackSide
    }));
  }
}());

它有效(请参阅输出 here )，但我收到这些警告和错误。错误和警告最终会累积起来，我的应用程序在 iPad/iPhone 上崩溃。

请帮忙，我是 ThreeJS 的新手。

Answer 1

关于:

Warning: THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter. 

在计算机图形学中，textures that are powers of two can be processed faster比那些不是的人要多，这就是你收到警告的原因。我建议您使用您最喜欢的图像编辑器将球体纹理和圆环纹理的大小调整为 2 的平方次幂。或者，您可以按照警告的建议设置 minFilter:

  function createSphere(radius, segments) {
    var texture = THREE.ImageUtils.loadTexture('https://cdn.rawgit.com/marvindanig/Images/master/jupiter/jupitermap.jpg');
    texture.minFilter = THREE.NearestFilter;
    return new THREE.Mesh(new THREE.SphereGeometry(radius, segments, segments), new THREE.MeshPhongMaterial({
      map: texture,
      bumpScale: 0.05,
      specular: new THREE.Color('#190909')
    }));
  }

至于第二个错误，我在 Chrome 42 上没有看到它，但它是由于您的一个脚本(可能没有显示在此处，因为我无法在其中任何一个脚本中找到问题)使用 Quaternion.setFromEuler 像这样:

 quat.setFromEuler(new THREE.Vector3(pitch, yaw, roll));

什么时候应该这样使用:

 quat.setFromEuler(new THREE.Euler(pitch, yaw, roll));

在代码中快速执行CTRL + F操作，您就会发现有问题的脚本。