0

外部のjsonファイルから200の座標を持つチューブジオメトリを作成しました。以下のコードを見つけてください。

function plotPath()
        {                                           
            var obj = getPath();
            var segments = obj.path.length;
            var closed = false;
            var debug = false;
            var radiusSegments = 12;
            var tube;
            var points = [];
            var x=0,y=0,z=0; var vertices=[];           

            var point2x, point2y;

            function v(x,y,z) {
                  return new THREE.Vertex(new THREE.Vector3(x,y,z));
                };

            for(var i=0; i<obj.path.length; i++)
            {                               
                var point = obj.path[i].point;                              
                points.push(point);                 
            }

            extrudePath = new THREE.SplineCurve3(points);           
            extrudePath.dynamic = true;         

            tube = new THREE.TubeGeometry(extrudePath, segments, 60, radiusSegments, closed, debug);
            tube.dynamic = true;

            tube.verticesNeedUpdate = true;
            tube.dynamic = true;

            var faceIndices = [ 'a', 'b', 'c', 'd' ];
            var f;

            console.log(tube.faces[0]);
            for ( var i = 0; i < tube.faces.length; i ++ ) 
            {                           
                f = tube.faces[i];
                color = new THREE.Color( 0xffffff );
                color.setRGB( Math.random(), Math.random(), Math.random());

                for(var j=0;j<4;j++)
                {
                    vertexIndex = f[ faceIndices[ j ] ];    
                    p = tube.vertices[ vertexIndex ];                   
                    f.vertexColors[ j ] = color;
                }
            }


            tubeMesh = new THREE.Mesh(tube ,new THREE.MeshBasicMaterial( 
                    { color: 0xffffff, shading: THREE.FlatShading, side: THREE.DoubleSide, wireframe: false, transparent: false, 
                        vertexColors: THREE.VertexColors, overdraw: true } ));


            var v = new THREE.Vector3(1,0,0).normalize();           
            tubeMesh.applyMatrix(matrix.makeRotationAxis(v, 0));
            tubeMesh.applyMatrix(matrix.makeTranslation(-500,0,0)); 


            if ( tube.debug ) tubeMesh.add( tube.debug );                                   
            scene.add(tubeMesh);
            objects.push(tubeMesh);                                         
        }

次に、各セグメントにテキスト付きの線などのマーカーを配置/描画します。各座標のxとyに10を足して線を引こうとしましたが、チューブが平行移動しているため、正確な点から線を引くことができませんでした。以下は、行を追加するために使用しているコードです。

for(var i=0; i<obj.path.length; i++)
            {                               
                var point = obj.path[i].point;
                point2x = point.x+10;
                point2y = point.y+10;

                var lineGeo = new THREE.Geometry();
                  lineGeo.vertices.push(v(point.x, point.y, 0), v(point2x, point2y, 0));
                  var lineMat = new THREE.LineBasicMaterial({
                    color: 0x000000, lineWidth: 2});
                  var line = new THREE.Line(lineGeo, lineMat);
                  line.type = THREE.Lines;
                  scene.add(line);

                points.push(point);                 
            }

チューブジオメトリの各セグメントにテキストでそのようなマーカーを描画/配置するにはどうすればよいですか？

4

1 に答える 1

1

線をチューブと一緒に移動/回転させたい場合は、線を の子としてでtubeMeshはなく、の子として追加しますscene。

tubeMesh.add( line );

線を正しく描画する方法を知る必要がある場合は、three.js の線の例をご覧ください。

于 2012-11-08T14:29:26.297 に答える