Question

我正在尝试将厚度应用于THREE.js的Tube几何体。为此我使用两个同心管几何形状并尝试将它们组合以产生厚度。请找到相同的以下代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - geometry - Tube</title>
        <meta charset="utf-8">
        <style>
            body {
                margin: 0px;
                background-color: #2c3134;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

        <script src="./three.min.js"></script>
        <script src="./TrackballControls.js"></script>

        <script>

            var camera, scene, renderer;
            var mesh,cameraControls;
            var clock = new THREE.Clock();
            var outerradius = 75;
            var innerradius = 55;
            var segments = 600;
            var radiussegments = 360;
            var tubecolor = new THREE.Color(0x848484);
            var wireframe = true;

            init();
            animate();

            function init() {

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

                camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 10000 );
                camera.position.set( 0, 0, 1000 );

                scene = new THREE.Scene();
                var tubepath1 = [{"point" :new THREE.Vector3(-200,0,0)},{"point" :new THREE.Vector3(200,0,0)}];
                var actualpoints =[];
                for(var i=0; i<tubepath1.length; i++)
                {               
                  actualpoints.push(tubepath1[i].point);
                }
                var actualextrudePath = new THREE.SplineCurve3(actualpoints);
                actualextrudePath.dynamic = true;


                var outertube = new THREE.TubeGeometry(actualextrudePath, segments,outerradius ,radiussegments, false, false);
                outertube.dynamic = true;
                outertube.verticesNeedUpdate = true;
                outertube.dynamic = true;

                var outertubeMesh = new THREE.Mesh(outertube, new THREE.MeshBasicMaterial(
                { color: tubecolor, shading: THREE.SmoothShading, side: THREE.DoubleSide, wireframe: wireframe, transparent: true,vertexColors: THREE.FaceColors, overdraw: false
                }));
                outertubeMesh.name = "outertube";
                outertubeMesh.dynamic = true;
                outertubeMesh.needsUpdate = true;
                outertubeMesh.useQuaternion = true;
                renderer.sortObjects = false;

                var innertube = new THREE.TubeGeometry(actualextrudePath, segments,innerradius ,radiussegments, false, false);
                innertube.dynamic = true;
                innertube.verticesNeedUpdate = true;
                innertube.dynamic = true;

                var innertubeMesh = new THREE.Mesh(innertube, new THREE.MeshBasicMaterial(
                { color: tubecolor, shading: THREE.SmoothShading, side: THREE.DoubleSide, wireframe: wireframe, transparent: true,vertexColors: THREE.FaceColors, overdraw: false
                }));
                innertubeMesh.name = "innertube";
                innertubeMesh.dynamic = true;
                innertubeMesh.needsUpdate = true;
                innertubeMesh.useQuaternion = true;
                renderer.sortObjects = false;

                    // CONTROLS
                cameraControls = new THREE.TrackballControls(camera);
                cameraControls.rotateSpeed = 1.0;
                cameraControls.zoomSpeed = 1.2;
                cameraControls.panSpeed = 0.8;
                cameraControls.noZoom = false;
                cameraControls.noPan = false;
                cameraControls.staticMoving = true;
                cameraControls.dynamicDampingFactor = 0.3;
                cameraControls.target.set(0,0,0);

                scene.add( outertubeMesh );
                scene.add( innertubeMesh );

                window.addEventListener( 'resize', onWindowResize, false );

            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function animate() {
                window.requestAnimationFrame(animate);
                render();
            }

            function render() {
                var delta = clock.getDelta();
                cameraControls.update(delta);   
                renderer.render(scene, camera);
            }
        </script>

    </body>
</html>

现在，如何将这两个管组合在一起，使管之间没有间隙。任何帮助表示赞赏。

提前致谢，普拉迪普

Answer 1

最简单的方法是添加2个几何体来创建结尾，如

http://jsfiddle.net/gero3/rMaz5/1/

var first = new THREE.Geometry()
for (i = 0; i < radiussegments;i++){
    var j = i;
    var k= i*6;

    first.vertices.push(outertube.vertices[j+0].clone());
    first.vertices.push(outertube.vertices[j+1].clone());
    first.vertices.push(innertube.vertices[j+0].clone());
    first.faces.push( new THREE.Face3( k+0, k+1, k+2 ) );
    first.vertices.push(innertube.vertices[j+0].clone());
    first.vertices.push(innertube.vertices[j+1].clone());
    first.vertices.push(outertube.vertices[j+1].clone());
    first.faces.push( new THREE.Face3( k+3, k+4, k+5 ) );



};                
first.mergeVertices()
var firstMesh = new THREE.Mesh(first, new THREE.MeshBasicMaterial(
    { color: endtubecolor, shading: THREE.SmoothShading, side: THREE.DoubleSide, wireframe: wireframe, transparent: true,vertexColors: THREE.FaceColors, overdraw: false}));

var second = new THREE.Geometry()
for (i = 0; i < radiussegments;i++){
    var j = i;
    var k= i*6;

    second.vertices.push(outertube.vertices[outertube.vertices.length-2-j+0].clone());
    second.vertices.push(outertube.vertices[outertube.vertices.length-2-j+1].clone());
    second.vertices.push(innertube.vertices[outertube.vertices.length-2-j+0].clone());
    second.faces.push( new THREE.Face3( k+0, k+1, k+2 ) );
    second.vertices.push(innertube.vertices[outertube.vertices.length-2-j+0].clone());
    second.vertices.push(innertube.vertices[outertube.vertices.length-2-j+1].clone());
    second.vertices.push(outertube.vertices[outertube.vertices.length-2-j+1].clone());
    second.faces.push( new THREE.Face3( k+3, k+4, k+5 ) );



};                
second.mergeVertices()
var secondMesh = new THREE.Mesh(second, new THREE.MeshBasicMaterial(
    { color: endtubecolor, shading: THREE.SmoothShading, side: THREE.DoubleSide, wireframe: wireframe, transparent: true,vertexColors: THREE.FaceColors, overdraw: false}));

使用同心管在THREE.js中管的几何形状的厚度

1 个答案: