个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 16:15:13 25 4
gpt4 key购买 nike

我正在尝试为加载的 .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 );<br/>
    controls.addEventListener( 'change', render );

  • 在 animate() 函数中，在调用 render() 之前:
    controls.update();

通过这种方式，您可以实例化轨迹球控件对象，将其与渲染绑定(bind)并在每一帧更新它。

在 Three.js 站点的 misc_controls_*.html 示例中非常明显。

希望对你有帮助...

关于3d - 需要在 three.js 场景中对 3D 对象进行交互式鼠标控制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13585636/

25 4 0
文章推荐： ios - iOS-Cordova插件Tagmanager错误
文章推荐： java - 为什么我们在Java中不需要很长的后缀？
文章推荐： java - 使用 VS Code 在 Spring Boot 中设置 GCP 环境变量
文章推荐： ios - 核心数据应用组同步(带扩展)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com