从球体和圆柱体Three.js创建一个独特的球体几何体

时间:2014-07-12 18:43:06

标签: javascript three.js geometry

我试图在Three.js中创建一个像珠子一样的珠子,基本上是一个带圆柱体的球体。我可以独立创建两个,但我想知道如何匹配球体和圆柱体的高度以及如何合并/交叉它们,以便结果将是一个几何体。

有什么想法吗?

谢谢!

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

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

    //material
    var material = new THREE.MeshNormalMaterial( {
        wireframe: true
    } );

    //sphere
    var sphere = new THREE.SphereGeometry(2,20,20);
    var sphereMesh = new THREE.Mesh( sphere, material );
    scene.add( sphereMesh );


    //cyl
    var cylinder = new THREE.CylinderGeometry(0.5, 0.5, 2, 32 );
    var cylinderMesh = new THREE.Mesh( cylinder, material );
    scene.add( cylinderMesh );

    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 5;

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

http://jsfiddle.net/RqU2v/

1 个答案:

答案 0 :(得分:1)

@gaitat,非常棒,谢谢。

这里是ThreeCSG的解决方案:

    //sphere
    var sphere = new THREE.SphereGeometry(2,20,20);
    var sphereMesh = new THREE.Mesh( sphere, material );
    var sphereBSP = new ThreeBSP( sphereMesh );

    //cyl
    var cylinder = new THREE.CylinderGeometry(0.5, 0.5, 5, 32 );
    var cylinderMesh = new THREE.Mesh( cylinder, material );
    var cylinderBSP = new ThreeBSP( cylinderMesh );

    //result
    var subtract_bsp = sphereBSP.subtract( cylinderBSP );
    var result = subtract_bsp.toMesh( material );
    result.geometry.computeVertexNormals();
    scene.add( result );