↑
Click the screen to control
================================================
FILE: demo/index.html
================================================
Install
$ npm i css-camera
WoodNeck
@woodneck
You can put any HTML element you like, then just transform it.
@css-camera will do the rest for you.
It's super simple!
// Prerequisite:
// Create your scene as you like
const card = document.querySelector("#card");
const cardButton = document.querySelector("#card-button");
// First, make camera
const camera = new CSSCamera("#space");
// Call its method, then update it!
cardButton.onclick = () => {
// Move camera in front of "card"
camera.focus(card);
camera.update(2000);
}See the source of this page.
All pixelart assets are from https://guttykreum.itch.io/field-of-green
================================================
FILE: jsdoc.json
================================================
{
"tags": {
"allowUnknownTags" : false,
"dictionaries": ["jsdoc", "closure"]
},
"source": {
"include": ["src", "README.md"],
"includePattern": ".+\\.(j|t)s(doc|x)?$",
"excludePattern": "(^|\\/|\\\\)_"
},
"opts": {
"template": "node_modules/docdash",
"destination": "./docs/",
"ignores": [],
"expendsItemMembers": true,
"recurse": true
},
"plugins": [
"plugins/markdown"
],
"docdash": {
"static": true,
"cleverLinks": true,
"monospaceLinks": true,
"typedefs": true,
"private": true,
"search": true,
"openGraph": {
"title": "css-camera",
"type": "website",
"site_name": "css-camera",
"image": "",
"url": "https://woodneck.github.io/css-camera/"
},
"meta": {
"title": "css-camera",
"description": "Add a depth to your web page with CSS3 3D transform.",
"keyword": "css3, camera, graphics, 3d"
},
"menu":{
"Github":{
"href":"https://github.com/WoodNeck/css-camera",
"target":"_blank"
}
}
},
"markdown": {
"parser": "gfm",
"hardwrap": true
}
}
================================================
FILE: package.json
================================================
{
"name": "css-camera",
"version": "1.0.1-snapshot",
"description": "Add a depth to your web page with CSS3 3D transform.",
"main": "lib/css-camera.js",
"module": "lib/css-camera.esm.js",
"types": "lib/declaration/index.d.ts",
"scripts": {
"build": "rm -rf ./lib && rollup -c && npm run declaration",
"build:windows": "rd /s /q ./lib || rollup -c && npm run declaration:windows",
"declaration": "rm -rf ./lib/declaration && tsc -p tsconfig.json",
"declaration:windows": "rd /s /q ./lib || tsc -p tsconfig.json",
"demo:build": "npm run build && cpx 'lib/**/*' demo/release/latest/lib --clean",
"demo:prebuild-version": "cpx 'lib/**/*' demo/release/$npm_package_version/lib --clean && cpx 'docs/**/*' demo/release/$npm_package_version/docs --clean",
"demo:prebuild-latest": "cpx 'lib/**/*' demo/release/latest/lib --clean && cpx 'docs/**/*' demo/release/latest/docs --clean",
"demo:deploy": "npm run build && npm run doc && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d demo/",
"doc": "rm -rf ./docs && jsdoc -c jsdoc.json"
},
"repository": {
"type": "git",
"url": "git+https://github.com/WoodNeck/css-camera.git"
},
"author": "WoodNeck",
"license": "MIT",
"bugs": {
"url": "https://github.com/WoodNeck/css-camera/issues"
},
"homepage": "https://github.com/WoodNeck/css-camera#readme",
"devDependencies": {
"@daybrush/jsdoc": "^0.3.7",
"@egjs/build-helper": "0.0.5",
"@types/gl-matrix": "^2.4.5",
"cpx": "^1.5.0",
"docdash": "^1.1.1",
"gh-pages": "2.0.1",
"rollup": "^1.10.1",
"rollup-plugin-node-resolve": "^4.2.3",
"rollup-plugin-prototype-minify": "^1.0.5",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-typescript": "^1.0.1",
"rollup-plugin-uglify": "^6.0.2",
"tslint": "^5.15.0",
"tslint-consistent-codestyle": "^1.15.1",
"tslint-eslint-rules": "^5.4.0",
"typescript": "^3.4.3"
},
"dependencies": {
"gl-matrix": "^3.0.0"
}
}
================================================
FILE: rollup.config.js
================================================
const buildHelper = require("@egjs/build-helper");
const name = "CSSCamera";
const external = {
"gl-matrix": "gl-matrix",
}
export default buildHelper([
{
name,
input: "./src/index.umd.ts",
output: "./lib/css-camera.js",
format: "umd",
external,
},
{
name,
input: "./src/index.umd.ts",
output: "./lib/css-camera.min.js",
format: "umd",
uglify: true,
external,
},
{
name,
input: "./src/index.umd.ts",
output: "./lib/css-camera.pkgd.js",
format: "umd",
resolve: true,
},
{
name,
input: "./src/index.umd.ts",
output: "./lib/css-camera.pkgd.min.js",
format: "umd",
resolve: true,
uglify: true,
},
{
input: "./src/index.ts",
output: "./lib/css-camera.esm.js",
format: "esm",
external,
exports: "named",
},
]);
================================================
FILE: src/CSSCamera.ts
================================================
import { mat4, vec3, quat } from 'gl-matrix';
import { getElement, applyCSS, getTransformMatrix, findIndex, getOffsetFromParent, getRotateOffset, assign } from './utils/helper';
import { quatToEuler } from './utils/math';
import * as DEFAULT from './constants/default';
import { Offset, UpdateOption, ValueOf, Options } from './types';
class CSSCamera {
private _element: HTMLElement;
private _viewportEl: HTMLElement;
private _cameraEl: HTMLElement;
private _worldEl: HTMLElement;
private _position: vec3;
private _scale: vec3;
private _rotation: vec3;
private _perspective: number;
private _rotateOffset: number;
private _updateTimer: number;
/**
* Current version of CSSCamera.
* @example
* console.log(CSSCamera.VERSION); // ex) 1.0.0
* @type {string}
*/
static get VERSION() { return '#__VERSION__#'; }
/**
* The element provided in the constructor.
* @example
* const camera = new CSSCamera(el);
* console.log(camera.element === el); // true
* @type {HTMLElement}
*/
public get element() { return this._element; }
/**
* The reference of viewport DOM element.
* @type {HTMLElement}
*/
public get viewportEl() { return this._viewportEl; }
/**
* The reference of camera DOM element.
* @type {HTMLElement}
*/
public get cameraEl() { return this._cameraEl; }
/**
* The reference of world DOM element.
* @type {HTMLElement}
*/
public get worldEl() { return this._worldEl; }
/**
* The current position as number array([x, y, z]).
* @example
* const camera = new CSSCamera(el);
* console.log(camera.position); // [0, 0, 0];
* camera.position = [0, 0, 300];
* console.log(camera.position); // [0, 0, 300];
* @type {number[]}
*/
public get position() { return [...this._position]; }
/**
* The current scale as number array([x, y, z]).
* @example
* const camera = new CSSCamera(el);
* console.log(camera.scale); // [1, 1, 1];
* camera.scale = [5, 1, 1];
* console.log(camera.scale); // [5, 1, 1];
* @type {number[]}
*/
public get scale() { return [...this._scale]; }
/**
* The current Euler rotation angles in degree as number array([x, y, z]).
* @example
* const camera = new CSSCamera(el);
* console.log(camera.rotation); // [0, 0, 0];
* camera.rotation = [90, 0, 0];
* console.log(camera.rotation); // [90, 0, 0];
* @type {number[]}
*/
public get rotation() { return [...this._rotation]; }
/**
* The current quaternion rotation as number array([x, y, z, w]).
* @example
* const camera = new CSSCamera(el);
* console.log(camera.quaternion); // [0, 0, 0, 1];
* camera.rotation = [90, 0, 0];
* console.log(camera.quaternion); // [0.7071067690849304, 0, 0, 0.7071067690849304];
* camera.quaternion = [0, 0, 0, 1];
* console.log(camera.rotation); // [0, -0, 0];
* @type {number[]}
*/
public get quaternion() {
const r = this._rotation;
const quaternion = quat.fromEuler(quat.create(), r[0], r[1], r[2]);
return [...quaternion];
}
/**
* The current perspective value that will be applied to viewport element.
* @example
* const camera = new CSSCamera(el);
* camera.perspective = 300;
* console.log(camera.perspective); // 300
* @type {number}
*/
public get perspective() { return this._perspective; }
/**
* The current rotate offset value that will be applied to camera element.
* The camera will be as far away from the focal point as this value.
* |||
* |:---:|:---:|
* @example
* const camera = new CSSCamera(el);
* camera.perspective = 300;
* console.log(camera.cameraCSS); // scale3d(1, 1, 1) translateZ(300px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
* camera.rotateOffset = 100;
* console.log(camera.cameraCSS); // scale3d(1, 1, 1) translateZ(400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
* @type {number}
*/
public get rotateOffset() { return this._rotateOffset; }
/**
* CSS string can be applied to camera element based on current transform.
* @example
* const camera = new CSSCamera(el);
* camera.perspective = 300;
* console.log(camera.cameraCSS); // scale3d(1, 1, 1) translateZ(300px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
* @type {string}
*/
public get cameraCSS() {
const perspective = this._perspective;
const rotateOffset = this._rotateOffset;
const rotation = this._rotation;
const scale = this._scale;
// Rotate in order of Z - Y - X
// tslint:disable-next-line: max-line-length
return `scale3d(${scale[0]}, ${scale[1]}, ${scale[2]}) translateZ(${perspective - rotateOffset}px) rotateX(${rotation[0]}deg) rotateY(${rotation[1]}deg) rotateZ(${rotation[2]}deg)`;
}
/**
* CSS string can be applied to world element based on current transform.
* ```
* const camera = new CSSCamera(el);
* console.log(camera.worldCSS); // "translate3d(0px, 0px, 0px)";
* camera.translate(0, 0, 300);
* console.log(camera.worldCSS); // "translate3d(0px, 0px, -300px)";
* ```
* @type {string}
*/
public get worldCSS() {
const position = this._position;
return `translate3d(${-position[0]}px, ${-position[1]}px, ${-position[2]}px)`;
}
public set position(val: number[]) { this._position = vec3.fromValues(val[0], val[1], val[2]); }
public set scale(val: number[]) { this._scale = vec3.fromValues(val[0], val[1], val[2]); }
public set rotation(val: number[]) { this._rotation = vec3.fromValues(val[0], val[1], val[2]); }
public set quaternion(val: number[]) { this._rotation = quatToEuler(quat.fromValues(val[0], val[1], val[2], val[3])); }
public set perspective(val: number) { this._perspective = val; }
public set rotateOffset(val: number) { this._rotateOffset = val; }
/**
* Create new CSSCamera with given element / selector.
* @param - The element to apply camera. Can be HTMLElement or CSS selector.
* @param {Partial
TEXT
˜
TEXT
TEXT