Question

下面是我的管几何场景代码。我已经从外部文件中加载了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;
            }
            #info {
                    color:#000;
            position: absolute;
            top: 0px; width: 100%;
            padding: 5px;

            }
        </style>
    </head>
    <body>              
        <div id="info">         
            WASD-move, RF-up/down, QE-roll, mouse-look around, mouse left/right click- zoom-in/out 
        </div>            
        <script src="three.min.js" type="text/javascript"></script>
        <script src="Curve.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;

        var camera, scene, renderer, controls;

        var text, plane, tube, tubeMesh, parent;

        var targetRotation = 0;
        var targetRotationOnMouseDown = 0;

        var mouseX = 0, mouseY = 0; var radius = 6371;
        var mouseXOnMouseDown = 0;

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

        var clock = new THREE.Clock();

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

            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);               
            tube = new THREE.TubeGeometry(extrudePath, segments, 2, radiusSegments, closed, debug);         

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

            if ( tube.debug ) tubeMesh.add( tube.debug );

            scene.add( tubeMesh );

        } 

        init();                             
        animate();

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

            // scene            
            scene = new THREE.Scene();
            scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

            // renderer         
            renderer = new THREE.WebGLRenderer( { antialias: false } );
            renderer.setClearColor( scene.fog.color, 1 );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            // camera   
            camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );

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

            light = new THREE.DirectionalLight( 0x002288 );
            light.position.set( -1, -1, -1 );
            scene.add( light );

            light = new THREE.AmbientLight( 0x555555 );
            scene.add( light );

            // CONTROLS
            controls = new THREE.RollControls( camera );
            controls.movementSpeed = 50;
            controls.lookSpeed = 3;
            controls.constrainVertical = [ -0.5, 0.5 ];         

            // 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();

            plotPath();

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

            // events           
            window.addEventListener( 'resize', onWindowResize, false );
        }

        function onWindowResize() {
            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;

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

            renderer.setSize( window.innerWidth, window.innerHeight );
        }

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

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

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

如何识别管圆周上的点以及如何从该点旋转管？

Screenshot of 3d model

Answer 1

例如，

OrbitControls有一个属性target，它既是旋转中心又是camera查看位置。

controls = new THREE.OrbitControls( camera );

您可以使用拾取来更改相机的旋转中心。

function onDocumentMouseDown( event ) {

    event.preventDefault();

    var vector = new THREE.Vector3( 
        ( event.clientX / window.innerWidth ) * 2 - 1, 
        - ( event.clientY / window.innerHeight ) * 2 + 1, 
        0.5 );

    projector.unprojectVector( vector, camera );
    var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

    var intersects = ray.intersectObjects( objects );    

    if ( intersects.length > 0 ) {

        controls.target.copy( intersects[0].point );

    }

}

编辑：这是一个更新的小提琴：http://jsfiddle.net/eVkgs/30/

three.js r.65

three.js - 识别管圆周上的点并从该点旋转

1 个答案: