Canvas WebGL ThreeJS
关注
分享
扫一扫
文章平均质量分 84
web绘图引擎，Canvas WebGL，ThreeJS专栏
猿来这样1
编程圈子，谢厂节的博客
展开
-
Canvas库 KonvaJS入门 2坐标体系总结
KonvaJS的几个属性值与坐标都有关系，有时候不容易分清坐标如何计算，本文作个简单总结。为调试方便，本文直接html引用 konvasjs库。注意这时打印的坐标值：可以看到：给group添加事件：初始位置：移动整个组：可以看出分组坐标的变化：可以理解为：测试代码：总结：总结：原创 2022-12-17 10:48:59 · 1511 阅读 · 0 评论 -
Vue2-Canvas库 KonvaJS入门 1 安装与引用
KonvaJS入门 1 安装与引用一、简介二、Vue2下安装与引用1. npm 安装2. 引用3. 使用三、基本图形1. 常用属性3.1.1 config 配置属性2. 文本3. 正方形4. 圆5. 线段下面是画三角形，每个边带0.2弧度。连接与端子形状虚线6. 椭圆7. 楔形一、简介KonvaJS 是一个功能强大的Html5 Canvas库。文档：https://konvajs.org/docs/vue/index.html二、Vue2下安装与引用1. npm 安装npm install原创 2022-05-29 20:33:22 · 2302 阅读 · 1 评论 -
Three.JS学习 2：Threejs定义点和面
3D 组成2点组成直接 不在一条线上三点组成一个三角形面 许多三角形面组成各种形状的物体。这种网格模型叫做Mesh模型。 物体需要贴上纹理，组合展示成3D世界。在Three.js定义一个点先看点的定义：THREE.Vector3 = function (x, y, z) { this.x = x || 0; this.y = y || 0; this.z = z ||原创 2017-01-11 22:40:39 · 5807 阅读 · 0 评论 -
Three.JS学习 3：Threejs画网格
本文学习来源： http://www.hewebgl.com/article/getarticle/57 http://www.cnblogs.com/mythou/p/3327046.html右手直角坐标系各轴之间的顺序要求符合右手法则,即以右手握住Z轴,让右手的四指从X轴的正向以90度的直角转向Y轴的正向,这时大拇指所指的方向就是Z轴的正向.这样的三个坐标轴构成的坐标系称为右手空间直角坐标系原创 2017-01-12 22:37:54 · 8839 阅读 · 0 评论 -
Three.JS学习 4：循环渲染与动画
本文学习内容来源： http://www.hewebgl.com/article/getarticle/58渲染renderer.render(scence,camera);当改变了物体的属性时，需要重新调用render()函数，浏览器才会自动刷新场景。 为了循环渲染，要使用requestAnimationFrame函数，传递一个callback参数。function animate(){原创 2017-01-13 22:25:23 · 4541 阅读 · 0 评论 -
Three.JS学习 5：了解相机
本文学习内容来源： http://www.hewebgl.com/article/getarticle/59认识相机相机对象 THREE.Camera子类THREE.OrthographicCameraTHREE.PerspectiveCamera正射投影又称平行投影，最大特点是无论物体距离相机多远，投影后的物体大小尺寸不变。通常用于建筑蓝图绘制和计算机辅助设计等方面。 构造函数： Or原创 2017-01-14 11:03:53 · 1571 阅读 · 0 评论 -
Three.JS学习 6：光源
本文学习内容主要来自： http://www.hewebgl.com/article/getarticle/60光源基类THREE.Light(hex)：参数是16进制颜色值，如：var light=new THREE.Light(0xFF0000);派生光源环境光构造函数var light = new THREE.AmbientLight( 0xff0000 );scene.add( ligh原创 2017-01-14 11:25:50 · 896 阅读 · 0 评论 -
Three.JS学习 7：使用Canvas画一个时钟
本章节不是Three.JS内容，而是Canvas内容在canvas上画时钟准备工作取一张钟表的背景图过来，放在images/ 文件夹下 准备canvas<html><head> <title>Canvas Clock</title></head><body> <canvas id="myCanvas" width="400" height="400"> Your bro翻译 2017-01-14 11:33:30 · 3149 阅读 · 0 评论 -
Three.JS学习 8：纹理
本文学习内容主要来源于： http://www.hewebgl.com/article/getarticle/68纹理的组成计算机的3D里，纹理是由图片组成。本质上讲， 纹理是图片，由像素点组成。无论在内存还是显存中，它都是由4个分量组成，这四个分量是R、G、B和A。唯一的不同的，在显存中，会比内存中更快的渲染到显示器。因为显存的帧缓冲是与显示器上的像素一一对应的。 只要是图像数据，准确的说是内原创 2017-01-15 17:22:33 · 2228 阅读 · 0 评论 -
Three.JS学习 9：WEBVR 入门demo
本文参考文档主要来源： https://www.sitepoint.com/bringing-vr-to-web-google-cardboard-three-js/本文内容是介绍基于Three.js创建一个可以使用谷歌眼镜演示的WEB虚拟现实网页。准备工作首先需要准备一些js 下载项目： https://github.com/sitepoint-editors/VRWeatherPartic原创 2017-01-15 21:11:38 · 4976 阅读 · 0 评论 -
Canvas 入门1 描边、渐变、图像、阴影、填充
画布 canvas初始化<canvas id="myCanvas" width="200" height="200" border="1"></canvas><script>var c = document.getElementById("myCanvas"); //c.width=200;//c.height=200;</script>画线 <canvas id="myCanvas"原创 2017-12-04 18:42:28 · 5103 阅读 · 0 评论 -
Canvas 入门2 圆、矩形、路径、贝塞尔曲线、Path2D
模板骨架<html> <head> <title>Canvas tutorial</title> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext原创 2017-12-05 08:50:17 · 3450 阅读 · 0 评论 -
Canvas 入门3 Click事件处理
传统的DOM的事件处理机制在Canvas里并不适应.Canvas是一个整体，无法给里面的某个图形增加Javascript事件。由于事件只能达到Canvas元素这一层，所以，如果要识别点击发生在哪一个图形上，需要增加代码进行处理：给Canvas绑定事件事件发生时，检查事件对象的位置检查哪些图形覆盖了该位置给Canvas元素绑定事件cvs = document.getE原创 2017-12-05 22:37:00 · 7811 阅读 · 0 评论 -
Canvas 入门4 鼠标事件综合应用 橡皮筋选取框
本系列文章接下来部分学习资源来自《HTML5 Canvas核心技术 图形、动画与游戏开发》示例 橡皮筋式线条绘制<html> <head> <title>Canvas tutorial</title> <style> body>{background:#eee;} #controls{position:absolute;left:25px;top:25px原创 2017-12-06 08:45:43 · 1507 阅读 · 0 评论 -
Canvas 入门5 在Canvas中使用HTML元素
本文学习资源来自《HTML5 Canvas核心技术 图形、动画与游戏开发》为了让HTML控件放到canvas范围内，可以使用CSS将这些控件放置在canvas之上。 示例：<html> <head> <title>Bouncing Balls</title> <style> body { background: #dddddd原创 2017-12-07 08:22:01 · 5250 阅读 · 0 评论 -
Canvas 入门6 requestAnimationFrame实现动画
本文学习资源来自《HTML5 Canvas核心技术 图形、动画与游戏开发》尽量不要使用setInterval和setTimeout来实现动画，而应该使用requestAnimationFrame()方法来让浏览器自行决定帧速率。由于各个浏览器对requestAnimationFrame()的实现有所区别，首先封装一个兼容函数requestNextAnimationFrame ：window.requ原创 2017-12-07 08:56:41 · 5905 阅读 · 0 评论 -
Canvas 入门7 简单精灵创建
本文学习资源来自《HTML5 Canvas核心技术 图形、动画与游戏开发》精灵概述要制作一个有用的精灵对象，必须让开发者能把它们绘制出来，能够将其放置于动画中的指定位置，并且能以给定的速度将其从一个地方移到另一个地方。精灵对象还可能接受命令，来执行某些特定的动作。 Sprite对象的属性 属性 描述 top 精灵左上角Y left 左上角x width 宽 hei原创 2017-12-07 12:46:38 · 1888 阅读 · 0 评论 -
Canvas 入门8 物理效果
重力公式：重力加速度9.81m/s2，或表示为 32ft/s2。计算将角速度分解为x、y轴上的速度向量vx = speed * Math.cos(angle)vy = spedd * Math.sin(angle)将角加速度分解为x、y轴上的加速度ax = force * Math.cos(angle)ay = force * Math.sin(angle)将加速度加入速度向量vx += ax;原创 2017-12-11 08:35:27 · 739 阅读 · 0 评论 -
CreateJS 学习1 配置
简介CreateJS是基于HTML5开发的一套模块化的库和工具。 基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。中文网网址： http://www.createjs.cc/ API文档： https://www.createjs.com/docs/easeljs/modules/EaselJS.htmlCreateJS主要包含了四个类库：EaselJS - 简化处理原创 2017-12-12 12:41:40 · 983 阅读 · 1 评论 -
CreateJS 学习2 图形与图像使用
本文学习资源来自：https://www.gitbook.com/book/lengziyu/learn-createjs/details圆、矩形、多角形<html> <head> <script src="easeljs.min.js" charset="utf-8"></script> </head> <body onload="init();">原创 2017-12-12 13:22:36 · 1986 阅读 · 0 评论 -
CreateJS 学习3 图像拖动
代码示例1：通过addEventListener添加事件 注意需要给stage启用Touch enable.<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <script src="js/easeljs.min.js"></script> <title>dragtest</title></hea原创 2017-12-14 08:40:50 · 1477 阅读 · 2 评论 -
CreateJS 学习4 动画、TweenJS
水平移动动画示例<html> <head> <script src="easeljs.min.js" charset="utf-8"></script> </head> <body> <canvas id="canvas" width="500" height="300"></canvas> <script>原创 2017-12-16 18:30:38 · 2157 阅读 · 0 评论 -
HTML5 WEBGL学习1 3D基础知识
本系列学习资源来自《HTML5 与WebGL编程》 中国工信出版集团 人民邮电出版社3D 图形的基础知识在计算机里显示3d图形,就是说在平面里显示三维图形。三维坐标系面对计算机在坐标系没有旋转的情况下，z轴实际上垂直屏幕向里的。另外，WEBGL的y轴正方向是由窗口的下方向上，而2D CanvasAPI 和 CSS 变化中的y轴正方向则是由上而下的。网格、多边形与顶点绘制3D图形的方法有很多种。到目前原创 2017-12-16 20:03:22 · 1188 阅读 · 0 评论 -
HTML5 WEBGL学习2 实时3D渲染
本系列学习资源来自《HTML5 与WebGL编程》 中国工信出版集团 人民邮电出版社中文教程地址： http://www.hiwebgl.com/?p=42 项目开源地址： https://github.com/tparisi/Programming3DApplicationsWEB GL不属于HTML5官方标准，但绝大多数支持HTML5的浏览器都支持WebGL。WebGL是一套底层绘图AP原创 2017-12-16 21:03:02 · 2147 阅读 · 0 评论 -
Three.JS提升学习1：创建场景并渲染三维对象
本系列学习内容来自《Three.js开发指南：WebGL的JavaScript 3D库》创建场景并渲染三维对象代码示例：<!DOCTYPE html><html> <head> <title></title> <script src="../libs/three.js"></script> <style> body{margi原创 2017-12-22 12:45:32 · 1172 阅读 · 0 评论 -
Three.JS提升学习2：构建Three.js场景的基本组件
本文学习内容来自《Three.js开发指南：WebGL的JavaScript 3D库》创建场景一个场景想要显示任何东西，需要三种类型的组件： 组件 说明 摄像机 决定屏幕上哪些东西需要渲染 光源 决定材质如何显示以及用于产生阴影 对象 摄像机透视图里主要的渲染对象，如方块、球体等场景的一些方法 方法（属性） 描述 THREE.scene.add 添加对象原创 2017-12-29 08:59:42 · 633 阅读 · 0 评论 -
Three.JS提升学习3：粒子
一理解粒子使用THREESprite创建简单粒子使用THREEPointCloud处理大量粒子给粒子使用样式使用HTML5画布样式化粒子在THREECanvasRenderer中使用HTML5画布在WebGLRenderer中使用HTML5画布使用纹理样式化粒子使用精灵贴图从高级几何体创建THREEPointCloud本文学习资源来自《Three.js开发原创 2018-01-09 08:13:25 · 1096 阅读 · 0 评论 -
Three.JS提升学习4：几何体对象组合
对象组合sphere = createMesh(new THREE.SphereGeometry(5, 10, 10));cube = createMesh(new THREE.BoxGeometry(6, 6, 6));group = new THREE.Object3D();group.add(sphere);group.add(cube);scene.add(group);原创 2018-01-10 09:25:46 · 1896 阅读 · 0 评论 -
Three.JS提升学习5：从外部加载几何体
本文学习资源来自《Three.js 开发指南：WebGL的JavaScript 3D库》从外部加载几体体支持的三维格式Three.js 可以读取几种三维文件格式，并从中导入几体体和网格，支持的文件格式有： 格式 描述 JSON Three.js自己的JSON文件格式 OBJ或MTL OBJ是一种简单的三维文件格式，由Wavefron原创 2018-01-17 09:10:45 · 1957 阅读 · 0 评论 -
Three.JS提升学习6：创建动画和移动摄像机
*本文学习资源来自《Three.js开发指南 WebGL的JavaScript 3D库》基础动画基础渲染函数render();function render(){ renderer.render(scene, camera); requestAnimationFrame(render);}简单动画我们可以通过改变物体的旋转、缩放、位置、材质、顶点、面以及其它原创 2018-02-01 08:51:32 · 3014 阅读 · 0 评论