问题描述
我有以下 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)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!