今天郭先生说一说使用cannon.js物理引擎绘制地形和使用指针锁定控件.效果如下图.线案例请点击博客原文. 这里面的生成地形的插件和指针锁定控件也是cannon.js的作者schteppe封装的,当然也可以自己写一个这样的小插件.好的我们先说说这两个插件的使用方法,然后结合一个小案例应该他们. 1. 地形生成插件 相信一些同学玩过我的世界这款游戏,它的地形就是由好多个规格相同的正方体组成.就像下面这样 那么VoxelLandscape.js能够很好的实现这样的地形生成,我们先来看看生成地形构造…

年后第一天上班,郭先生来说一说cannon.js的ConvexPolyhedron(多边形),cannon.js是一个物理引擎,内部通过连续的计算得到各个时间点的数据的状态,three.js的模型可以定时的应用这些状态来达到运动的效果,但是在应用的时候cannon数据模型和three模型一般都是不同的(而且多数情况下都是不一样的),因为更大的cannon数据模型会带来更多的性能问题,并且有的时候是没有必要的,比如说上一篇我们用圆柱来模拟保龄球瓶.但是有一些时候还是需要使用相对复杂的cannon多…

今天郭先生说一说cannon.js物理引擎之Heightfield高度场,学过场论的朋友都知道物理学中把某个物理量在空间的一个区域内的分布称为场,高度场就是与高度相关的场,而cannon.js物理引擎的Heightfield的高度就是关于两个变量的函数,可以表达为HEIGHT(i,j).当然知不知道场论不耽误我们学习Heightfield,下面就是一个由Heightfield生成的高度场,在线案例请点击博客原文.我们来说一说它的用法. 1. Heightfield的用法 说用法之前我们不妨看看他…

今天郭先生说一说使用cannon.js的车辆辅助类让我们的汽车模型拥有物理特性.效果图如下,在线案例请点击博客原文. 下面我们说一下今天要使用的两个类,并简单的看看他们的物理意义 1. RaycastVehicle类 这是车辆辅助类,将光线从车轮位置投射到地面并施加力.它决定车的位置,角度,质量等信息.下面是它的构造函数 RaycastVehicle ( [options] ) options一共有四个参数,并且比较好理解, chassisBody – 表示车身的刚体 indexForwardA…

关于cannon.js我们已经学习了一些知识,今天郭先生就使用已学的cannon.js物理引擎的知识配合three基础知识来做一个保龄球小游戏,效果如下图,在线案例请点击博客原文. 我们需要掌握的技能点,就是已经学过的cannon.js物理引擎知识.three.js车削几何体.threeBSP和简单的shaderMaterial.下面我们来详细的说一说如何制作这个游戏. 1. 设计游戏 因为我们已经使用过一些物理引擎,所以第一步我们很容易想到要用three做地面网格和墙面网格并为他们生成尺寸相当…

郭先生今天继续说一说cannon.js物理引擎,并用之前已经学习过的知识实现一个小动画,知识点包括ConvexPolyhedron多边形.Shape几何体.Body刚体.HingeConstraint铰链约束等等知识.因为我之前用纯three.js 的THREEBSP实现过一个静态的齿轮,现在就想配合cannon.js让它的转动更加的符合实际而不是匀速转动.下面我们来说说我们要做的这个案例,这个小案例是由5个齿轮组成,左面两个是固定齿轮,最左面的是有动力的齿轮,我们可以控制它的速度,而右面三个齿…

今天郭先生继续说cannon.js,主演内容就是点对点约束和2D坐标转3D坐标.仍然以一个案例为例,场景由一个地面.若干网格组成的约束体和一些拥有初速度的球体组成,如下图.线案例请点击博客原文. 下面来说说如何使用约束来完成一个这样的物理场景. 1. 创建three场景 这一步是基础工作,对于有一定three基础的同学都不会陌生,我就直接上代码了. initThree() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCam…

今天郭先生继续讲cannon.js的物理约束,之前的一篇文章曾简单的提及过PointToPointConstraint约束,那么今天详细的说一说cannon.js的约束和使用方法.在线案例请点击博客原文. 1. cannon.js约束的种类 1. PointToPointConstraint点对点约束 它的构造函数如下(之前可能介绍过了,这次统一说) PointToPointConstraint ( bodyA pivotA bodyB pivotB maxForce ) bodyA - 刚体A…

