Keep objects looking at camera

Question

guys I know this question has been asked several times, several different ways, but I just can get it to work. Basically I have 2d clouds, but I want the camera to rotate around an object floating above the clouds. The problem is, when im not looking a the face of the clouds u can tell that they are 2d. Soooo i want the the clouds to "look" at the camera where ever it is. I believe my problem stems from how the cloud geometry is called on to the planes, but here take a look. I put the a lookAt function with in my animate function. I hope you can point me in the right direction at least.

Three.js rev. 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

just a first guess: the lookAt function needs Vector3 as parameter. try to use camera.position in the animate function.

cloud.lookAt( camera.position );