mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
101.55k stars 35.29k forks source link

Adding holes to faces #2111

Closed Furin closed 12 years ago

Furin commented 12 years ago

Hi everyone,

I'm making a dynamic object page. I've already gotten the canvas so far that it creates the shape in the dimensions I want it, using CubeGeometry as following:

var materials = [];
    for ( var i = 0; i < 6; i ++ ) {
        if (i==0) {materials.push( new THREE.MeshBasicMaterial( { color: 0x324B98} ) );}
        else if (i==3){materials.push( new THREE.MeshBasicMaterial( { color: 0x323E98} ) );}
        else {materials.push( new THREE.MeshBasicMaterial( { color: 0x323298} ) );}
    }

    cube = new THREE.CubeGeometry( 400, 400, 400, 1, 1, 1, materials, {px: true, nx: true, py: false, ny: true, pz: false, nz: false} );

    mesh = new THREE.Mesh( cube, new THREE.MeshFaceMaterial() );
    mesh.overdraw = true;
    mesh.doubleSided = true;

    scene.add( mesh );

Now I'm having some problems trying to take the next step, I want to dynamically add holes to the faces of my semi-cube. The holes would vary in shape, size and location. I'm not expecting anyone to write all the code or anything like that, I just don't know where to start with this. Is there a function I should be looking into to achieve this, or do I need to make my own functionality altogether?

Thanks a bunch, and good job on the library!

WestLangley commented 12 years ago

1979

Constructive Solid Geometry (CSG) may be what you want. Here are some excellent posts.

Evan Wallace http://evanw.github.com/csg.js/

Chandler Prall http://chandler.prallfamily.com/2011/12/constructive-solid-geometry-with-three-js/

Jerome Etienne http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/

Furin commented 12 years ago

Ooh that's very helpful. Thanks a bunch West!