Question

作为3D图形和threejs库的新手，我正在尝试实现一种效果，使得它看起来好像一排盒子指向计算机屏幕前面的物理点。

我做了一个简单的功能，渲染了很多盒子。它有一个aimAt方法，给定3d点，将方框放在3d的一条线上。该线连接世界中心和给定的3d点（尽管这些框仅分布在线的前6个长度单位）。

var CubeManager = function (scene) {
    var N_CUBES = 32;
    var ROW_LENGTH = 6;
    var cubes = [];

    var geometry = new THREE.BoxGeometry(.1, .1, .1);
    var material = new THREE.MeshLambertMaterial({color: 0x336600});

    for (var i=0;i<N_CUBES;i++) {
        var cube = new THREE.Mesh(geometry, material);
        cubes.push(cube);
        scene.add(cube);
    }

    function aimAt(p) {
        var distance = Math.sqrt(p.x*p.x + p.y*p.y + p.z*p.z);

        for (var i=0; i<cubes.length; i++) {
            var factor = ROW_LENGTH * (i/cubes.length) / distance;

            cubes[i].position.x = factor * p.x;
            cubes[i].position.y = factor * p.y;
            cubes[i].position.z = factor * p.z;
        }
    }

    aimAt({x: -2, y: 0, z: 27});
};

我从一个单独的文件调用CubeManager函数，我在其中设置我的3D场景：

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

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

var light = new THREE.PointLight( 0xff0000, 5, 100000 );
light.position.set( 0, 0, 7 );
scene.add( light );
camera.position.z = 7;

renderer.render(scene, camera);

通过在我的cubeManager末尾调用aimAt（{x：-2，y：0，z：27}），我试图对齐我的盒子，使它们瞄准物理世界中的两个单位在我的屏幕中心点的左侧和前面的20个单位（另外7个z坐标单位是为了说明我的虚拟相机在3d世界xy平面前面是7个单位）。

然而，这显然不起作用。这些方框似乎并未指向物理世界中的这一点。但是有可能实现这种效果吗？也许通过调整我的PerspectiveCamera的参数？

Answer 1

您是否尝试过Object3D.lookAt（vector）方法？文档陈述如下： .lookAt（vector）

vector - 要查看的世界向量。将对象旋转到空间中的面部点。

请参阅：http://threejs.org/docs/#Reference/Core/Object3D.lookAt

用threejs瞄准屏幕前的对象

1 个答案: