1

在 3d 场景中,管几何是通过从外部 javascript 文件加载 200 个点作为 JSON 数据构建的。下面是完整的代码:

                <!DOCTYPE html>
<html lang="en">
    <head>
        <title>3d Model using HTML5 and three.js</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #f0f0f0;
                margin: 0px;
                overflow: hidden;
            }
            #Find_panel {
                position: absolute;
                right: 5px;
                top: 5px;
                color: #fff;
                text-align: left;
                background: rgba(0, 0, 0, 0.5);
                padding: 10px;
                width: 290px;
                height: 120px;
                border: solid 1px black;
                border-radius: 5px;
            }
            #Find_panel input {
                padding: 2px 4px;
                margin-bottom: 3px;
            }
        </style>
    </head>
    <body>          
        <input type="button" value="plot" onClick="return plotPath();" />        
        <script src="three.min.js" type="text/javascript"></script>
        <script src="Curve.js" type="text/javascript"></script>
        <script src="TubeGeometry.js" type="text/javascript"></script>      
        <script src="Stats.js" type="text/javascript"></script>
        <script src="Detector.js" type="text/javascript"></script>
        <script src="path.js" type="text/javascript"></script>

        <script>

        // variables
        var container, stats, form;

        var camera, scene, renderer, splineCamera, cameraHelper, cameraEye;

        var text, plane, tube, tubeMesh, parent;

        var targetRotation = 0;
        var targetRotationOnMouseDown = 0;

        var mouseX = 0;
        var mouseXOnMouseDown = 0;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        var binormal = new THREE.Vector3();
        var normal = new THREE.Vector3();

        var materials = []; 
        var onMouseDownMouseX = 0, onMouseDownMouseY = 0,
            lon = 0, onMouseDownLon = 0,isUserInteracting = false,
            lat = 0, onMouseDownLat = 0,
            phi = 0, theta = 0;

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

            for(var i=0; i<obj.path.length; i++)
            {                               
                console.log(obj.path[i].point);
                points.push(obj.path[i].point);
                extrudePath = new THREE.SplineCurve3(points);
                extrudePath.dynamic = true;

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

                tubeMesh = new THREE.Mesh(tube ,new THREE.MeshBasicMaterial({
                    color: 0x000000,side: THREE.DoubleSide,
                    opacity: 0.5,transparent: true,
                    wireframe: true}));
                tubeMesh.__dirtyVertices = true;
                tubeMesh.dynamic = true;

                parent = new THREE.Object3D();
                parent.position.y = 100;

                if ( tube.debug ) tubeMesh.add( tube.debug );
                parent.add( tubeMesh );                                 
            }           
            scene.add( tubeMesh );
            scene.add(parent);
            animate();                          
        } 

        init();                     
        //animate();

        function init(){

            // container
            container = document.createElement( 'div' );
            document.body.appendChild( container );

            // renderer         
            renderer = new THREE.WebGLRenderer( { antialias: true } ); 
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            // scene            
            scene = new THREE.Scene();

            // camera
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);          
            camera.position.set(0, 50, 500);            
            camera.lookAt(parent);          

            // CONTROLS         
            controls = new THREE.TrackballControls( this.camera, container );   

            // light            
            scene.add( new THREE.AmbientLight( 0x404040 ) );
            light = new THREE.DirectionalLight( 0xffffff );
            light.position.set( 0, 1, 0 );
            scene.add( light );                 

            // Grid
            geometry = new THREE.Geometry();
            geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
            geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );

            for ( var i = 0; i <= 20; i ++ ) {

                line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
                line.position.z = ( i * 50 ) - 500;
                scene.add( line );

                line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
                line.position.x = ( i * 50 ) - 500;
                line.rotation.y = 90 * Math.PI / 180;
                scene.add( line );
            }           

            // projector
            projector = new THREE.Projector();

            // stats
            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            //container.appendChild( stats.domElement );

            document.addEventListener( 'mousedown', onDocumentMouseDown, false );
            document.addEventListener( 'mouseover', onDocumentMouseOver, false );
            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            document.addEventListener( 'touchstart', onDocumentTouchStart, false );
            document.addEventListener( 'touchmove', onDocumentTouchMove, false );
            document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
            document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);
            window.addEventListener( 'resize', onWindowResize, false );

        }       

        function onWindowResize() {

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

        }

        function onDocumentMouseDown( event ) {
            event.preventDefault();

            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            document.addEventListener( 'mouseup', onDocumentMouseUp, false );
            document.addEventListener( 'mouseout', onDocumentMouseOut, false );

            isUserInteracting = true;

            onPointerDownPointerX = event.clientX;
            onPointerDownPointerY = event.clientY;

            onPointerDownLon = lon;
            onPointerDownLat = lat;
        }

        function onDocumentMouseMove( event ) {

            if ( isUserInteracting ) {
                    lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
                    lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
                }
        }

        function onDocumentMouseUp( event ) {

            isUserInteracting = false;
            document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
            document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
            document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

        }

        function onDocumentMouseOut( event ) {

            document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
            document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
            document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

        }

        function onDocumentMouseOver( event ) {

            document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
            document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
            document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

        }

        function onDocumentTouchStart( event ) {

            if ( event.touches.length === 1 ) {

                event.preventDefault();

                mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
                targetRotationOnMouseDown = targetRotation;

            }

        }

        function onDocumentTouchMove( event ) {
            if ( event.touches.length === 1 ) {
                event.preventDefault();
                mouseX = event.touches[ 0 ].pageX - windowHalfX;
                targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
            }
        }

        function onDocumentMouseWheel( event ) {

            // WebKit

            if ( event.wheelDeltaY ) {

                fov -= event.wheelDeltaY * 0.05;

            // Opera / Explorer 9

            } else if ( event.wheelDelta ) {

                fov -= event.wheelDelta * 0.05;

            // Firefox

            } else if ( event.detail ) {

                fov += event.detail * 1.0;

            }

            camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );
            render();

        }

        function animate() {
            requestAnimationFrame( animate );           
            render();
            update();
        }

        function update()
        {
            controls.update();
            stats.update();
        }

        function render() {                         

            lat = Math.max( - 85, Math.min( 85, lat ) );
            phi = ( 90 - lat ) * Math.PI / 180;
            theta = lon * Math.PI / 180;

            camera.target = 500 * Math.sin( phi ) * Math.cos( theta );
            camera.target = 500 * Math.cos( phi );
            camera.target = 500 * Math.sin( phi ) * Math.sin( theta );

            tubeMesh.rotation.y += ( targetRotation - tubeMesh.rotation.y ) * 0.15;         
            camera.updateMatrixWorld();
            camera.lookAt( camera.target );

            renderer.render( scene, camera );
        }
        </script>        
    </body>
</html>

path.js 文件

function getPath()
{
    var path = {"path": 
        [
            {"point":new THREE.Vector3(0,0,-4.8)},
            {
                "point":new THREE.Vector3(3,-1.9,-4.8)
            },
            {
                "point":new THREE.Vector3(361.2,-1.9,-4.8)
            },
            {
                "point":new THREE.Vector3(378,-1.97,-4.85)
            },
            {
                "point":new THREE.Vector3(386,-2.02,-4.89)
            },
            {
                "point":new THREE.Vector3(396,-2.05,-4.93)
            },
            {
                "point":new THREE.Vector3(405,-2.06,-4.99)
            },
            {
                "point":new THREE.Vector3(417,-2.13,-5.07)
            },
            {
                "point":new THREE.Vector3(435,-2.21,-5.09)
            },
            {
                "point":new THREE.Vector3(461,-2.35,-5.04)
            },
            {
                "point":new THREE.Vector3(484.99,-2.82,-5.06)
            },
            {
                "point":new THREE.Vector3(513.97,-3.99,-5.17)
            },
            {
                "point":new THREE.Vector3(543.88,-6.25,-5.47)
            },
            {
                "point":new THREE.Vector3(571.67,-9.57,-6.06)
            },
            {
                "point":new THREE.Vector3(600.32,-14.04,-6.64)
            },
            {
                "point":new THREE.Vector3(628.83,-19.34,-7.14)
            },
            {
                "point":new THREE.Vector3(658.12,-25.79,-7.56)
            },
            {
                "point":new THREE.Vector3(686.17,-33.14,-7.83)
            },
            {
                "point":new THREE.Vector3(712.87,-41.54,-8.28)
            },
            {
                "point":new THREE.Vector3(736.45,-49.81,-8.98)
            },
            {
                "point":new THREE.Vector3(743.95,-52.61,-9.18)
            },
            {
                "point":new THREE.Vector3(783.56,-69.29,-9.89)
            },
            {
                "point":new THREE.Vector3(810.36,-82.1,-10.27)
            },
            {
                "point":new THREE.Vector3(835.8,-95.37,-10.06)
            },
            {
                "point":new THREE.Vector3(869.69,-114.96,-8.2)
            },
            {
                "point":new THREE.Vector3(885.47,-124.91,-6.93)
            },
            {
                "point":new THREE.Vector3(911.47,-140.99,-5.56)
            },
            {
                "point":new THREE.Vector3(935.87,-154.92,-5.28)
            },
            {
                "point":new THREE.Vector3(960.87,-168.16,-5.85)
            },
            {
                "point":new THREE.Vector3(986.6,-180.75,-7.54)
            },
            {
                "point":new THREE.Vector3(1015.85,-193.98,-11.05)
            },
            {
                "point":new THREE.Vector3(1042.4,-205,-15.55)
            },
            {
                "point":new THREE.Vector3(1069,-215.17,-21.53)
            },
            {
                "point":new THREE.Vector3(1095.28,-224.51,-29.08)
            },
            {
                "point":new THREE.Vector3(1121.58,-232.81,-38.03)
            },
            {
                "point":new THREE.Vector3(1147.96,-239.95,-48.02)
            },
            {
                "point":new THREE.Vector3(1173.78,-246.06,-58.7)
            },
            {
                "point":new THREE.Vector3(1199.97,-251.68,-70.8)
            },
            {
                "point":new THREE.Vector3(1225.44,-256.37,-83.85)
            },
            {
                "point":new THREE.Vector3(1250.21,-259.76,-97.73)
            },
            {
                "point":new THREE.Vector3(1275.18,-261.91,-112.89)
            },
            {
                "point":new THREE.Vector3(1299.18,-262.72,-128.25)
            },
            {
                "point":new THREE.Vector3(1324.16,-261.9,-145.17)
            },
            {
                "point":new THREE.Vector3(1347.12,-259.26,-162.01)
            },
            {
                "point":new THREE.Vector3(1370.1,-254.79,-180.44)
            },
            {
                "point":new THREE.Vector3(1391.44,-249.33,-199.45)
            },
            {
                "point":new THREE.Vector3(1412.08,-242.89,-219.66)
            },
            {
                "point":new THREE.Vector3(1431.21,-235.86,-240)
            },
            {
                "point":new THREE.Vector3(1448.85,-228.85,-259.77)
            },
            {
                "point":new THREE.Vector3(1466.93,-221.02,-281.17)
            },
            {
                "point":new THREE.Vector3(1482.61,-212.83,-301.56)
            },
            {
                "point":new THREE.Vector3(1499.46,-201.99,-325.61)
            },
            {
                "point":new THREE.Vector3(1514.79,-190.3,-349.76)
            },
            {
                "point":new THREE.Vector3(1528.46,-178.3,-373.74)
            },
            {
                "point":new THREE.Vector3(1540.44,-165.72,-396.95)
            },
            {
                "point":new THREE.Vector3(1551.12,-152.11,-420.22)
            },
            {
                "point":new THREE.Vector3(1560.6,-137.69,-443.65)
            },
            {
                "point":new THREE.Vector3(1568.68,-122.77,-467.03)
            },
            {
                "point":new THREE.Vector3(1575.1,-107.38,-490.63)
            },
            {
                "point":new THREE.Vector3(1579.83,-90.95,-514.17)
            },
            {
                "point":new THREE.Vector3(1582.85,-73.58,-537.44)
            },
            {
                "point":new THREE.Vector3(1584.44,-56.31,-559.55)
            },
            {
                "point":new THREE.Vector3(1585.69,-37.18,-583.4)
            },
            {
                "point":new THREE.Vector3(1586.7,-19.01,-605.85)
            },
            {
                "point":new THREE.Vector3(1587.11,0.09,-627.93)
            },
            {
                "point":new THREE.Vector3(1587.12,19.32,-649.89)
            },
            {
                "point":new THREE.Vector3(1587.14,37.95,-672.25)
            },
            {
                "point":new THREE.Vector3(1587.15,56.42,-694.74)
            },
            {
                "point":new THREE.Vector3(1587.16,74.88,-717.49)
            },
            {
                "point":new THREE.Vector3(1587.18,86.94,-732.49)
            },
            {
                "point":new THREE.Vector3(1587.02,90.22,-736.59)
            },
            {
                "point":new THREE.Vector3(1585.94,98.3,-746.72)
            },
            {
                "point":new THREE.Vector3(1584.12,110.12,-761.35)
            },
            {
                "point":new THREE.Vector3(1582.37,126.31,-780.87)
            },
            {
                "point":new THREE.Vector3(1581.35,144.78,-802.65)
            },
            {
                "point":new THREE.Vector3(1581,164.31,-824.89)
            },
            {
                "point":new THREE.Vector3(1581.48,183.79,-845.82)
            },
            {
                "point":new THREE.Vector3(1582.68,202.72,-864.75)
            },
            {
                "point":new THREE.Vector3(1584.17,225.59,-885.31)
            },
            {
                "point":new THREE.Vector3(1585.18,248.06,-903.31)
            },
            {
                "point":new THREE.Vector3(1585.82,270.32,-919.26)
            },
            {
                "point":new THREE.Vector3(1586.13,295.79,-935.66)
            },
            {
                "point":new THREE.Vector3(1586.18,320.82,-950.1)
            },
            {
                "point":new THREE.Vector3(1586.18,346.44,-963.02)
            },
            {
                "point":new THREE.Vector3(1586.08,372.73,-975.03)
            },
            {
                "point":new THREE.Vector3(1585.94,398.95,-986.7)
            },
            {
                "point":new THREE.Vector3(1585.79,425.21,-998.77)
            },
            {
                "point":new THREE.Vector3(1585.63,450.33,-1010.68)
            },
            {
                "point":new THREE.Vector3(1585.41,476.3,-1023.12)
            },
            {
                "point":new THREE.Vector3(1585.28,502.88,-1036.15)
            },
            {
                "point":new THREE.Vector3(1585.33,528.34,-1049.39)
            },
            {
                "point":new THREE.Vector3(1585.06,553.75,-1063.35)
            },
            {
                "point":new THREE.Vector3(1584.58,577.19,-1076.95)
            },
            {
                "point":new THREE.Vector3(1584.17,603.04,-1092.95)
            },
            {
                "point":new THREE.Vector3(1583.93,625.7,-1107.8)
            },
            {
                "point":new THREE.Vector3(1583.78,649.56,-1124.45)
            },
            {
                "point":new THREE.Vector3(1583.65,673.62,-1142.71)
            },
            {
                "point":new THREE.Vector3(1583.58,696.13,-1160.68)
            },
            {
                "point":new THREE.Vector3(1583.51,718.5,-1178.97)
            },
            {
                "point":new THREE.Vector3(1583.63,740.65,-1197.37)
            },
            {
                "point":new THREE.Vector3(1583.93,762.65,-1215.8)
            },
            {
                "point":new THREE.Vector3(1584.15,784.53,-1234.98)
            },
            {
                "point":new THREE.Vector3(1584.18,805.02,-1253.63)
            },
            {
                "point":new THREE.Vector3(1584.12,827.32,-1273.69)
            },
            {
                "point":new THREE.Vector3(1584.16,848.92,-1292.44)
            },
            {
                "point":new THREE.Vector3(1584.28,870.61,-1310.92)
            },
            {
                "point":new THREE.Vector3(1584.31,891.39,-1328.32)
            },
            {
                "point":new THREE.Vector3(1584.15,913.88,-1347.1)
            },
            {
                "point":new THREE.Vector3(1583.87,935.63,-1365.2)
            },
            {
                "point":new THREE.Vector3(1583.66,958.97,-1384.67)
            },
            {
                "point":new THREE.Vector3(1583.6,980.53,-1402.69)
            },
            {
                "point":new THREE.Vector3(1583.52,1004.11,-1422.36)
            },
            {
                "point":new THREE.Vector3(1583.46,1026.39,-1440.92)
            },
            {
                "point":new THREE.Vector3(1583.46,1048.47,-1459.25)
            },
            {
                "point":new THREE.Vector3(1583.63,1070.67,-1477.76)
            },
            {
                "point":new THREE.Vector3(1583.79,1091.96,-1495.32)
            },
            {
                "point":new THREE.Vector3(1583.74,1114.66,-1513.84)
            },
            {
                "point":new THREE.Vector3(1583.51,1136.87,-1532.64)
            },
            {
                "point":new THREE.Vector3(1583.39,1159.24,-1553.08)
            },
            {
                "point":new THREE.Vector3(1583.51,1180.05,-1573.28)
            },
            {
                "point":new THREE.Vector3(1583.6,1200.71,-1593.62)
            },
            {
                "point":new THREE.Vector3(1583.63,1221.51,-1613.84)
            },
            {
                "point":new THREE.Vector3(1583.67,1242.52,-1634.25)
            },
            {
                "point":new THREE.Vector3(1583.66,1263.01,-1654.49)
            },
            {
                "point":new THREE.Vector3(1583.6,1283.47,-1675.04)
            },
            {
                "point":new THREE.Vector3(1583.66,1304.07,-1695.74)
            },
            {
                "point":new THREE.Vector3(1583.71,1311.2,-1703.03)
            },
            {
                "point":new THREE.Vector3(1583.83,1330.87,-1723.79)
            },
            {
                "point":new THREE.Vector3(1583.92,1350.74,-1744.92)
            },
            {
                "point":new THREE.Vector3(1583.93,1370.59,-1765.93)
            },
            {
                "point":new THREE.Vector3(1583.9,1390.29,-1787.2)
            },
            {
                "point":new THREE.Vector3(1583.92,1410.08,-1808.67)
            },
            {
                "point":new THREE.Vector3(1583.93,1429.9,-1829.84)
            },
            {
                "point":new THREE.Vector3(1584.27,1447.08,-1848.41)
            },
            {
                "point":new THREE.Vector3(1584.54,1460.96,-1863.9)
            },
            {
                "point":new THREE.Vector3(1584.2,1480.03,-1886.4)
            },
            {
                "point":new THREE.Vector3(1583.92,1497.61,-1908.95)
            },
            {
                "point":new THREE.Vector3(1584.04,1521.63,-1942.18)
            },
            {
                "point":new THREE.Vector3(1584.12,1538.22,-1966.08)
            },
            {
                "point":new THREE.Vector3(1584.04,1554.3,-1989.74)
            },
            {
                "point":new THREE.Vector3(1583.86,1570.59,-2014.21)
            },
            {
                "point":new THREE.Vector3(1583.64,1587.01,-2038.23)
            },
            {
                "point":new THREE.Vector3(1583.6,1603.9,-2061.56)
            },
            {
                "point":new THREE.Vector3(1583.7,1621.04,-2084.58)
            },
            {
                "point":new THREE.Vector3(1583.71,1638.71,-2107.95)
            },
            {
                "point":new THREE.Vector3(1583.66,1656.08,-2131.42)
            },
            {
                "point":new THREE.Vector3(1583.44,1673.04,-2155.19)
            },
            {
                "point":new THREE.Vector3(1583.29,1689.5,-2178.95)
            },
            {
                "point":new THREE.Vector3(1583.43,1705.84,-2202.9)
            },
            {
                "point":new THREE.Vector3(1583.5,1722.15,-2227)
            },
            {
                "point":new THREE.Vector3(1583.45,1738.47,-2251.09)
            },
            {
                "point":new THREE.Vector3(1583.45,1754.53,-2275.72)
            },
            {
                "point":new THREE.Vector3(1583.44,1770.43,-2299.72)
            },
            {
                "point":new THREE.Vector3(1583.62,1787.54,-2323.14)
            },
            {
                "point":new THREE.Vector3(1583.99,1805.05,-2346.5)
            },
            {
                "point":new THREE.Vector3(1584.4,1823.38,-2368.96)
            },
            {
                "point":new THREE.Vector3(1584.79,1843.52,-2390.09)
            },
            {
                "point":new THREE.Vector3(1585.26,1865.03,-2410.12)
            },
            {
                "point":new THREE.Vector3(1585.72,1887.27,-2428.4)
            },
            {
                "point":new THREE.Vector3(1585.81,1911.12,-2445.42)
            },
            {
                "point":new THREE.Vector3(1585.65,1935.65,-2460.87)
            },
            {
                "point":new THREE.Vector3(1585.56,1960.84,-2475.45)
            },
            {
                "point":new THREE.Vector3(1585.55,1986.39,-2488.95)
            },
            {
                "point":new THREE.Vector3(1585.54,2012.8,-2500.9)
            },
            {
                "point":new THREE.Vector3(1585.56,2039.95,-2511.38)
            },
            {
                "point":new THREE.Vector3(1585.68,2067.37,-2520.49)
            },
            {
                "point":new THREE.Vector3(1585.84,2095.54,-2528.14)
            },
            {
                "point":new THREE.Vector3(1585.95,2124.01,-2534.66)
            },
            {
                "point":new THREE.Vector3(1585.85,2152.62,-2540.46)
            },
            {
                "point":new THREE.Vector3(1585.66,2181.3,-2545.39)
            },
            {
                "point":new THREE.Vector3(1585.47,2209.9,-2549.55)
            },
            {
                "point":new THREE.Vector3(1585.15,2239.28,-2553.11)
            },
            {
                "point":new THREE.Vector3(1584.91,2268.14,-2555.99)
            },
            {
                "point":new THREE.Vector3(1584.65,2297.08,-2559)
            },
            {
                "point":new THREE.Vector3(1584.51,2325.96,-2563.23)
            },
            {
                "point":new THREE.Vector3(1584.69,2355.01,-2568.93)
            },
            {
                "point":new THREE.Vector3(1585,2382.93,-2575.94)
            },
            {
                "point":new THREE.Vector3(1585.22,2410.98,-2584.41)
            },
            {
                "point":new THREE.Vector3(1585.56,2438.87,-2593.69)
            },
            {
                "point":new THREE.Vector3(1586.12,2465.93,-2604.11)
            },
            {
                "point":new THREE.Vector3(1586.28,2492.55,-2616.1)
            },
            {
                "point":new THREE.Vector3(1586.05,2518.24,-2629.53)
            },
            {
                "point":new THREE.Vector3(1585.72,2543.28,-2644.54)
            },
            {
                "point":new THREE.Vector3(1585.16,2566.25,-2659.83)
            },
            {
                "point":new THREE.Vector3(1584.5,2587.99,-2675.66)
            },
            {
                "point":new THREE.Vector3(1584.07,2609.47,-2692.17)
            },
            {
                "point":new THREE.Vector3(1583.9,2632.23,-2709.99)
            },
            {
                "point":new THREE.Vector3(1583.58,2652.96,-2726.97)
            },
            {
                "point":new THREE.Vector3(1583.31,2673.99,-2745.45)
            },
            {
                "point":new THREE.Vector3(1583.25,2694.96,-2765.47)
            },
            {
                "point":new THREE.Vector3(1583.18,2713.75,-2785)
            },
            {
                "point":new THREE.Vector3(1583.12,2732.02,-2805.55)
            },
            {
                "point":new THREE.Vector3(1582.65,2749.82,-2826.9)
            },
            {
                "point":new THREE.Vector3(1581.74,2767.17,-2848.6)
            },
            {
                "point":new THREE.Vector3(1580.85,2784.22,-2870.03)
            },
            {
                "point":new THREE.Vector3(1579.57,2801.31,-2891.28)
            },
            {
                "point":new THREE.Vector3(1578.92,2808.08,-2899.67)
            }
        ]
    }
    return path;
}

如何通过键盘或轨迹球使相机移动到管状几何体中? 管几何的屏幕截图

4

1 回答 1

0

有几种方法可以在 TubeGeometry 内移动。如果您只需要跟随一些轨道,您可以创建一个样条线,然后使用

spline.getPointAt( 0 -1 ) 

在你的车、相机或任何你在管子里移动的东西上。旋转会变得有些棘手。

于 2015-06-04T16:43:18.420 回答