Select one unique faceIndex from many elements

Questions
,
1

Hi,
I’ve to create unique faceIndex from many LineLoop/LineSegment. Currently I wrote code where I recived completly random faceIndex. I tryied to change camra setting but still I have wrong faceIndex.

image
image1108×492 79.7 KB

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff); // Setting the background color to white

// Parameters for OrthographicCamera
const frustumSize = 8;
const aspect = window.innerWidth / window.innerHeight;
const camera = new THREE.OrthographicCamera(frustumSize * aspect / -2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / -2, 1, 1000);
camera.position.set(1, 1, 4); // Adjust camera position as needed
camera.lookAt(scene.position); // Make the camera look at the center of the scene

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Creating cylinder geometry
const radiusTop = 1;
const radiusBottom = 1;
const height = 2;
const radialSegments = 8;
const heightSegments = 1;
const geometry = new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments);

// Setting the material to gray color
const material = new THREE.MeshBasicMaterial({ color: 0x888888 });


const cylinder = new THREE.Mesh(geometry, material);
scene.add(cylinder);

//Storing cylinder elements in one object
const cylinderElements = new THREE.Group();
cylinderElements.add(cylinder);

// Creating grid lines for the sides of the cylinder
const edgesGeometry = new THREE.EdgesGeometry(geometry);
const edgesMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
const edges = new THREE.LineSegments(edgesGeometry, edgesMaterial);
cylinderElements.add(edges);

// Creating grid lines for the top end of the cylinder
const topCircleGeometry = new THREE.CircleGeometry(radiusTop, radialSegments);
const topCircle = new THREE.LineLoop(topCircleGeometry, edgesMaterial);
topCircle.rotation.x = -Math.PI / 2;
topCircle.position.y = height / 2;
cylinderElements.add(topCircle);

// Creating grid lines for the bottom end of the cylinder
const bottomCircleGeometry = new THREE.CircleGeometry(radiusBottom, radialSegments);
const bottomCircle = new THREE.LineLoop(bottomCircleGeometry, edgesMaterial);
bottomCircle.rotation.x = -Math.PI / 2;
bottomCircle.position.y = -height / 2;
cylinderElements.add(bottomCircle);

const middleCircleGeometry = new THREE.CircleGeometry(radiusTop, radialSegments);
const middleCircle = new THREE.LineLoop(middleCircleGeometry, edgesMaterial);
middleCircle.rotation.x = -Math.PI / 2;
middleCircle.position.y = 0; // Center of height
cylinderElements.add(middleCircle);

var onOffCubes = [];
//onOffCubes.push(cylinderElements);
scene.add(cylinderElements);
camera.position.z = 6;


let isMouseDown = false;
let previousMousePosition = { x: 0, y: 0 };

document.addEventListener('mousedown', (event) => {
    isMouseDown = true;
    previousMousePosition = { x: event.clientX, y: event.clientY };
});

document.addEventListener('mouseup', () => {
    isMouseDown = false;
});


document.addEventListener('mousemove', (event) => {
    if (isMouseDown) {
        const deltaMove = {
            x: event.clientX - previousMousePosition.x,
            y: event.clientY - previousMousePosition.y,
        };

        cylinderElements.rotation.x += deltaMove.y * 0.01;
        cylinderElements.rotation.y += deltaMove.x * 0.01;

    }
    const mouse = new THREE.Vector2(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clientY / window.innerHeight) * 2 + 1
    );


    previousMousePosition = { x: event.clientX, y: event.clientY };
    render();
});

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects;
var prevIndex = -1;
var prevColor = new THREE.Color();
document.addEventListener('click', (event) => {
    event.preventDefault();

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);
    intersects = raycaster.intersectObject(cylinder, true);
    if (intersects.length !== 0) {
        const faceIndex = intersects[0].faceIndex;

        console.log('faceIndex;', faceIndex);
    }
});

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

render();

Someone know how to collect all of the segment line to get unique number for every shape after click.
image

Cylinder

2

What about this:

  • define two segments along the height in line 20:
const heightSegments = 2;
  • instead of printing the face index in line 131, print these values:
if( faceIndex < 4*radialSegments )
    console.log('faceIndex;', faceIndex>>1);
else
    console.log('faceIndex;', faceIndex-2*radialSegments);

Does it still show “random” indices?

3

Hi Pavel,

Now it’s working perfect :slight_smile: Thank you very much. I have spent two weeks solving problem.

Merry Christmas :slight_smile:

1 Like