camera - 让物体看着相机

Question

伙计们，我知道这个问题已经被问过好几次了，有几种不同的方式，但我就是能让它发挥作用。基本上我有 2d clouds ，但我希望相机围绕漂浮在云层上方的物体旋转。问题是，当我不看云的表面时，你可以看出它们是二维的。太棒了，我希望云能够“看着”相机，无论它在哪里。我相信我的问题源于如何将云几何图形调用到飞机上，但请看一下。我将 a viewAt 函数放在我的 animate 函数中。我希望你至少能给我指出正确的方向。

Three.js 版本。 70...

container.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.set(0, 0, 100);

    scene.add(camera);

    controls = new THREE.OrbitControls( camera );
    controls.target.copy( new THREE.Vector3( 0, 0,475) );
    controls.minDistance = 50;
    controls.maxDistance = 200;
    controls.autoRotate = true;
    controls.autoRotateSpeed = .2; // 30 seconds per round when fps is 60
    controls.minPolarAngle = Math.PI/4; // radians
    controls.maxPolarAngle = Math.PI/2; // radians
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;

    clock = new THREE.Clock();

    cloudGeometry = new THREE.Geometry();

    var texture = THREE.ImageUtils.loadTexture('img/cloud10.png', null, animate);
    texture.magFilter = THREE.LinearMipMapLinearFilter;
    texture.minFilter = THREE.LinearMipMapLinearFilter;

    var fog = new THREE.Fog(0x4584b4, -100, 3000);

    cloudMaterial = new THREE.ShaderMaterial({

        uniforms: {

            "map": {
                type: "t",
                value: texture
            },
            "fogColor": {
                type: "c",
                value: fog.color
            },
            "fogNear": {
                type: "f",
                value: fog.near
            },
            "fogFar": {
                type: "f",
                value: fog.far
            },

        },
        vertexShader: document.getElementById('vs').textContent,
        fragmentShader: document.getElementById('fs').textContent,
        depthWrite: false,
        depthTest: false,
        transparent: true

    });

    var plane = new THREE.Mesh(new THREE.PlaneGeometry(64, 64));

    for (var i = 0; i < 8000; i++) {

        plane.position.x = Math.random() * 1000 - 500;
        plane.position.y = -Math.random() * Math.random() * 200 - 15;
        plane.position.z = i;
        plane.rotation.z = Math.random() * Math.PI;
        plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;

        plane.updateMatrix();
        cloudGeometry.merge(plane.geometry, plane.matrix);

    }

    cloud = new THREE.Mesh(cloudGeometry, cloudMaterial);
    scene.add(cloud);

    cloud = new THREE.Mesh(cloudGeometry, cloudMaterial);
    cloud.position.z = -8000;
    scene.add(cloud);

    var radius = 100;
    var xSegments = 50;
    var ySegments = 50;
    var geo = new THREE.SphereGeometry(radius, xSegments, ySegments);

    var mat = new THREE.ShaderMaterial({
        uniforms: {
            lightPosition: {
                type: 'v3',
                value: light.position
            },
            textureMap: {
                type: 't',
                value: THREE.ImageUtils.loadTexture("img/maps/moon.jpg")
            },
            normalMap: {
                type: 't',
                value: THREE.ImageUtils.loadTexture("img/maps/normal.jpg")
            },
            uvScale: {
                type: 'v2',
                value: new THREE.Vector2(1.0, 1.0)

            }


        },
        vertexShader: document.getElementById('vertexShader').textContent,
        fragmentShader: document.getElementById('fragmentShader').textContent

    });

    mesh = new THREE.Mesh(geo, mat);
    mesh.geometry.computeTangents();
    mesh.position.set(0, 50, 0);
    mesh.rotation.set(0, 180, 0);
    scene.add(mesh);


}

function onWindowResize() {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
}

function animate() {
    requestAnimationFrame(animate);
    light.orbit(mesh.position, clock.getElapsedTime());
    cloud.lookAt( camera );
    controls.update(camera);
    renderer.render(scene, camera);

}
animate();

window.addEventListener('resize', onWindowResize, false);

Answer 1

只是第一个猜测:LookAt 函数需要 Vector3 作为参数。尝试在动画函数中使用camera.position。

cloud.lookAt(camera.position);