需要在三个.js场景中交互式鼠标控制3D对象

我正在尝试添加加载的.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>

它是

允许您访问轨迹球控件的行<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 示例中非常明显。

希望它能有所帮助...

相关内容

最新更新

热门标签：