Question

我正在尝试添加加载的.stl 3D对象的交互式鼠标控件。我的困难在于集成鼠标控制代码，而不是查找示例或显示对象。以下是我正在使用的内容。我的偏好是用鼠标事件控制摄像机位置（而不是抓住对象上的一个定义点），这样看起来我用鼠标旋转对象并用滚轮放大和缩小。

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

Answer 1

这条线<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示例中非常明显。

希望它会有所帮助...

需要在three.js场景中对3D对象进行交互式鼠标控制

1 个答案: