Question

我有这段代码（见下文），我曾经用three.js绘制一个多维数据集：

        // revolutions per second
        var angularSpeed = 0.0; 
        var lastTime = 0;

        function animate(){
            // update
            var time = (new Date()).getTime();
            var timeDiff = time - lastTime;
            var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
            cube.rotation.y += angleChange;
            lastTime = time;

            // render
            renderer.render(scene, camera);

            // request new frame
            requestAnimationFrame(animate);
        }

        // renderer
        var container = document.getElementById("container");
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(container.offsetWidth, container.offsetHeight);
        container.appendChild(renderer.domElement);

        // camera
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 700;

        // scene
        var scene = new THREE.Scene();

        // cube Length, Height, Width
        var cube = new THREE.Mesh(new THREE.CubeGeometry(400, 200, 200), new THREE.MeshBasicMaterial({
            wireframe: true,
            color: '#ff0000'
        }));
        cube.rotation.x = Math.PI * 0.1;
        scene.add(cube);

        // start animation
        animate();

是否有人知道是否可以通过使用鼠标拖动边缘来允许用户更改立方体的大小？

Answer 1

检查this jsfiddle。我重用了draggableCubes的结构，加上一些变化：

拖动顶点我创建了vertexHelpers（小球）;
为了避免数学，诀窍就是使用一个不可见的平面来拖动你的物体/顶点，垂直于相机。要查看它的实际效果，只需设置mouseMove
现在我们可以正确拖动一个vertexHelper，它到立方体中心的距离会发生变化。我们只需要以相同的比例缩放立方体：

在if(SELECTED){ var intersects=raycaster.intersectObject(plane); //so we get the mouse 3D coordinates in intersects[0].point var previousDistance=SELECTED.position.sub(cube.position).length(); var increaseRatio=intersects[0].point.sub(cube.position).length()/previousDistance; cube.scale.set( cube.scale.x*increaseRatio, cube.scale.y*increaseRatio, cube.scale.z*increaseRatio ); //then update the vertexHelpers position (copy the new vertices positions) }侦听器的功能中，它变为：

lineWidth

编辑：在您的问题中，您可以通过拖动边缘来精确地要求调整立方体的大小。我在例子中没有记住它，也没有直观地思考它，但它可以用同样的方式完成。

但是，由于THREE.EdgesHelper未在ANGLE（用于转换WebGL的Windows上使用的程序）中实现，因此选择宽度为1px的行并不容易。我记得一个我找不到的三个例子，几何图形与线条相关联，因此它看起来很轮廓。基本上你可以通过创建一个圆柱作为自定义'edgesHelpers'来实现它（我不是在谈论Zend\Http\PhpEnvironment\Request），并且每次立方体也必须调整它们的大小。

Answer 2

在您的设置代码中为mousemove添加eventlistener：

        // Event Handlers
        renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false);

然后在事件处理程序代码中，您可以检查选择了哪个对象并调整缩放参数。

function onDocumentMouseMove(event) {
    ...
    var selected = raycaster.intersectObjects(objects);
    if (selected.length > 0) {
        // Do things to the scale parameter(s)... Just for demo purposes
        selected.scale.x = selected.scale.x + selected[0].point.sub(offset).x / 1000;
        selected.scale.y = selected.scale.y + selected[0].point.sub(offset).y / 1000;
        return;
    }
    ...
}

由于我在这里输入伪代码，很容易出错，所以我在这里留下了一个测试版本供您试用：http://www.numpty.co.uk/cubedrag.html 如您所见，通过拖动鼠标，所选对象的大小会以可怕的方式发生变化。你让我感兴趣，如果我有更多的时间，你会考虑让它与运动成正比。

使用鼠标在浏览器中使用three.js操纵对象

2 个答案: