javascript - 使用鼠标在浏览器中使用 three.js 操作对象

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(小球体)的顶点；
• 为了避免数学问题，诀窍是使用一个不可见的平面来拖动对象/顶点，垂直于相机。要查看实际效果，只需设置 plane.visible=true
• 现在我们可以正确地拖动一个vertexHelper，它到立方体中心的距离会改变。我们只需要以相同的比例缩放立方体:

在 mouseMove 监听器的函数中，它变为:

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 未在 ANGLE(Windows 上用于转换 WebGL 的程序)中实现，因此选择 1px 宽度的线并不容易。我记得一个我找不到的 threejs 示例，其中几何图形与线条相关联，因此它看起来有轮廓。基本上，您可以通过创建一个圆柱体作为自定义“edgesHelpers”(我说的不是 THREE.EdgesHelper)来实现，每次立方体也必须调整它们的大小。