单击它们时如何更改圆半径(使用three.js)? [英] How to change the circle radius when I click on them (with three.js)?

问题描述

我有以下 JavaScript 代码，摘自一个示例，它绘制了一些圆圈，当您单击其中一个圆圈时，它会改变颜色.但是我还想在您单击该圆时更改该圆的半径/大小(并保持其他圆不变).文档 根本没有帮助，我尝试了几种变体在代码中像

I have the following JavaScript code, taken from an example, which draws some circles, and when you click on one of them, it changes color. But I also want to change the radius/size of a circle when you click on that circle (and leave the other circles unchanged). The documentation does not help at all, and I have tried several variations in the code like

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

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

Anyway, here is the complete code:

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 );
    }
}

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

Any idea how I can solve this? And where can I find the proper documentation?

附录:

• 我使用了以下代码行:

• I have used the following line of code:

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

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

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

In the code, and now the circles change their size. But ALL of them! I click on one circle, and every circle changes size. Does not make sense to me...

推荐答案

不要缩放您的 几何体.您对所有圆使用相同的几何参考，因此缩放一个会缩放所有圆.

Don't scale your geometry. You're using the same geometry reference for all of your circles, so scaling one scales them all.

相反，缩放您的 Mesh，它是场景中的唯一对象(即使它引用与其他网格相同的几何体).就像您为每个 Mesh 设置 position 的方式一样，您也可以访问 scale:

Instead, scale your Mesh, which is a unique object in the scene (even if it references the same geometry as other meshes). Much like how you're setting position for each Mesh, you also have access to scale:

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

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

That will scale the intersected Mesh object, and only that Mesh.

克隆并创建一个新的 Mesh 实际上会导致内存泄漏.原始 Mesh 不会消失，除非您将其从场景中移除，并且您在 clone 时不断制作越来越多的 Geometry 对象圆圈.

Cloning and creating a new Mesh is literally introducing a memory leak. The original Mesh won't go away until you remove it from the scene, and you keep making more and more Geometry objects as you clone the circle.

这篇关于单击它们时如何更改圆半径(使用three.js)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！