Skip to content
/ F3.js Public

Fake 3D,实现在 canvas(Context2d) 上绘制 3D 场景。

Notifications You must be signed in to change notification settings

gnauhca/F3.js

Repository files navigation

F3.js

Fake 3D,实现在 canvas(Context2d) 上绘制 3D 场景。

用三维坐标定义物体位置,在绘制的时候转换成对应的屏幕坐标实现简单的三维效果。

用法:

  • F3.Camera // 相机
  • F3.Scene // 场景,添加物体
  • F3.Obj // 物体
  • F3.Renderer // 渲染器
  • F3.TIME // 全局时间
  • F3.Time // 时间
  • F3.Vector3 // 三维向量,直接参考 three.js Vector3
  • F3.Euler // 欧拉角,描述旋转,直接参考 three.js Euler

向量 F3.Vector3

二维向量都可以用三维向量替代(z=0),api 参考 https://threejs.org/docs/index.html?q=Vector3#Reference/Math/Vector3

旋转 F3.Euler

描述旋转,api 参考 https://threejs.org/docs/index.html?q=Euler#Reference/Math/Euler

一个简单的应用,一个向量沿着 x 轴旋转 a,

let e = new F3.Euler(a, 0, 0);
let v = new F3.Vector(1, 1, 1);
v.applyEuler(e); // 向量 v 应用该旋转
// 得到旋转之后新的向量值

相机 F3.Camera

let camera = new Camera(1200, new F3.Vector3(cvs.width/2, cvs.height/2, 0));

构造函数

Camera(perspective, originVec);

perspective

{init} 相机到屏幕的距离

originVec

{Vector3} 相机正视屏幕的点-(z=0)

方法:

getScaleByZ(z)

根据 z 轴的值求出对应缩放值,返回缩放值 scale

get2DCrood(vec3)

三维坐标转换成对应到屏幕的二维坐标(z=0)

物体 Obj

let o = new F3.Obj;
o.position = new F3.Vector3(...);
o.render = function() {... use this.croods2D to draw something } // 自定义 render 方法

属性:

position

{Vector3} 物体坐标,如果有父母节点,就是相对父母节点的坐标,否则相对坐标原点(0,0,0)

scale

{Vector3} 缩放向量默认 (1,1,1)

rotation

{Euler} 物体的旋转值

vertices

{Array} 向量数组,如果在 render 方法需要需要使用多个点时定义,这些点是相对物体位置定义的

croods2D

{Object} 二维平面需要使用的属性,可在 render 方法里使用,在 render 方法被调用之前由 F3.js 自动计算出来

  • croods2D.scale 使用相机 getScaleByZ 计算出来的缩放值,一般可用于在 render 方法里设置所画物件的大小,例如:画圆的时候,可以使用这个值动态设置半径
  • position 物体 position 对应二维平面的坐标(z=0)
  • vertices 向量数组对应二维平面的坐标(z=0) render 方法需要使用多个点时使用

方法:

render(ctx, cvs)

render方法,物体具体的绘画函数,需要用户重写,参数是 Renderer 里的 ctx 和 cvs,

add(Obj)

添加一个子物体,子物体的位置相对与当前物体定义

remove(Obj)

移除子物体

场景 Scene

用于添加物体

let o = new F3.Obj;
let scene = new F3.Scene;
scene.add(o);

属性

objs

{Array} 物体数组

方法

add(Obj)

添加一个物体

remove(Obj)

移除子物体

Renderer

渲染器

let camera = new F3.Camera(...)
let scene = new F3.Scene
// create some  obj & scene add some objs...
let cvs = document.querySelector('canvas');
let ctx = cvs.getContext('2d');
let renderer = new F3.Renderer(ctx, cvs);
renderer.render(scene, camera);

构造函数

Renderer(ctx, cvs)

ctx

canvas 上下文对象,亦是属性

cvs

canvas 对象,亦是属性

方法

render(scene, camera)

将 camera 看到 scene 的内容渲染到 canvas 上

beforeRender

钩子,每次渲染之前需要做的事情,默认是清除画布,可重写

afterRender

钩子,每次渲染之后需要做的事情,可重写

时间 TIME

全局时间

F3.TIME.start();

方法

start

开始全局时间

stop

暂停全局时间

时间对象 Time

let time = new F3.Time;
F3.TIME.start();

由全局时间管理,全局时间 start 之后才工作

方法

start

开始当前时间对象时间

stop

暂停当前时间对象时间

addTick(fn)

添加帧任务,每一帧都会被调用,返回值是帧任务对象,fn 是回调函数,参数是帧时间间隔 delta

removeTick(task)

移除帧任务,参数是需要移除的帧任务对象

addTween(tween)

添加 tween ,参考 https://github.com/tweenjs/tween.js

removeTween(tween)

移除 tween

正在完善... 请参考 demo 文件夹 或直接在我的 codepen 查看

Demo picture

About

Fake 3D,实现在 canvas(Context2d) 上绘制 3D 场景。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published