使用 requestAnimationFrame 强行渲染

requestAnimationFrame/cancelAnimationFrame——性能更好的js动画实现方式

用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升.但是css3动画还是有不少局限性,比如不是所有属性都能参与动画.动画缓动效果太少.无法完全控制动画过程等等.所以有的时候我们还是不得不使用setTimeout或setInterval的方式来实现动画,可是setTimeout和setInterval有着严重的性能问题,虽然某些现代浏览器对这两函个数进行了一些优化,但还是

浏览器-04 WebKit 渲染2

渲染主循环(main loop)和requestAnimationFrame requestAnimationFrame 使用requestAnimationFrame而非setTimeout/setInterval绘制动画; requestAnimationFrame:告诉浏览器JavaScript想发起一个动画帧,然后在动画帧绘制之前,需要做一些动作,这样浏览器可以根据需要来优化自己的 mainloop机制和调用时间点,以达到较好地平衡效果; var start = null; var el

Three.js基础部分学习

一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件 <场景 A scene.相机a camera.渲染器 a renderer 三者缺一不可> To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the sc

基于HTML5的WebGL结合Box2DJS物理应用

上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是二维的平面碰撞物理引擎,但同样通过3D的呈现能让人更直观的体验到碰撞效果,最终例子效果: http://hightopo.com/demo/box2djs/ht-box2d-demo.html Box2D最早是Erin Catto在GDC大会上的一个展示例子,后来不断完善成C++的开源物理引擎库,这

基于HTML5的WebGL结合Box2DJS物理引擎应用

上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是二维的平面碰撞物理引擎,但同样通过3D的呈现能让人更直观的体验到碰撞效果,最终例子效果: http://hightopo.com/demo/box2djs/ht-box2d-demo.html Box2D最早是Erin Catto在GDC大会上的一个展示例子,后来不断完善成C++的开源物理引擎库,这

基于HT for Web 3D呈现Box2DJS物理引擎

上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是二维的平面碰撞物理引擎,但同样通过3D的呈现能让人更直观的体验到碰撞效果,先上张最终例子效果图: Box2D最早是Erin Catto在GDC大会上的一个展示例子,后来不断完善成C++的开源物理引擎库,这些年了衍生出Java.ActionScript以及JS等版本,被广泛应用在游戏领域.说其丰富的确

ueditor 单独图片上传转载

<body> <script type="text/javascript"> //这个是图片上传的,网上还有附件上传的 (function($) { var image = { editor: null, init: function(editorid, keyid) { var _editor = this.getEditor(editorid); _editor.ready(function() { //设置编辑器不可用 _editor.setDisable

uEditor独立图片上传

项目中.上传图片,非常希望有一款比较兼容的查件. 网上找了一些,图片上传立刻显示的js代码,还有uploadify.都会碰到这样那样的不兼容和其它头疼的问题. 后来想,干脆就用php的上传类最干脆.但是却不美观. 觉得ueditor的图片上传不错. 于是到网上搜索了一番.发现,确实有.不过,看不太懂,就照搬了. 不过,ueditor的图片上传其实不是完全的独立.还是需要实例化ueditor这个家伙的,只不过是隐藏了而已.仅仅显示了图片功能. 网上一搜“ueditor独立图片”,很多的,我就不多说

【转】265行JavaScript代码的第一人称3D H5游戏Demo

译文:http://blog.jobbole.com/70956/ 原文:http://www.playfuljs.com/a-first-person-engine-in-265-lines/ 这是一篇关于利用 Canvas 实现3D 游戏场景绘制的文章,看完感觉很受启发,所以自己准备总结一下.我们先看下最终效果: 很酷是不是.原作者只使用了265行代码就实现了这么炫酷的效果.代码清晰明,目录结构简答(1个html, 4个图片),原文也对原理也进行了解释.本篇就直接将原作者的代码全部贴上来大家

ueditor 1.4.3.2 独立/单独上传图片框原理

其实简单的说就是编辑框很多按钮,所有按钮的功能都是以command形式提供,所以execCommand就是执行这些功能的命令.有些按钮是能弹出显示一个对话框,他的基类就是dialog,而所有被弹出的dialog框子都在dialogs文件夹中,也就是说逻辑就在那里面.我们上传图片完事后会有个确认和取消的按钮,这个按钮来自于dialog基类,这个类厘米有个onok就是我们关注的内容了,点击确定了才能将文件插入到编辑框文档中嘛,所以关注它,在这个代码逻辑中确实实现了该按钮的功能,也就是上述的execC

Threejs基础学习【修改版】

一. Three.js官网及使用Three.js必备的三个条件 1.Three.js 官网 https://threejs.org/ 2.使用Three.js必备的三个条件(To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.) 大致意思是使用

用three.js创建一个简易的天空盒

本文创建的天空盒是用六张图片来创建的.笔者会论述两种方法来创建,都是最简单基本的方法,不涉及着色器的使用.一种是创建一个盒子,然后将图片作为盒子6个面的纹理贴上来创建.另一种则是简单的将纹理作为场景的背景来创建.两种方法视觉效果是几乎没区别的,会给人身临其境的效果,感觉身处在这个3维空间里,最明显的区别就在于当你在用鼠标滚轮缩进的时候,天空盒会"原形毕露",暴露出其盒子的本性,视觉效果原理展现在你的眼前.如图所示:而作为背景的方法创建的话,则无论你怎么缩进,都不会"原形毕露&

