1.The code runs without any error, but only 2 faces are filled. How to fill all faces?
2.And when dragging the object,the object rotates. I only need to drag it.How to disable rotation of the object?
3. controls.enabled=false;
currentY=event.group.position.y;
What does these instructions do? 
This is how messy I can make my code 
<script src=https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js></script>
<script src="DragControls.js"></script>
<script src="TrackballControls.js"></script>
<script>
var camera,scene,renderer;
var objects=[];
function init() {
// SCENE
scene = new THREE.Scene();
// CAMERA
camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.set(0, 8, 13);
camera.lookAt(scene.position);
//creating renderer, setting its size and appending it
renderer=new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//Adding light
var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(1);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
var material = new THREE.MeshBasicMaterial({wireframe: false, color: 0xDDDDDD, transparent:true, opacity:0.5, polygonOffset: true});
//Creating Pyramid
var geometry = new THREE.Geometry();
//Creating Vectors
geometry.vertices.push(
new THREE.Vector3(3,3,3),
new THREE.Vector3(8,5,2),
new THREE.Vector3(8,1,2),
new THREE.Vector3(8,1,4),
new THREE.Vector3(8,5,4)
);
geometry.faces.push(
new THREE.Face3(0,1,2),
new THREE.Face3(0,2,3),
new THREE.Face3(0,3,4),
new THREE.Face3(0,1,4),
new THREE.Face3(1,2,3),
new THREE.Face3(1,3,4)
);
geometry.computeFaceNormals();
geometry.computeVertexNormals();
var pyramid= new THREE.Mesh( geometry, material ) ;
var edges=new THREE.EdgesGeometry(geometry);
var lines = new THREE.LineSegments(edges,new THREE.LineBasicMaterial({color:"orange"}));
lines.add(pyramid);
scene.add(lines );
objects.push(lines);
controls=new THREE.TrackballControls(camera,renderer.domElement);
controls.rotateSpeed=1.0;
controls.zoomSpeed=1.2;
controls.panSpeed=0.8;
controls.noZoom=false;
controls.noPan=false;
controls.staticMoving=false;
controls.dynamicDampingFactor=0.3;
var currentY=0;
var dragControls=new THREE.DragControls(objects,camera,renderer.domElement);
dragControls.addEventListener('dragstart',function(event){
controls.enabled=false;
currentY=event.group.position.y;
});
dragControls.addEventListener('drag',function(event){
event.group.position.y=currentY;
});
// scene.add(pyramid);
}
function animate() {
requestAnimationFrame(animate);
render();
}
//render loop
function render() {
controls.update();
renderer.render(scene, camera);
};
init();
animate();
</script>
</body>
</html>
. I think there is an issue of miscommunication. The rotation I meant was when we are dragging, I expected an action like pick and place(no change in orientation). But what is happening is when am dragging, the orientation changes. I have attached 2 screenshots to make it more clear.
