Question

无论如何使用Three.js，如何保持不变大小的网格？

假设我有多个相同大小的网格。我希望它们始终在屏幕尺寸上相同。我还必须使用透视相机。

我找到了一些相关的答案，但似乎我错过了一些事情：

第一种方法是使用欧几里得距离对每个动画帧分别进行拍照和缩放。 Three JS Keep Label Size On Zoom

我试图修改答案中给出的jsfiddle，以将比例应用于网格而不是精灵，但这对我不起作用。结果如下https://jsfiddle.net/a2ogz9vx/258/

var camera, scene, renderer, controls;
var planets = [];
var timestamp = 0;
var scaleVector = new THREE.Vector3();

init();
animate();

function init() {

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(0, 100, 100);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  var createPlanet = function(name, radius, orbit, speed) {
    var geom = new THREE.SphereGeometry(radius, 32, 16);
    var mat = new THREE.MeshBasicMaterial({
      color: Math.random() * 0xFFFFFF,
    });
    var planet = new THREE.Mesh(geom, mat);
    planet.userData.orbit = orbit;
    planet.userData.speed = speed;

    var canvas = document.createElement('canvas');
    canvas.width = 256;
    canvas.height = 256;

    var tex = new THREE.Texture(canvas);
    tex.needsUpdate = true;
    var spriteMat = new THREE.SpriteMaterial({
      map: tex
    });
    var sprite = new THREE.Sprite(spriteMat);

    planet.add(sprite);
    planets.push(planet);
    scene.add(planet);


  };

  createPlanet("One", 11, -10, 5);
  createPlanet("Two", 11, 5, 5);
  createPlanet("Three", 11, 10, 5);

}

function animate() {
  requestAnimationFrame(animate);
  planets.forEach(function(planet) {
    
    var scaleFactor = 100;
    var scale = scaleVector.subVectors(planet.position, camera.position).length() / scaleFactor;
    planet.scale.set(scale, scale, scale);
    
    var orbit = planet.userData.orbit;
    var speed = planet.userData.speed;
    
    planet.position.x = speed * orbit;
    planet.position.z = speed * orbit;
  });
  render();
}

function render() {
  renderer.render(scene, camera);
}

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

第二种方法是使用屏幕宽度计算。 https://stackoverflow.com/a/13351534/8465699 结果也不正确https://jsfiddle.net/a2ogz9vx/260/

var camera, scene, renderer, controls;
var planets = [];
var timestamp = 0;
var scaleVector = new THREE.Vector3();

init();
animate();

function init() {

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(0, 100, 100);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  var createPlanet = function(name, radius, orbit, speed) {
    var geom = new THREE.SphereGeometry(radius, 32, 16);
    var mat = new THREE.MeshBasicMaterial({
      color: Math.random() * 0xFFFFFF,
    });
    var planet = new THREE.Mesh(geom, mat);
    planet.userData.orbit = orbit;
    planet.userData.speed = speed;

    var canvas = document.createElement('canvas');
    canvas.width = 256;
    canvas.height = 256;

    var tex = new THREE.Texture(canvas);
    tex.needsUpdate = true;
    var spriteMat = new THREE.SpriteMaterial({
      map: tex
    });
    var sprite = new THREE.Sprite(spriteMat);

    planet.add(sprite);
    planets.push(planet);
    scene.add(planet);


  };

  createPlanet("One", 11, -10, 5);
  createPlanet("Two", 11, 0, 5);
  createPlanet("Three", 11, 10, 5);

}

function animate() {
  requestAnimationFrame(animate);
  planets.forEach(function(planet) {

    const dist = planet.position.distanceTo(camera.position);
    const vFOV = THREE.Math.degToRad(camera.fov);
    const size = 2 * Math.tan(vFOV / 2) * dist;
    const scaleFactor = 130;
    const scale = size / scaleFactor;

    planet.scale.set(scale, scale, scale);

    var orbit = planet.userData.orbit;
    var speed = planet.userData.speed;

    planet.position.x = speed * orbit;
    planet.position.z = speed * orbit;
  });
  render();
}

function render() {
  renderer.render(scene, camera);
}

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

欢迎提出任何有关修复代码或其他方法的建议！

保持恒定大小，而不管Three.js中的观点如何

0 个答案: