WebGL学习

最新推荐文章于 2024-08-25 21:00:29 发布

jxjaqian

最新推荐文章于 2024-08-25 21:00:29 发布

阅读量351

点赞数

分类专栏： webgl 文章标签： webgl three.js TrackballControls.js

本文链接：https://blog.youkuaiyun.com/jxjaqian/article/details/81941649

版权

webgl 专栏收录该内容

4 篇文章

订阅专栏

WebGL学习（四）

运用鼠标控件对stl文件的查看

想要实现鼠标滑动，可旋转查看物体。从网上找到两种可实现的库，一个是OrbitControls.js，一个是TrackballControls.js，两者的共同点都是均能通过控制鼠标对场景物体进行查看，不同的是TrackballControls.js模拟的是球体转动，OrbitControls.js我也说不太来是怎样一种转动，知识点还没有掌握= 、=

TrackballControls.js的样例

<!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: #fff;
            margin: 0px;
            overflow: hidden;
        }
    </style>

</head>
<body>

    <script src="js/three.js"></script>

    <script src="js/STLLoader.js"></script>

    <script src="js/TrackballControls.js"></script>


    <script>

        //**var stats;
        var container, camera, scene, renderer, controls;

        var start_time = Date.now();
        var mouseX = 0, mouseY = 0;

        init();

        function init() {

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

            // renderer

            renderer = new THREE.WebGLRenderer({ antialias: true });

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

            renderer.setClearColor(0xF5F5F5);

            container.appendChild(renderer.domElement);

            // scene

            scene = new THREE.Scene();

            // camera

            var fov = 80,//拍摄距离  视野角值越大，场景中的物体越小
                near = 1,//最小范围
                far = 10000;//最大范围

            camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);

            camera.position.set(100, 100, 0);
            camera.lookAt(scene.position);


            scene.add(camera);

            // lights

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

            var light = new THREE.PointLight(0xffffff, 1);
            camera.add(light);

            mouseControl

            controls = new THREE.TrackballControls(camera, renderer.domElement);

            controls.addEventListener('change', render); // add this only if there is no animation loop (requestAnimationFrame)

            controls.enableDamping = false;//使动画循环使用时阻尼或自转 意思是否有惯性

            controls.dynamicDampingFactor = 0.5;//动态阻尼系数 就是鼠标拖拽旋转灵敏度

            controls.noZoom = false;    //如果设置为true, 则禁用 鼠标滚轮调整大小(远近)的功能

            controls.noPan = false;     //如设置为true, 则禁用 按下鼠标右键平移的功能

            //controls.minDistance = 100;//设置相机距离原点的最近距离

            controls.maxDistance = 1000;//设置相机距离原点的最远距离

            controls.rotateSpeed = 2.0;  //按住鼠标左键后拖动查看时的旋转速度

            controls.zoomSpeed = 1.2;   //用滚轮调整大小(远近)时候的速度

            controls.panSpeed = 0.5;    //按住鼠标右键后的平移速度



            // object

            var loader = new THREE.STLLoader();
            loader.load('stl/Pulmonary-001R2_Cut_1.stl', function (geometry) {

                var material = new THREE.MeshPhongMaterial({ color: 0x1874CD });//63B8FF 1E92FB

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

                scene.add(mesh);

            });

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

            animate();
        }

        function onWindowResize() {

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

            camera.updateProjectionMatrix();

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


        }
        function animate() {

            requestAnimationFrame(animate);
            controls.update(); 
            render();


        }

        function render() {
            renderer.render(scene, camera);
        }

    </script>


</body>
</html>