单击它们时如何更改圆半径（使用three.js）？答案

【问题标题】：How to change the circle radius when I click on them (with three.js)?单击它们时如何更改圆半径（使用three.js）？
【发布时间】：2023-03-23 03:15:01
【问题描述】：

我有以下 JavaScript 代码，取自一个示例，它绘制了一些圆圈，当您单击其中一个时，它会改变颜色。但是我也想在您单击该圆时更改圆的半径/大小（并使其他圆保持不变）。 documentation 根本没有帮助，我尝试了代码中的几种变体，例如

intersects[ 0 ].object.geometry.parameters.radius = 50;
intersects[ 0 ].object.geometry.radius = 50;
intersects[ 0 ].object.geometry.setRadius(50);

无论如何，这里是完整的代码：

var container, camera, scene, geometry, mesh, renderer, controls, particles, colors;
var objects = [];

// DOM element...
container = document.createElement('div');
document.body.appendChild(container);

// Camera...
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 75);

// Scene...
scene = new THREE.Scene();
scene.add(camera);

// Renderer...
renderer = new THREE.WebGLRenderer({
    clearAlpha: 1
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);         

// Scatter plot...
scatterPlot = new THREE.Object3D();
scene.add(scatterPlot);

// Make grid...
xzColor = 'black';
xyColor = 'black';
yzColor = 'black';



// Plot some random points...
circle = new THREE.CircleGeometry(5);

colors = [];
var max = 50;
var min = -50;

for (var i = 0; i < 10; i++) {          

    var object = new THREE.Mesh( circle, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
    object.position.x = Math.random() * (max - min) + min;
    object.position.y = Math.random() * (max - min) + min;
    object.position.z = 0;                  

    scene.add( object );
    objects.push( object );

}

animate();

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
document.addEventListener( 'mousedown', onDocumentMouseDown, false );

function onDocumentMouseDown( event ) {
    event.preventDefault();
    mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( objects );
    if ( intersects.length > 0 ) {
        intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
        intersects[ 0 ].object.geometry.setRadius(50);
        var particle = new THREE.Sprite( particleMaterial );
        particle.position.copy( intersects[ 0 ].point );
        particle.scale.x = particle.scale.y = 16;
        scene.add( particle );
    }
}

知道如何解决这个问题吗？我在哪里可以找到合适的文档？

附录：

我使用了以下代码行：

相交[0].object.geometry.scale(1.1,1.1,1.1);

在代码中，现在圆圈改变了它们的大小。但是所有这些！我点击一个圆圈，每个圆圈都会改变大小。对我来说没有意义...

【问题讨论】：

试试这个var object = new THREE.Mesh( circle.clone(), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
啊好多了！没错，它是同一个对象。谢谢..
TheJim01 的回答是完全正确的，所以最好依靠它，而不是我的评论；）

标签： javascript three.js

【解决方案1】：

不要扩展您的geometry。您对所有圆圈都使用相同的几何参考，因此缩放一个即可缩放所有圆圈。

相反，缩放您的Mesh，它是场景中的一个独特对象（即使它引用与其他网格相同的几何体）。就像您为每个Mesh 设置position 一样，您也可以访问scale：

intersects[0].object.scale.set(1.1, 1.1, 1.1);

这将缩放相交的Mesh 对象，并且仅缩放那个Mesh。

克隆和创建一个新的Mesh 实际上是引入了内存泄漏。原始的 Mesh 直到您将其从场景中移除后才会消失，并且您会像 clone 和 circle 一样制作越来越多的 Geometry 对象。

【讨论】：