1

我有一个奶牛的 collada 模型，我想用鼠标围绕该模型旋转。我已经搜索了很多解决方案，但没有一个适用于我的代码。

下面是代码。

我的问题是：我想用鼠标旋转模型而不是自动旋转

    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=2.0, maximum-scale=2.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #676578;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            color: #000000;
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            z-index: 100;
            display:block;

        }

        a { color: skyblue }
    </style>
</head>
<body>

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

    <script>
        //als de browser geen open gl ondersteunt, geeft ie een message
        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var container, stats;

        var camera, scene, renderer, objects;
        var particleLight, pointLight;
        var dae, skin;

        var loader = new THREE.ColladaLoader();
        loader.options.convertUpAxis = true;
        loader.load( './models/collada/monster/monster.dae', function ( collada ) {

            dae = collada.scene;
            skin = collada.skins[ 0 ];
            //scale van de koe, scaled de x y en z as gelijk
            dae.scale.x = dae.scale.y = dae.scale.z = 0.006;
            dae.updateMatrix();

            init();
            animate();



        } );

        function init() {

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

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
            camera.position.set( 0, 0, 3 );

            scene = new THREE.Scene();

            // Grid

            /*/
            //grid grote
            var size = 0, step = 1;

            var geometry = new THREE.Geometry();
            var material = new THREE.LineBasicMaterial( { color: 0xcccccc, opacity: 0.2 } );

            for ( var i = - size; i <= size; i += step ) {

                geometry.vertices.push( new THREE.Vector3( - size, - 0.04, i ) );
                geometry.vertices.push( new THREE.Vector3(   size, - 0.04, i ) );

                geometry.vertices.push( new THREE.Vector3( i, - 0.04, - size ) );
                geometry.vertices.push( new THREE.Vector3( i, - 0.04,   size ) );

            }

            var line = new THREE.Line( geometry, material, THREE.LinePieces );
            scene.add( line );/*/

            // Add the COLLADA

            scene.add( dae );

            particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
            scene.add( particleLight );

            // Lights

            scene.add( new THREE.AmbientLight( 0xcccccc ) );
            //hoeveelheid licht
            var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xe5e5e4 );
            directionalLight.position.x = Math.random() - 10;
            directionalLight.position.y = Math.random() - 10;
            directionalLight.position.z = Math.random() - 10;
            directionalLight.position.normalize();
            scene.add( directionalLight );

            pointLight = new THREE.PointLight( 0xffffff, 4 );
            pointLight.position = particleLight.position;
            scene.add( pointLight );

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );

            container.appendChild( renderer.domElement );

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

            //

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

        }

        function onWindowResize() {

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

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

        }

        //

        var t = 0;
        var clock = new THREE.Clock();

        function animate() {

            var delta = clock.getDelta();

            requestAnimationFrame( animate );

            if ( t > 0 ) t = 0;

            if ( skin ) {

                // guess this can be done smarter...

                // (Indeed, there are way more frames than needed and interpolation is not used at all
                //  could be something like - one morph per each skinning pose keyframe, or even less,
                //  animation could be resampled, morphing interpolation handles sparse keyframes quite well.
                //  Simple animation cycles like this look ok with 10-15 frames instead of 100 ;)

                for ( var i = 0; i < skin.morphTargetInfluences.length; i++ ) {

                    skin.morphTargetInfluences[ i ] = 10;

                }





            }

            render();
            stats.update();


        }

        function render() {
            //snelheid van het draaien
            var timer = Date.now() * 0.0005;
            //camera positie op x
            camera.position.x = Math.cos( timer ) * 15;
            camera.position.y = 2;
            // camera positie op z
            camera.position.z = Math.sin( timer ) * 10;

            camera.lookAt( scene.position );
            // light positie
            particleLight.position.x = Math.sin( timer * 0 ) * 3009;
            particleLight.position.y = Math.cos( timer * 0 ) * 4000;
            particleLight.position.z = Math.cos( timer * 0 ) * 3009;

            renderer.render( scene, camera );

        }


        //nieuw

    </script>
</body>

4

2 回答 2

1

我猜你想要类似http://threejs.org/examples/misc_controls_trackball.html的东西？

重要的位是

controls = new THREE.TrackballControls( camera ); // in the init function

和

controls.update(); // in the animate function

如果它没有产生您想要的，您可能必须调整控件属性，就像在示例中一样。

于 2013-10-10T13:45:00.900 回答
1

我对你的情况做了类似的事情。我使用OrbitControls来做这些事情。您可以使用 Three.js 提供的 OrbitControls。OrbitControls 允许您对模型进行旋转、缩放和平移。

请访问此链接https://github.com/mrdoob/three.js/以获取源代码。OrbitControls.js 位于examples/js/controls中。

您接下来需要做的是：

  • 导入 OrbitControls.js

<script src="lib/OrbitControls.js"></script>

  • 在创建相机和渲染器，并将 domelement 附加到渲染器之后，您需要创建新的 OrbitControls 对象以及相机和 renderer.domelement 参数。

var controls = new THREE.OrbitControls(camera, renderer.domElement);

  • 更新渲染函数中的控件。请将此代码放在controls.update();后面renderer.render( scene, camera );
于 2014-01-15T07:16:41.213 回答