CSS 3D Lighting Engine
thomasxiii / photon Goto Github PK
View Code? Open in Web Editor NEWCSS 3D Lighting Engine
CSS 3D Lighting Engine
CSS 3D Lighting Engine
When following the simple instructions on http://photon.attasi.com/docs.html I get the following error resulting from invoking render
.
var light = new Photon.Light();
var face = new Photon.Face($('#elementWith3DTransformDefinedOnIt')[0]);
face.render(light, true);
This tracks back to the following line: https://github.com/thomasxiii/photon/blob/master/js/photon.js#L131
doesn't look like it. any chance you can add it there?
How to work with deeply nested 3D transforms? Yes we have Photon.Group but that is only for one level.
I've forked Julian Garnier's Chess 3D project. It uses the Photon CSS package for rendering and up until now the graphics looked great. Today the Google Installer updated my copy of Chrome. The Google Installer recently updated my copy of Chrome and now the graphics looked "washed out" (see attached image). Unfortunately I don't have an image of the graphics before today. Also, sometimes the squares don't always render and instead theirs a dark gray background and nothing else. Has anybody else seen this issue?
I came across something strange, if I apply some rotation to a face element with both rotateX and rotateY set to 90deg, I get this error :
Uncaught TypeError: Cannot call method 'toFixed' of undefined
But if I change one of the rotation values to something else (like 89deg) everything works correctly.
Exemple here : http://jsfiddle.net/JulianG/X7FZA/
At the end of the css, if you replace one of the 90deg values of ".object-3x10 .lt", the problem disappear.
From the web on photon.min.js:9:10045
This is FF60+
Is there a chance that you could add a license to this project?
I think right now it is legally impossible to use this lib without a license text.
Thank You
I'm trying to make a basic "scrunching" map. I've got Photon working somewhat as expected but it doesn't seem to get "darker" when the map folds up.
Maybe my light source is in the wrong place. I've tried moving it around a million different spots. I don't think I understand how it works exactly and I know After Effects and Cinema 4D lighting. :)
Would you care to take a look at it and tell me what I'm doing wrong? I'd really like to wrap my head around Photon. I have a bunch of fun ideas I'd like to play with.
Demo - http://mscns.webfactional.com/example/folding_map/map.html
Repo - https://github.com/CorySimmons/folding_map
Are there any efforts or plans to support interactions on touch devices?
ReferenceError: point is not defined
at FirminCSSMatrix.setMatrixValue (awesome-3d.entry.js:371)
at new FirminCSSMatrix (awesome-3d.entry.js:342)
at Object.buildMatrix (awesome-3d.entry.js:88)
at Photon.Face.getRotations (awesome-3d.entry.js:92)
at new Photon.Face (awesome-3d.entry.js:91)
at Awesome3DComponent.componentDidLoad (awesome-3d.entry.j
`face1: HTMLElement;
face2: HTMLElement;
face3: HTMLElement;
photonFace1;
photonFace2;
photonFace3;
constructor() {
}
componentDidLoad() {
this.light = new (Photon as any).Light();
this.photonFace1 = new (Photon as any).Face(this.face1);
this.photonFace2 = new (Photon as any).Face(this.face2);
this.photonFace3 = new (Photon as any).Face(this.face3);
}
componentDidUpdate() {
console.log(this.photonFace1)
this.photonFace1.render(this.light);
this.photonFace2.render(this.light);
this.photonFace3.render(this.light);
}`
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.