Geek asks and answers

Trimming an object using three JS

Using three js in any case allows you to determine the clipping region for an object? I have, for example, a parent that contains child objects, I would like to crop child objects based on the viewport.

Sort of...

// Create container and children
var container = new THREE.Object3D();
for(var i = 0; i < 100; i++) {
    var geometry = new THREE.PlaneGeometry(i, 0, 0);
    var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    var child = new THREE.Mesh(geometry, material);
    container.add(child);
}

// Create bounding box which is my viewport
var geom = new THREE.Geometry();
geom.vertices.push(new THREE.Vector3(0, 0, 0));
geom.vertices.push(new THREE.Vector3(10, 0, 0));
geom.vertices.push(new THREE.Vector3(10, 1, 0));
geom.vertices.push(new THREE.Vector3(0, 1, 0));
geom.computeBoundingBox();

// Magic property (THIS DOESNT EXIST)
container.clipRegion = geom.boundingBox;

The final part does not exist, but is there a way to achieve this with three js? I potentially want to animate children in the parent and show only the visible area defined by the bounding box.

Refresh, the following image has been added to describe my problem.

clip region

The resulting red area is the area that I want to make visible, while masking everything that is outside this region. All other materials should be visible.

+5
source
1

.

fiddle

, . , , .

, .

, , , . .

if (shadowColor.r < 0.9) {
    gl_FragColor = vec4 (0.3, 0.9, 0.0, 1.0);
} else {
    gl_FragColor = vec4 (0.8, 0.8, 0.8, 1.0);
    // discard;
}

, ,

clippingLight = new THREE.SpotLight (  0xafafaf, 0.97  );
clippingLight.position.set (100, 200, 1400);
clippingLight.castShadow = true;
scene.add (clippingLight);

, , , , .

function animate() {
cameraControls.update();
clippingLight.position.x = camera.position.x;
clippingLight.position.y = camera.position.y;
clippingLight.position.z = camera.position.z;
requestAnimationFrame(animate);
}

, , . , . three.js, .

three.js, , , , . : -)

+1

More articles:


All Articles