- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个需要物理引擎的站点。
使用过许多 SPA 应用程序后,我对此非常有信心。
不幸的是,我无法将碰撞检测和墙壁应用于著名的物理模拟。
您可以在此处查看可编辑示例。
https://staging.famous.org/examples/index.html?block=gravity3d&detail=false&header=false
var FamousEngine = famous.core.FamousEngine;
var Camera = famous.components.Camera;
var DOMElement = famous.domRenderables.DOMElement;
var Gravity3D = famous.physics.Gravity3D;
var Gravity1D = famous.physics.Gravity1D;
var MountPoint = famous.components.MountPoint;
var PhysicsEngine = famous.physics.PhysicsEngine;
var Physics = famous.physics;
var Wall = famous.physics.Wall;
var Position = famous.components.Position;
var Size = famous.components.Size;
var Sphere = famous.physics.Sphere;
var Vec3 = famous.math.Vec3;
var Collision = famous.physics.Collision;
function Demo() {
this.scene = FamousEngine.createScene('#socialInteractive');
this.camera = new Camera(this.scene);
this.camera.setDepth(1000);
this.simulation = new PhysicsEngine();
this.items = [];
this.collision = new Collision();
var Wall = famous.physics.Wall;
var rightWall = new Wall({
direction: Wall.LEFT
}); // bodies coming from the left will collide with the wall
rightWall.setPosition(1000, 0, 0);
var ceiling = new Wall({
normal: [0, 1, 0],
distance: 300,
restitution: 0
});
var floor = new Wall({
normal: [0, -1, 0],
distance: 300,
restitution: 0
});
var left = new Wall({
normal: [1, 0, 0],
distance: 350,
restitution: 0
});
var right = new Wall({
normal: [-1, 0, 0],
distance: 350,
restitution: 0
});
var node = this.scene.addChild();
var position = new Position(node);
// this.simulation.attach([right, left, floor, ceiling])
// this.items.push([ceiling,position]);
for (var i = 0; i < 10; i++) {
var node = this.scene.addChild();
var size = new Size(node).setMode(1, 1);
var position = new Position(node);
if (i === 0) {
createLogo.call(this, node, size, position);
}
if (i !== 0) {
node.id = i;
createSatellites.call(this, node, size, position);
}
}
FamousEngine.requestUpdateOnNextTick(this);
console.log(this.collision)
for (var i = 0; i < this.collision.length; i++) {
this.simulation.attach(collision, balls, balls[i]);
}
this.simulation.addConstraint(this.collision);
}
Demo.prototype.onUpdate = function(time) {
this.simulation.update(time);
this.collision.update(time, 60);
if (this.items.length > 0) {
for (var i = 0; i < this.items.length; i++) {
var itemPosition = this.simulation.getTransform(this.items[i][0]).position;
this.items[i][1].set(itemPosition[0], itemPosition[1], 0);
}
}
FamousEngine.requestUpdateOnNextTick(this);
};
function createLogo(node, size, position) {
size.setAbsolute(50, 50);
var mp = new MountPoint(node).set(0.5, 0.5);
var el = new DOMElement(node, {
tagName: 'img',
attributes: {
src: './images/famous-logo.svg'
}
});
var sphere = new Sphere({
radius: 100,
mass: 10000,
restrictions: ['xy'],
position: new Vec3(window.innerWidth / 2, window.innerHeight / 2, 5)
});
this.gravity = new Gravity3D(sphere);
this.simulation.add(sphere, this.gravity);
this.items.push([sphere, position]);
}
function createSatellites(node, size, position, i) {
size.setAbsolute(20, 20);
var radius = 200;
var x = Math.floor(Math.random() * radius * 2) - radius;
var y = (Math.round(Math.random()) * 2 - 1) * Math.sqrt(radius * radius - x * x);
var color = 'rgb(' + Math.abs(x) + ',' + Math.abs(Math.round(y)) + ',' + (255 - node.id) + ')';
var el = new DOMElement(node, {
properties: {
'background-color': color,
'border-radius': '50%'
}
});
var satellite = new Sphere({
radius: 20,
mass: 5,
position: new Vec3(x + window.innerWidth / 2, y + window.innerHeight / 2, 0)
});
satellite.setVelocity(-y / Math.PI, -x / Math.PI / 2, y / 2);
this.gravity.addTarget(satellite);
this.simulation.add(satellite);
this.items.push([satellite, position]);
this.collision.addTarget(satellite);
}
// Boilerplate
FamousEngine.init();
// App Code
var demo = new Demo();
最佳答案
感谢您的帮助 Talves,我想我找到了一个适用于物理 Spring 而不是gravity3d 的解决方案。这也包括 4 面墙,看起来效果很好。
var famous = famous;
var FamousEngine = famous.core.FamousEngine;
var Camera = famous.components.Camera;
var DOMElement = famous.domRenderables.DOMElement;
var Gravity3D = famous.physics.Gravity3D;
var MountPoint = famous.components.MountPoint;
var PhysicsEngine = famous.physics.PhysicsEngine;
var Position = famous.components.Position;
var Size = famous.components.Size;
var Wall = famous.physics.Wall;
var Sphere = famous.physics.Sphere;
var Vec3 = famous.math.Vec3;
var math = famous.math;
var physics = famous.physics;
var collision = famous.physics.Collision;
var gestures = famous.components.GestureHandler;
var Spring = famous.physics.Spring;
console.log(famous)
var anchor = new Vec3(window.innerWidth / 2, window.innerHeight / 2, 0);
//Create Walls
var rightWall = new Wall({
direction: Wall.LEFT
}).setPosition(window.innerWidth - 20, 0, 0);
var leftWall = new Wall({
direction: Wall.RIGHT
}).setPosition(window.innerWidth + 20, 0, 0);
var topWall = new Wall({
direction: Wall.DOWN
}).setPosition(0, 20, 0);
var bottomWall = new Wall({
direction: Wall.UP
}).setPosition(0, window.innerHeight - 20, 0);
function Demo() {
this.scene = FamousEngine.createScene('body');
this.camera = new Camera(this.scene);
this.camera.setDepth(1000);
this.collision = new collision([rightWall, leftWall, topWall, bottomWall]);
this.simulation = new PhysicsEngine();
this.simulation.setOrigin(0.5, 0.5);
this.simulation.addConstraint(this.collision);
this.items = [];
this.walls = [];
//Create Items
for (var i = 0; i < 30; i++) {
var node = this.scene.addChild();
node.setMountPoint(0.5, 0.5);
var size = new Size(node).setMode(1, 1);
var position = new Position(node);
if (i === 0) {
createLogo.call(this, node, size, position);
}
if (i !== 0) {
node.id = i;
createSatellites.call(this, node, size, position);
}
}
//Create Walls
var node = this.scene.addChild();
createWalls(node);
FamousEngine.requestUpdateOnNextTick(this);
Demo.prototype.onUpdate = function(time) {
this.simulation.update(time);
//Postition walls
var wallPosition = topWall.getPosition();
node.setPosition(wallPosition.x, wallPosition.y);
//Position elements
if (this.items.length > 0) {
for (var i = 0; i < this.items.length; i++) {
var itemPosition = this.simulation.getTransform(this.items[i][0]).position;
this.items[i][1].set(itemPosition[0], itemPosition[1], 0);
}
}
FamousEngine.requestUpdateOnNextTick(this);
};
}
function createWalls(wallNode) {
wallNode.setSizeMode('absolute', 'absolute', 'absolute').setAbsoluteSize(window.innerWidth, 10, 0);
var wallDOMElement = new DOMElement(wallNode, {
tagName: 'div'
}).setProperty('background-color', 'lightblue');
}
function createLogo(node, size, position) {
size.setAbsolute(50, 50);
var mp = new MountPoint(node).set(0.5, 0.5);
var el = new DOMElement(node, {
tagName: 'img',
attributes: {
src: './images/famous_logo.png'
}
});
var sphere = new Sphere({
radius: 100,
mass: 10000,
restrictions: ['xy'],
position: new Vec3(window.innerWidth / 2, window.innerHeight / 2, 5)
});
// this.gravity = new Gravity3D(sphere);
// this.simulation.add(sphere, this.gravity);
this.simulation.add(sphere);
this.items.push([sphere, position]);
}
function createSatellites(node, size, position, i) {
size.setAbsolute(50, 50);
var radius = 100;
var x = Math.floor(Math.random() * radius * 2) - radius;
var y = (Math.round(Math.random()) * 2 - 1) * Math.sqrt(radius * radius - x * x);
var color = 'rgb(' + Math.abs(x) + ',' + Math.abs(Math.round(y)) + ',' + (255 - node.id) + ')';
var el = new DOMElement(node, {
properties: {
'background-color': color,
'border-radius': '50%'
}
});
var satellite = new Sphere({
radius: 25,
mass: 10,
position: new Vec3(x + window.innerWidth / 2, y + window.innerHeight / 2, 0)
});
// Attach the box to the anchor with a `Spring` force
var spring = new Spring(null, satellite, {
stiffness: 95,
period: 0.6,
dampingRatio: 1.0,
anchor: anchor
});
//console.log(color);
// satellite.setVelocity(-y / Math.PI, -x / Math.PI / 2, y / 2);
satellite.setVelocity(0.5, 0.5, 0);
// this.gravity.addTarget(satellite);
this.simulation.add(satellite, spring);
this.items.push([satellite, position]);
this.collision.addTarget(satellite);
}
// Boilerplate
FamousEngine.init();
// App Code
var demo = new Demo();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Famous :: Seed Project</title>
<link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body {
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
-webkit-perspective: 0;
perspective: none;
overflow: hidden;
}
</style>
</head>
<body>
<script src="http://code.famo.us/famous/0.6.2/famous.min.js"></script>
</body>
</html>
关于famo.us - 著名的引擎物理碰撞,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32133210/
我看到famo.us examples主要引用Modifier类,但是famo.us大学教程主要引用StateModifier类。 两者有何区别?哪种最适合? 最佳答案 目前,这些没有区别。 如果需要
例如,在基于 Bootstrap 的应用程序中,我可能会编写标记以使网格为大屏幕宽 8 列,小屏幕宽 2 列。 屏幕尺寸肯定会对屏幕设计产生影响,在我开始在 famo.us 中尝试之前,我想知道应该遵
我对 Famo.us 所呈现的“这是碎片,现在去做点什么”的方式没有意见,但如果能对我希望如何设置我的项目、结构、模块等有一些指导,那就太好了. 为什么没有实际网页的演示,而不是单屏 iPhone V
Famo.us Surfaces 有一个单一的方法来设置一个表面的大小。它们有一个“大小”属性,该属性采用 2 个数字组成的数组,这些数字直接对应于像素值。考虑到大量不同的屏幕尺寸,这在处理移动设备时
我在使用 Famo.us scrollview 的移动设备上遇到滚动性能不佳的问题。我正在使用 Famo.us/Angular。这是使用的代码:
创建 InputSurface 时,我无法使用各种属性,例如 autofocus 或 maxLength。 this.email = new InputSurface({ classe
有没有办法在现有的 DOM 结构中创建 famo.us 容器? 我的意思是创建一个 famo.us 上下文和生成的 .famous-container (?),并将其附加到现有元素。 最佳答案 当然。
我见过一些例子,人们在 famo.us 中对 Surface 类进行子类化,并重写 deploy 函数。这是 famo.us 在渲染上需要的特殊函数吗?我有一个我正在构建的“控件”,它有一些我想在它变
AFAIK,目前没有像 jsfiddle 或 codepen 这样的网站支持 Famo.us。是否有其他方法可以共享 Famo.us 的工作代码示例,这些示例足够永久以保证在 Stack Overfl
相关 this question about scrollview我对相反的感兴趣 - 如何从代码控制滚动并添加滚动条。只是想知道 famo.us 是否有任何预设方法可以做到这一点,或者我们是否必须手
我是“物理引擎世界”的新手。我决定使用 Famo.us 进行试验并尝试学习如何使用物理引擎。 如何让球在相互撞击时反弹?我设法添加了球并创建了墙壁。球撞到墙壁时会反弹,但相互撞击时不会反弹,它们只是穿
我想知道如何构建我的应用程序。我是否应该使用自定义视图和一个将对其进行控制的主视图。或者将我的观点保存在灯箱中更好。我发现的所有示例都在某种程度上受到功能的限制,并且仅显示一个或几个屏幕。什么是组织更
我正在构建一个需要物理引擎的站点。 使用过许多 SPA 应用程序后,我对此非常有信心。 不幸的是,我无法将碰撞检测和墙壁应用于著名的物理模拟。 您可以在此处查看可编辑示例。 https://stagi
我感觉好像缺少明显的东西,但是如何从渲染树中删除节点并正确销毁它们呢? 看起来我可以做mainCtx._node._child.splice(2,1)之类的事情,但这并不是在所有情况下都可行(Scro
谷歌的纸张/ Material 设计http://www.google.com/design/spec/material-design/introduction.html 是一个非常干净的外观,我认为
我想做类似的东西http://brm.io/gears-d3-js/基于 Famo.us,但查看 throw 物理模块我找不到多边形体。可以用另一种方式完成吗?或者可能还有其他带有多边形的 fork
我真的很努力地解决这个问题。但似乎没有任何作用。 我正在尝试在页面顶部创建一个菜单,该菜单仅在悬停时才可见。 现在非常简单的元素: topViewSurf = new Surface({ cl
我想监听创建表面时发出的事件。目的是在该表面包含的 div 内加载谷歌地图。 var surfaceMap = new Surface({ size: [400, 400], content:
我按照这个例子 http://famo.us/university/famous-102/input/5/ 它提到了多点触控,但没有示例 Famo.us also has support for mu
我试图用包含多个表面(甚至内部 View )的 View 制作一个 ScrollView ,但它不会滚动。它只是填充内容直到折叠,并且不会进一步向下滚动(不响应鼠标滚轮或触摸手势)。 View 类中创
我是一名优秀的程序员,十分优秀!