在鼠标悬停时更改顶点位置

Change vertice position on mousehover

本文关键字：顶点 位置 鼠标 悬停      更新时间：2023-09-26

我有一个平面几何，我想修改悬停的顶点的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;
    }
}

如果问题涉及一个顶点而不是整个对象，也许您可以：
1-检索相交[0]中的相交面。
2-此面可能包含3个顶点（可能是3。Face3）：求最近的顶点 V 与交点相交[0].point。
3-更改V.z

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

您可以像这样修改相交对象的 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>

相关文章：