[原]js中实现子页面向父页面中赋值 (方法一) 父页面:<input  id="input1" type="text"/><a href="javascript:window.open('test1.aspx');void(0)">弹出新的子窗口</a> 子页面:<input id="input2" type="text" /><input id=&q…

var repeaterId = '<%=rpData.ClientID %>'; //Repeater的客户端IDvar rows = <%=rpData.Items.Count%>; //Repeater的行数…

今天郭先生说的是一个物理引擎,它十分小巧并且操作简单,没错他就是cannon.js.这些优点都源自于他是基于js编写的,对于js使用者来说cannon.js拥有其他物理引擎没有的纯粹性.从学习成本来看,cannon.js的学习成本比较低,对于新手来说比较友好,因为它有相对完善的api,学习cannon.js之前我们不妨来看看cannons.js的官方网站以及他的API,对于js学习者来说这是十分必要的.官网上面有一些example,他们十分典型并囊括了大多数的知识点,配合api一起学习是个不错的…

计划做一个宇宙飞船模拟程序,首先做一些技术准备. 可以访问https://ljzc002.github.io/test/Spacetest/HTML/PAGE/spacetestwp2.html查看测试场景,按住qe键可以左右倾斜相机.可以在https://github.com/ljzc002/ljzc002.github.io/tree/master/test/Spacetest查看程序代码,因时间有限,github上的代码可能和本文中的代码有少许出入. 主要内容: 一.程序基础结构 二.场景…

github地址:https://github.com/hua1995116/Fly-Three.js 大家好,我是秋风.继上一篇<Three.js系列:   游戏中的第一/三人称视角>今天想要和大家分享的呢,是做一个海洋球池. 海洋球大家都见过吧?就是商场里非常受小孩子们青睐的小球,自己看了也想往里蹦跶的那种. 就想着做一个海洋球池,然后顺便带大家来学习学习 Three.js 中的物理引擎. 那么让我们开始吧,要实现一个海洋球池,那么首先肯定得有"球"吧. 因此先带大家来…

很简单,如下: 父页面:(弹出提示框) function newwindow(obj) { var rtn = window.showModalDialog('NewPage.htm','','status=no,scrollbars=no,top=20,left=110,width=420,height=165'); var div = document.getElementById("div1"); div.innerHTML=rtn; } 子页面: function pagein…

[源码下载] 背水一战 Windows 10 (64) - 控件(WebView): 加载指定 HttpMethod 的请求, 自定义请求的 http header, app 与 js 的交互 作者:webabcd 介绍背水一战 Windows 10 之 控件(WebView) 加载指定 HttpMethod 的请求 自定义请求的 http header app 与 js 的交互 示例1.演示 WebView 如何加载指定 HttpMethod 的请求以及如何自定义请求的 http header…

JS日历控件优化      在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下:      1. 在原基础上 支持 yyyy-mm-dd 的年月日的控件.      2. 在原基础上增加支持 yyyy-mm-dd HH:MM 年月日时分的控件.      3. 在原基础上增加支持 yyyy-mm-dd HH:MM:SS 年月日时分秒的控件.      4. 增加确定按钮 及 今天 和关闭按钮.当我切换到其他年份的时候,我点击 &q…

js如何获取asp.net服务器端控件的值(label,textbox,dropdownlist,radiobuttonlist等) 欢迎访问原稿:http://hi.baidu.com/2wixiao/blog/item/68c9acd40ac9612006088b6f.html 在做 BS架构的项目时,经常遇到 需要用js 来调用 asp.net 服务器端控件的值. 大多数的 控件他的值都可以通过js调用它的 value属性来获得此控件的值,但是也有例外的情况:如 Label控件,他的值用j…

 在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时仅仅支持 年月日 的日历控件,如今优化例如以下:      1. 在原基础上 支持 yyyy-mm-dd 的年月日的控件.      2. 在原基础上添加支持 yyyy-mm-dd HH:MM 年月日时分的控件.      3. 在原基础上添加支持 yyyy-mm-dd HH:MM:SS 年月日时分秒的控件.      4. 添加确定button 及 今天 和关闭button. 当我切换到其它年份的时候,我点击 &qu…

下载demo - 37.1 KB 下载source code - 48.7 KB 背景 这种控制方式的灵感来自于一种名为Wordle的基于网络的免费单词云生成器.实际上,这个控件是我的项目http://sourcecodecloud.codeplex.com的一种衍生产品. 我非常喜欢Wordle产生的可视化,但我的目标是编写一个非基于web的本地解决方案来处理大量的敏感数据.我在web上找到了许多组件,但是当处理文本和可视化或布局不是我期望的那样时,它们中的大多数都有非常纯粹的性能. 体系结构…

