小编Vig*_*Vig的帖子

使用CSS动画旋转的图像之间的碰撞检测

我正在使用CSS动画和jQuery在十字路口(顶视图)中移动汽车来模拟驾驶执照测验.用户必须通过点击汽车来选择交叉订单.

示例图片: http://i40.tinypic.com/717fc9.jpg

每辆车都有属性和这样的动画,例如:蓝色车转右(与图像不同):

#auto-b {
    left: 320px;
    top: 150px;
    -webkit-transform: rotate(180deg);
}

.animated #auto-b {
    -webkit-animation-name: move-b;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes move-b {

    30% {
        left: 260px;
        top: 150px;
        -webkit-transform: rotate(180deg);
    }
    60% {
        left: 214px;
        top: 120px;
        -webkit-transform: rotate(270deg);
    }

    100% {
        top: 30px;
        left: 214px;
        -webkit-transform: rotate(270deg);
    }
}
Run Code Online (Sandbox Code Playgroud)

我不知道的是我如何检测两辆车是否因为它们旋转(转动)而发生碰撞.

播放按钮功能:

$('#play').on('click', play);

function play(){    
    $('.auto').removeClass('selected');
    $('#incrocio').addClass('animated');    
    interval = setInterval(crash,1);
}
Run Code Online (Sandbox Code Playgroud)

碰撞功能(仅适用于红色和绿色汽车碰撞,因为它们不会旋转):

function crash(){

    var autoA = $('#auto-a').position();    
    var autoB = $('#auto-b').position();
    var autoC = $('#auto-c').position();    
    var top1 …
Run Code Online (Sandbox Code Playgroud)

javascript css jquery detection collision

8
推荐指数
1
解决办法
2005
查看次数

如何在 ThreeJS 中获取 3D 对象尺寸?

我正在使用 WebRTC(网络摄像头访问)、JSARToolKit(标记检测)和 ThreeJS(3D 库)开发 AR 应用程序。

我想将 3D 对象(使用 Threejs Maya 导出器从 Maya 导出)放置在检测到的标记的中心。

这是我使用 JSONLoader 加载 3D 对象的代码:

// load the model
var loader = new THREE.JSONLoader;
var object;
//var geometry = new THREE.BoxGeometry(1, 1, 1);
loader.load('js/cube.js', function(geometry, materials){
var material = new THREE.MeshFaceMaterial(materials);
object = new THREE.Mesh(geometry, material);

object.position.x -= ***3DobjectWidth/2***;
object.position.y -= ***3DobjectHeight/2***;
object.position.z -= ***3DobjectDepth/2***;

scene.add(object);
});
Run Code Online (Sandbox Code Playgroud)

我需要获取对象的宽度、高度和深度来改变他的位置(参见3DobjectWidth ecc)。

有什么建议?

3d json maya dimension three.js

3
推荐指数
1
解决办法
2402
查看次数

标签 统计

3d ×1

collision ×1

css ×1

detection ×1

dimension ×1

javascript ×1

jquery ×1

json ×1

maya ×1

three.js ×1