Question

我有一个PlaneGeometry，我想修改悬停顶点的z位置，但我不知道如何检索它。

//THREE.WebGLRenderer 69

// Generating plane
var geometryPlane = new THREE.PlaneGeometry( 100, 100, 20, 10 );

for (var vertIndex = 0; vertIndex < geometryPlane.vertices.length; vertIndex++) {
    geometryPlane.vertices[vertIndex].z += Math.random();
}
geometryPlane.dynamic = true;
geometryPlane.computeFaceNormals();
geometryPlane.normalsNeedUpdate = true;
var materialPlane = new THREE.MeshLambertMaterial( {
    color: 0xffff00,
    side: THREE.DoubleSide,
    shading: THREE.FlatShading,
    overdraw: 0.5,
    vertexColors: THREE.FaceColors
} );
plane = new THREE.Mesh( geometryPlane, materialPlane );
plane.geometry.colorsNeedUpdate = true;

// Mouse event
container[0].addEventListener( 'mousemove', onMouseMove, false );
function onMouseMove( event ) {
    var mouseX = ( event.clientX / window.innerWidth ) * 2 - 1;
    var mouseY = -( event.clientY / window.innerHeight ) * 2 + 1;

    var vector = new THREE.Vector3( mouseX, mouseY, camera.near );
    vector.unproject( camera );

    raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

    if ( intersects.length > 0 ) {
        // Change the z position of the selected vertice
        var selectedVertice = ???
        selectedVertice.position.z +=5;
    }
}

Answer 1

如果问题涉及一个顶点而不是整个对象，也许你可以：
1-检索 intersects [0] .face 中的交叉面 2-这个面可能包含3个顶点（它可能是 THREE.Face3 ）：找到最近的顶点V，其交点相交[0] .point 。
3-改变V.z

我不知道它是否有效：这是一个想法......;）

Answer 2

您可以像这样修改相交对象的Z位置

<强>相交[0] + .object.position.z = 10;

您可以参考下面的代码片段获取演示/代码。

var container, stats;
var camera, scene, raycaster, renderer;

var mouse = new THREE.Vector2(),
    INTERSECTED;
var radius = 100,
    theta = 0;

init();
animate();

function init() {

    container = document.createElement('div');
    document.body.appendChild(container);

    var info = document.createElement('div');
    info.style.position = 'absolute';
    info.style.top = '10px';
    info.style.width = '100%';
    info.style.textAlign = 'center';
    info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> webgl - interactive cubes';
    container.appendChild(info);

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);

    scene = new THREE.Scene();

    var light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(1, 1, 1).normalize();
    scene.add(light);

    var geometry = new THREE.PlaneGeometry (50, 50, 50);

    for (var i = 0; i < 500; i++) {

        var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
            color: Math.random() * 0xffffff
        }));

        object.position.x = Math.random() * 800 - 400;
        object.position.y = Math.random() * 800 - 400;
        object.position.z = Math.random() * 800 - 400;

        object.rotation.x = Math.random() * 2 * Math.PI;
        object.rotation.y = Math.random() * 2 * Math.PI;
        object.rotation.z = Math.random() * 2 * Math.PI;

        object.scale.x = Math.random() + 0.5;
        object.scale.y = Math.random() + 0.5;
        object.scale.z = Math.random() + 0.5;

        scene.add(object);

    }

    raycaster = new THREE.Raycaster();

    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0xf0f0f0);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.sortObjects = false;
    container.appendChild(renderer.domElement);

    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0px';
    container.appendChild(stats.domElement);

    document.addEventListener('mousemove', onDocumentMouseMove, false);

    //

    window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

}

function onDocumentMouseMove(event) {

    event.preventDefault();

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

}

//

function animate() {

    requestAnimationFrame(animate);

    render();
    stats.update();

}

function render() {



    // find intersections

    var vector = new THREE.Vector3(mouse.x, mouse.y, 1).unproject(camera);

    raycaster.set(camera.position, vector.sub(camera.position).normalize());

    var intersects = raycaster.intersectObjects(scene.children);


    if (intersects.length > 0) {

        if (INTERSECTED != intersects[0].object) {
            console.log(intersects[0].point);
             console.log(intersects[0].object.position);

            if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
             /*******************************************************************/   
/// You can change the Z position like the way done below
            
   intersects[0].object.position.z+=10;
/********************************************************************/
            

            INTERSECTED = intersects[0].object;
            INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
            INTERSECTED.material.emissive.setHex(0xff0000);
            

        }

    } else {

        if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);

        INTERSECTED = null;

    }

    renderer.render(scene, camera);

}

<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>

将鼠标悬停在垂直位置

2 个答案: