Question

我正在尝试将摄像机设置为与一组点相距3个单位，我希望这是相对于一组点的，因为这些点以后会更改。

到目前为止，我可以从数据库中检索x，y，z坐标，并使用djangos {{coord_x}}返回，我将必须返回正确的长度，（我可以在python端做到这一点-len（））目前，数据库查询限制为20行。使用for循环将这些点引入three.js。

如何相对于对象设置摄像机？我需要计算边界框吗？

<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.001, 100000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // allow resizing of the window
    window.addEventListener('resize', function()
    {
      var width = window.innerWidth;
      var height = window.innerHeight;
      renderer.setSize(width, height);
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
    });

    //Controls
    controls = new THREE.OrbitControls(camera, renderer.domElement)
    //create the shape
    var geometry = new THREE.BoxGeometry(1, 1, 1);
            var material = new THREE.MeshBasicMaterial({color: 0x007654, wireframe: false});
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    var numpoints = 20;
    var dots = []; //If you want to use for other task

    for (var i = 0 ; i < numpoints ; i++) {
        var x = "{{coord_x}}";
        var y = "{{coord_y}}";
        var z = "{{coord_z}}";

        // var x = Math.random() * (0 - 1) + 1
        // var y = Math.random() * (0 - 1) + 1
        // var z = Math.random() * (0 - 1) + 1


        var dotGeometry = new THREE.Geometry();
        dots.push(dotGeometry);
        dotGeometry.vertices.push(new THREE.Vector3(x, y, z));
        var dotMaterial = new THREE.PointsMaterial( { size: 3, sizeAttenuation: false, color: 0xFF0000 });
        var dot = new THREE.Points( dotGeometry, dotMaterial);
        scene.add(dot);
    }

    camera.position.z = 30

    //game logic, allow rotation
    var update = function()
    {
      //cube.rotation.x += 0.00;
      //cube.rotation.y += 0.0025;
      //dot.rotation.x += 0.00;
      //dot.rotation.y += 0.005;
    };

    // draw scene
    var render = function()
    {
      renderer.render(scene, camera);
    };

    // run game loop (update, render, repeat)
    var GameLoop = function()
    {
      requestAnimationFrame(GameLoop);

      update();
      render();
    };

    GameLoop();
   </script>

Answer 1

这就是使用THREE.Sphere()对象来设置相机位置的方法：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var geom = new THREE.Geometry();
for (let i = 0; i < 100; i++) {
  geom.vertices.push(
    new THREE.Vector3(
      Math.random() - 0.5,
      Math.random() - 0.5,
      Math.random() - 0.5
    ).multiplyScalar(10)
  );
}
var points = new THREE.Points(geom, new THREE.PointsMaterial({
  size: 0.25,
  color: "aqua"
}));
scene.add(points);

var sphere = new THREE.Sphere().setFromPoints(geom.vertices);
console.log(sphere);
camera.position.copy(sphere.center);
camera.position.z += sphere.radius / Math.sin(THREE.Math.degToRad(camera.fov / 2));

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

相对于点集合设置摄像机

1 个答案: