2

ロードされた.stl3Dオブジェクトのインタラクティブなマウスコントロールを追加しようとしています。私の難しさは、マウス制御コードを統合することであり、例を見つけたり、オブジェクトを表示したりすることではありません。以下は私が取り組んでいるものです。私の好みは、マウスでオブジェクトを回転させ、スクロールホイールでズームインおよびズームアウトしているように見えるように、（オブジェクト上の定義されたポイントを取得するのではなく）マウスイベントでカメラの位置を制御することです。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - STL</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: #000000;
            margin: 0px;
            overflow: hidden;
                }

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

    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>

    <script src="https://raw.github.com/mrdoob/three.js/master/examples/js/loaders/STLLoader.js"></script>

    <script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>

    <script>
        var container, camera, scene, renderer;

        init();
        animate();

        function init() {

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

            camera = new THREE.PerspectiveCamera(

            35,                                     // field of view
            window.innerWidth / window.innerHeight, // aspect ratio 
            1   ,                                   // distance to nearest side of rendered space
            10000                                   // distance to farthest side of rendered space
                                                );

            camera.position.set( 3, -3, -3 );    // initial camera position x,y,z coordinates


            scene = new THREE.Scene();

            // object

            var loader = new THREE.STLLoader();
            loader.addEventListener( 'load', function ( event ) {

                var geometry = event.content;

                var material = new THREE.MeshLambertMaterial( { ambient: 0xff5533, color: 0xff5533 } ); //color: object hexadecimal color after the 0x

                var mesh = new THREE.Mesh( geometry, material );

                scene.add( mesh );

            } );
            loader.load( 'slotted_disk.stl' );  // from https://raw.github.com/mrdoob/three.js/dev/examples/models/stl/slotted_disk.stl

            // lights

            scene.add( new THREE.AmbientLight( 0x222222 ) );

            var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
            directionalLight.position = camera.position;
            scene.add( directionalLight );

            // renderer

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

            container.appendChild( renderer.domElement );

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



        }

        function addLight( x, y, z, color, intensity ) {

            var directionalLight = new THREE.DirectionalLight( color, intensity );
            directionalLight.position.set( x, y, z )
            scene.add( directionalLight );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;

            camera.updateProjectionMatrix();

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

        }

        function animate() {

            requestAnimationFrame( animate );

            render();

        }

       function render() {

            //var timer = Date.now() * 0.0005;            // optional for auto rotation

            //camera.position.x = Math.sin ( timer ) * 5; // optional for auto rotation
            //camera.position.z = Math.cos( timer ) * 5;  // optional for auto rotation

           camera.lookAt( scene.position );

           renderer.render( scene, camera );

       }

    </script>

</body>

4

1 に答える 1

8

<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>それはあなたにトラックボールコントロールへのアクセスを与えるラインです。

ただし、次の行を追加して、アクティブ化する必要があります。

  • 変数宣言ヘッダー：
    var controls;

  • init（）関数内：
    controls = new THREE.TrackballControls( camera );
    controls.addEventListener( 'change', render );

  • animate（）関数で、render（）を呼び出す前に：
    controls.update();

このようにして、トラックボールの制御オブジェクトをインスタンス化し、レンダリングとバインドして、フレームごとに更新します。

これは、Three.jsサイトのmisc_controls_*。htmlの例でよくわかります。

お役に立てば幸いです...

于 2012-11-27T14:43:59.940 に答える