Three.js drag to look around

For a project that I am doing, I want to do something like THREE.OrbitControls but instead stay in one place and still drag to look around. When I do this:

var controls = new THREE.OrbitControls(camera, renderer.domElement);

and have the camera at (0, 1, 0) I kind of achieve the effect but it is backwards and too hard to control.

I’m looking for some three.js plugin (like OrbitControls), or some code to do this.

Thanks!


Source: stackoverflow-javascript

anchoring a geomety/mesh to it’s corner for scaling three.js

I’m create a rectangle in three.js based on 2 coordinates. The first coordinate is the cell of the first user click, the second coordinate is where the user drags the cursor.

The rectanlge that is being created is the correct size, however it ‘grows’ from it’s center, whereas I want it to ‘grow’ from the corner of the first user click. I’ve tried a few potential solutions to change the origin of the geometry but I haven’t found a fix yet.

The demo can be see here – with the code below.

    var startPoint = startPlace;
    var endPoint = endPlace;
    var zIntersect = new THREE.Vector3(startPoint.x, 0, endPoint.z);
    var xIntersect = new THREE.Vector3(endPoint.x, 0, startPoint.z);

    var differenceZ = Math.abs(startPlace.z - zIntersect.z);
    var differenceX = Math.abs(startPlace.x - xIntersect.x);
    floorGeometryNew.rotateX(-Math.PI / 2);


    var floorGeometryNew = new THREE.PlaneGeometry(differenceX, differenceZ);
    floorGeometryNew.rotateX(-Math.PI / 2);

    var x = startPoint.x;
    var y = startPoint.y;
    var z = startPoint.z;

    var voxel = new THREE.Mesh(floorGeometryNew, tempMaterial);
    voxel.position.set(x, y, z);


Source: stackoverflow-javascript