记录近期面试题，面试总结 (从css - vue 全面面试题)

记录近期换工作时遇到的面试题和面试题答案 css 部分盒模型问题:说一下 css 的盒模型盒模型分为标准模型和怪异盒模型(IE 盒模型) 标准盒模型:盒模型的宽高只是内容(content)的宽高怪异盒模型:盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高问题:css 如何设置两种模型 /* 标准模型 */ box-sizing:content-box; /*IE模型*/ box-sizing:border-box; 问题:有没有遇到过边距重叠,

js 3d图形

使用Three.js在网上中进行3D图形的展示 Three.js的官网https://threejs.org/ 第一个Demo,生成一个旋转的正方体 <style> canvas { width: 100%; height: 100% } </style> <script src="https://cdn.bootcss.com/three.js/92/three.js"></script> <script> var scen

Three.js基础学习【修改版】

一. Three.js官网及使用Three.js必备的三个条件 1.Three.js 官网 https://threejs.org/ 2.使用Three.js必备的三个条件(To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.) 大致意思是使用

JQuery3 的新变化

1. for-of 循环 for-in 循环不被推荐遍历数组,forEach 循环不能中断,for-of 循环(ES6)则弥补了前两者的不足,又添加了更多拓展(比如能遍历字符串,DOM 元素等) 因此 jquery3 也加入了 for-of 循环的支持,即: var $inputs = $('input'), i = 0; for(var input of $inputs) { input.id = 'input-' + i++; } 注意:可见上例 for-of 中的 input 是DOM 元

setTimeout和setImmediate到底谁先执行，本文让你彻底理解Event Loop

笔者以前面试的时候经常遇到写一堆setTimeout,setImmediate来问哪个先执行.本文主要就是来讲这个问题的,但是不是简单的讲讲哪个先,哪个后.笼统的知道setImmediate比setTimeout(fn, 0)先执行是不够的,因为有些情况下setTimeout(fn, 0)是会比setImmediate先执行的.要彻底搞明白这个问题,我们需要系统的学习JS的异步机制和底层原理.本文就会从异步基本概念出发,一直讲到Event Loop的底层原理,让你彻底搞懂setTimeout,s

threejs 基础概要

threejs 基础概要点击查看官方文档下面是翻译的内容(稍作修改) 先了解一下Three.js应用程序的结构.Three.js应用程序需要创建一堆对象并将它们连接在一起.下图表示一个小three.js应用程序的图. 关于上图的注意事项 Renderer 渲染器,将一个场景和一个摄像机传递给渲染器,它就会将摄像机截锥内的3D场景部分作为2D图像呈现给画布. 有一个树状结构的场景图,其中包括各种物体,如Scene对象,多个 Mesh对象,Light对象,Group,Object3D,和Came

强行在MFC窗体中渲染Cocos2d-x 3.6

[前言] 把Cocos2dx渲染到另一个应用程序框架中的方法,在2.x时代有很多大神已经实现了,而3.x的做法网上几乎找不着.这两天抽空强行折腾了一下,不敢独享,贴出来供大家参考. [已知存在的问题] 程序退出时会发生非常严重的内存泄漏,博主检查了很久,但技术不够暂时无法解决.如果有大神能搞定,求告知一下做法,谢谢! 在程序从开始运行到关闭期间,有且仅有一个cocos2dx窗体存在时可以选择性无视内存泄漏.如果非常在意这一点,建议使用cocos2d-x 2.2.6这个版本,放在MFC中的内存泄漏

【续】强行在C# Winform中渲染Cocos2d-x 3.6

[前言] 上一篇讲了怎么把Cocos2d-x 3.6渲染进MFC窗体,这里来讲一下怎么在C# Winform中做到同样的功能.如果你不熟悉MFC的使用但对C# Winform比较在行,请往下看. 这一篇是作为上一篇的副属文,所以文中提到的部分操作需要在上一篇中找……博主懒逼不在这复制粘贴了. [核心思想] 同上一章不同的是,C#是托管环境,并不能直接用“对象.方法()”这样的形式来访问Cocos层的代码.我们需要在其间建立一个DLL层(C++编写)作为Cocos层的接口,让C#通过接口来控制Co

CSS3动画那么强，requestAnimationFrame还有毛线用？

一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,万种迷人的requestAnimationFrame,呵呵呵呵.很高兴和大家见面,请多指教! .... 咳咳,大家不要一副不屑的样子嘛.跟你讲,我可是很有用的.所谓人如其名,看我名字这么长,表意为“请求动画帧”,明摆着一副很屌的样子! ....按照这种说法,“樱桃小丸子”就是樱桃做的丸子咯,恩,看脑袋确实蛮像的~ .... 想到明天就是国庆大假,今天我就小人不记大人过.给你们来副震精

使用 requestAnimationFrame 强行渲染

热门专题