Skip to content
Simple character control with smooth follow camera. With three JS and simple javascript.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
index.html
input.js
input.png
main.js
readme.md
style.css

readme.md

Character control in three JS

Simple character control with smooth follow camera.

live preview "https://inkfood.github.io/Smooth-camera-with-ThreeJS/"

Get threeJS https://threejs.org

Function for smooth camera follow with target Player.

function followCamera()
{
    //Offset from camera to player
    var relativeCameraOffset = new THREE.Vector3(0,5,10);

    //UPDATE PLAYER WORLD MATRIX FOR PERFECT CAMERA FOLLOW
    player.updateMatrixWorld()
    //Apply offset to player matrix
	var cameraOffset = relativeCameraOffset.applyMatrix4( player.matrixWorld );

    //Apply position offset to camera DIRECTLY -> NOT SMOOTH
	// camera.position.x = cameraOffset.x;
	// camera.position.y = cameraOffset.y;
    // camera.position.z = cameraOffset.z;

    //SMOOTH CAMERA POSITION TO TARGET POSITION
    camera.position.lerp(cameraOffset, 0.1);
    camera.lookAt( player.position );
}
You can’t perform that action at this time.