【发布时间】：2017-10-02 22:42:36
【问题描述】：
基于此How do I rotate a box in A-Frame by moving or dragging the mouse?
我如何使用 3d 模型来做到这一点？我需要在视图中旋转 3d 模型/对象
我试过这段代码，但不起作用
<html>
<head>
<title>Rotation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
</head>
<body>
<script type="text/javascript">
AFRAME.registerComponent('drag-rotate-component',{
schema : { speed : {default:1}},
init : function(){
this.ifMouseDown = false;
this.x_cord = 0;
this.y_cord = 0;
document.addEventListener('mousedown',this.OnDocumentMouseDown.bind(this));
document.addEventListener('mouseup',this.OnDocumentMouseUp.bind(this));
document.addEventListener('mousemove',this.OnDocumentMouseMove.bind(this));
},
OnDocumentMouseDown : function(event){
this.ifMouseDown = true;
this.x_cord = event.clientX;
this.y_cord = event.clientY;
},
OnDocumentMouseUp : function(){
this.ifMouseDown = false;
},
OnDocumentMouseMove : function(event)
{
if(this.ifMouseDown)
{
var temp_x = event.clientX-this.x_cord;
var temp_y = event.clientY-this.y_cord;
if(Math.abs(temp_y)<Math.abs(temp_x))
{
this.el.object3D.rotateY(temp_x*this.data.speed/1000);
}
else
{
this.el.object3D.rotateX(temp_y*this.data.speed/1000);
}
this.x_cord = event.clientX;
this.y_cord = event.clientY;
}
}
});
</script>
<a-scene>
<a-assets>
<a-asset-item id="man" src="./assets/models/man/man.dae"></a-asset-item>
</a-assets>
<a-collada-model src="#man" rotation="0 45 0"></a-model>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 -0.5 1">
<a-camera look-controls="enabled:false"></a-camera>
</a-entity>
</a-scene>
</body>
</html>
提前致谢！
也试过这个，但运气不好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title - Demo 3D Model</title>
<meta name="description" content="Inlabs demo - 3D Model">
<script src="../../../dist/aframe-master.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="man" src="./assets/models/man/man.dae"></a-asset-item>
</a-assets>
<a-collada-model src="#man" rotation="0 45 0"></a-model>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 -0.5 1">
<a-camera drag-rotate-component look-controls="enabled:false"></a-camera>
</a-entity>
</a-scene>
</body>
</html>
【问题讨论】：