CODEWITHSUNDEEP
3dwebglthree.js
ForumLeech
ForumLeech

Reputation: 467

need interactive mouse control of 3D object in three.js scene

I'm trying to add interactive mouse control of loaded .stl 3D objects. My difficulty is with integrating mouse control code, not finding examples or displaying objects. Below is what I'm working with. My preference is to control the camera position with mouse events (as opposed to grabbing a defined point on the object) such that it looks like I'm rotating the object with the mouse and zooming in and out with the scroll wheel.

<!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>

Upvotes: 2

Views: 5475

Answers (1)

Mutos
Mutos

Reputation: 320

It's the line <script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script> that gives you access to the trackball control.

But you have to activate it, by adding the following lines :

  • On the variable declaration header :
    var controls;

  • In the init() function :
    controls = new THREE.TrackballControls( camera );
    controls.addEventListener( 'change', render );

  • In the animate() function, before the call to render() :
    controls.update();

This way, you instanciate your trackball controll object, bind it with the rendering and update it at every frame.

It's quite visible on the misc_controls_*.html examples from Three.js site.

Hope it'll help...

Upvotes: 8

Related Questions