Matter.js 是一个 JavaScript 2D 刚体物理引擎的网页.Matter.Engine 模块包含用于创建和操作引擎的方法.这个引擎是一个管理更新和渲染世界的模拟控制器. Matter.js 目前是测试版本,这意味着 API 仍在开发中,可能偶尔会发生变化. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很…

P2简介 P2是一款基于Javascript编写的HTML5 2D物理引擎,和Box2D.Nape等2D物理引擎一样,P2集成了各种复杂的物理公式和算法,可以帮助我们轻松的实现碰撞.反弹等物理现象的模拟. 学习资料 P2 API认识HTML5物理引擎P2 p2.js GITHUB下载地址 元素介绍 World(世界),这就是一个模拟的物理世界,所有的刚体和约束创建后都要放进来. Body(刚体),它是一块无限坚硬的物体.因此,在这块物体上任何两点之间的距离都被认为是固定的.Body(刚体)有自己…

太久没有更新了,新年回来工作,突然有收到网友的邮件提问,居然还有人在关注,惭愧,找了下电脑上还有一点儿存着,顺便先发这一个番外篇吧,好歹可以看到真实的效果,等我考完英语,一定会更新下一章,"愤怒的小鸟篇" 此篇,并不是书中的篇符,而是通过希望通过结合实际的canvas 绘图库实现box2d物理引擎在各绘图库上应用,绘图库网上有很多现成的 如:createjs, pixi.js 等,Egret或者其它游戏引擎有自己的物理引擎扩展库,所以就不说了. 现在通过之前的学习,基本掌握了刚体等基础…

前一段时间项目组里有一些H5动画的需求,由于没有专业的前端人员,便交由我这个做后台的研究相关的H5动画技术. 通过初步调研,H5动画的实现大概有以下几种方式: 1.基于css实现 这种方式比较简单易学,但是能实现的效果也相对简单.一般都是对H5元素的平移,旋转,缩放等.适用于网页中的一些简单动画,对于由许多元素相互联系的复杂动画实现起来有些难度.当然也有基于css实现的比较复杂的动画(如:人物的行走),但是难度比较大.css动画教程:http://www.cnblogs.com/tengpan-…

artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库. <script src="js/template.js" type="text/javascript" charset="utf-8"></script> 引入以后,我们就可以调用它的方法啦.作者提供了两种写法,一种是简洁…

2013-12-11 发布 Jade —— 源于 Node.js 的 HTML 模板引擎 开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读  ·  读完需要 69 分钟 54 Jade 是一个高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用. 试玩 你可以在网上试玩 Jade. 特性 客户端支持 代码高可读 灵活的缩进 块展开 Mixins 静态包含 属性改写 安全,默认代码是转义的 运行时和编译时上下文错误…

后台渲染模板如swig,也使用“{{ }}“作为渲染,与前端vue的产生冲突,此时只要在新建Vue对象时,添加delimiters: ['${', '}'],就搞定了,代码如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=d…

这是一个类似第三人称射击游戏(TPS)的3D场景,可以通过https://ljzc002.github.io/FPS2/index.html访问.场景运行效果如下图: 场景环境由一个天空盒和一个地面网格组成,屏幕中央是准星,左下部带有纹理的球体代表玩家模型,玩家模型外的绿网是玩家模型的物理仿真器,玩家模型的背部的随机字符表示玩家id,玩家模型的右前方是一个枪械模型,每隔一段时间场景中刷新一个球体网格代表射击目标,场景的右上角是一个以玩家为中心的小地图. 直接移动鼠标即可调整游戏视角,使用WASD…

最近发现了Github上的开源物理引擎项目Matter.js,对它很感兴趣,发现源码并不算长,算上注释大约1万行左右,值得剖析一番.Matter.js实现一个最小化的2D物理引擎,性能不错,故打算用C#重写并学习之. 由于JS是弱类型,而C#是强类型的,所以不得不还原相应的类型.在重写过程中,我也发现了源码中的一些问题,以及代码冗余,不过都无关紧要.在一万行之内实现一个简单的物理引擎本来就很令人激动了,这样可以以最小的工作量来熟悉物理引擎. 重写过程中,渲染用自带GDI实现,所以只需考虑物理引擎…

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