three.js 中国城市PM2.5可视化案例

已于 2022-09-27 17:16:03 修改
阅读量434 收藏
点赞数
分类专栏： three.js 文章标签： javascript 前端 java
于 2022-09-27 10:17:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54224923/article/details/127066352
版权

Three.js零基础入门教程(郭隆邦)

中国城市PM2.5可视化案例：
数据文件数据.json给出了各个城市的PM2.5值和城市坐标。解析的时候把城市的PM2.5大小用圆圈大小表示，城市坐标直接通过模型位置属性设置。
效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>10.2中国城市PM2.5可视化案例</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--引入three.js三维引擎-->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <!-- 引入threejs扩展控件OrbitControls.js -->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
    <script>
        var scene=new THREE.Scene();

        /**
         * 一个精灵模型对象表示一个城市的位置和数据
          */
        //加载一个背景透明的圆形贴图，矩形精灵显示为圆形效果
        var textureLoader=new THREE.TextureLoader();
        var texture=new textureLoader.load("../picture/sprite2.png");
        //创建组对象，包含所有精灵对象
        var group=new THREE.Group();
        //文件加载对象
        var fileLoader=new THREE.FileLoader();
        var loader=fileLoader.setResponseType('json');
        //加载PM2.5数据
        loader.load("../json/数据.json",function (data) {
            //遍历数据
            data.forEach(elem=>{
                //精灵材质
                var spriteMaterial=new THREE.SpriteMaterial({
                    map:texture,//设置精灵纹理贴图
                    transparent:true,
                    opacity:0.95,
                });
                //创建精灵模型对象
                var sprite=new THREE.Sprite(spriteMaterial);
                group.add(sprite);
                //控制精灵大小 使用PM2.5大小设置精灵模型的大小
                // 注意适当缩放pm2.5大小,以便得到更好的显示效果
                var k = elem.value / 200
                sprite.scale.set(k, k, 1);
                //获得城市坐标设置精灵模型对象的位置
                sprite.position.set(elem.coordinate[0], elem.coordinate[1], 0)
            });
            // 中国城市坐标整体的几何中心不在坐标原点，需要适当的平移
            group.position.set(-110, -30, 0);
            scene.add(group);//把精灵群组插入场景中
        });
        /**
         * 光源设置
         */
            //点光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300); //点光源位置
        scene.add(point); //点光源添加到场景中
        var point1 =new THREE.PointLight(0xffffff);
        point1.position.set(-400,-200,-300);
        scene.add(point1);
        //环境光
        var ambient = new THREE.AmbientLight(0x888888);
        scene.add(ambient);
        /**
         * 相机设置
         */
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 30; //三维场景显示范围控制系数，系数越大，显示的范围越大
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(200, 300, 200); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0x000000, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

        // 渲染函数
        function render() {
            renderer.render(scene, camera); //执行渲染操作
            requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
        }
        render();
        //创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
        var controls = new THREE.OrbitControls(camera,renderer.domElement);
    </script>
    <div class="" style="position:absolute;top:0px;left:0px;background: rgba(255, 255, 255, 0.5);padding:10px 20px;"><a href="http://www.yanhuangxueyuan.com/Three.js/" target="_blank" style="color:#fff;text-decoration: none;">案例对应电子书地址</a></div>



</body>
</html>

数据.json

[{
  "name": "海门",
  "value": 9,
  "coordinate": [121.15, 31.89]
}, {
  "name": "鄂尔多斯",
  "value": 12,
  "coordinate": [109.781327, 39.608266]
}, {
  "name": "招远",
  "value": 12,
  "coordinate": [120.38, 37.35]
}, {
  "name": "舟山",
  "value": 12,
  "coordinate": [122.207216, 29.985295]
}, {
  "name": "齐齐哈尔",
  "value": 14,
  "coordinate": [123.97, 47.33]
}, {
  "name": "盐城",
  "value": 15,
  "coordinate": [120.13, 33.38]
}, {
  "name": "赤峰",
  "value": 16,
  "coordinate": [118.87, 42.28]
}, {
  "name": "青岛",
  "value": 18,
  "coordinate": [120.33, 36.07]
}, {
  "name": "乳山",
  "value": 18,
  "coordinate": [121.52, 36.89]
}, {
  "name": "金昌",
  "value": 19,
  "coordinate": [102.188043, 38.520089]
}, {
  "name": "泉州",
  "value": 21,
  "coordinate": [118.58, 24.93]
}, {
  "name": "莱西",
  "value": 21,
  "coordinate": [120.53, 36.86]
}, {
  "name": "日照",
  "value": 21,
  "coordinate": [119.46, 35.42]
}, {
  "name": "胶南",
  "value": 22,
  "coordinate": [119.97, 35.88]
}, {
  "name": "南通",
  "value": 23,
  "coordinate": [121.05, 32.08]
}, {
  "name": "拉萨",
  "value": 24,
  "coordinate": [91.11, 29.97]
}, {
  "name": "云浮",
  "value": 24,
  "coordinate": [112.02, 22.93]
}, {
  "name": "梅州",
  "value": 25,
  "coordinate": [116.1, 24.55]
}, {
  "name": "文登",
  "value": 25,
  "coordinate": [122.05, 37.2]
}, {
  "name": "上海",
  "value": 25,
  "coordinate": [121.48, 31.22]
}, {
  "name": "攀枝花",
  "value": 25,
  "coordinate": [101.718637, 26.582347]
}, {
  "name": "威海",
  "value": 25,
  "coordinate": [122.1, 37.5]
}, {
  "name": "承德",
  "value": 25,
  "coordinate": [117.93, 40.97]
}, {
  "name": "厦门",
  "value": 26,
  "coordinate": [118.1, 24.46]
}, {
  "name": "汕尾",
  "value": 26,
  "coordinate": [115.375279, 22.786211]
}, {
  "name": "潮州",
  "value": 26,
  "coordinate": [116.63, 23.68]
}, {
  "name": "丹东",
  "value": 27,
  "coordinate": [124.37, 40.13]
}, {
  "name": "太仓",
  "value": 27,
  "coordinate": [121.1, 31.45]
}, {
  "name": "曲靖",
  "value": 27,
  "coordinate": [103.79, 25.51]
}, {
  "name": "烟台",
  "value": 28,
  "coordinate": [121.39, 37.52]
}, {
  "name": "福州",
  "value": 29,
  "coordinate": [119.3, 26.08]
}, {
  "name": "瓦房店",
  "value": 30,
  "coordinate": [121.979603, 39.627114]
}, {
  "name": "即墨",
  "value": 30,
  "coordinate": [120.45, 36.38]
}, {
  "name": "抚顺",
  "value": 31,
  "coordinate": [123.97, 41.97]
}, {
  "name": "玉溪",
  "value": 31,
  "coordinate": [102.52, 24.35]
}, {
  "name": "张家口",
  "value": 31,
  "coordinate": [114.87, 40.82]
}, {
  "name": "阳泉",
  "value": 31,
  "coordinate": [113.57, 37.85]
}, {
  "name": "莱州",
  "value": 32,
  "coordinate": [119.942327, 37.177017]
}, {
  "name": "湖州",
  "value": 32,
  "coordinate": [120.1, 30.86]
}, {
  "name": "汕头",
  "value": 32,
  "coordinate": [116.69, 23.39]
}, {
  "name": "昆山",
  "value": 33,
  "coordinate": [120.95, 31.39]
}, {
  "name": "宁波",
  "value": 33,
  "coordinate": [121.56, 29.86]
}, {
  "name": "湛江",
  "value": 33,
  "coordinate": [110.359377, 21.270708]
}, {
  "name": "揭阳",
  "value": 34,
  "coordinate": [116.35, 23.55]
}, {
  "name": "荣成",
  "value": 34,
  "coordinate": [122.41, 37.16]
}, {
  "name": "连云港",
  "value": 35,
  "coordinate": [119.16, 34.59]
}, {
  "name": "葫芦岛",
  "value": 35,
  "coordinate": [120.836932, 40.711052]
}, {
  "name": "常熟",
  "value": 36,
  "coordinate": [120.74, 31.64]
}, {
  "name": "东莞",
  "value": 36,
  "coordinate": [113.75, 23.04]
}, {
  "name": "河源",
  "value": 36,
  "coordinate": [114.68, 23.73]
}, {
  "name": "淮安",
  "value": 36,
  "coordinate": [119.15, 33.5]
}, {
  "name": "泰州",
  "value": 36,
  "coordinate": [119.9, 32.49]
}, {
  "name": "南宁",
  "value": 37,
  "coordinate": [108.33, 22.84]
}, {
  "name": "营口",
  "value": 37,
  "coordinate": [122.18, 40.65]
}, {
  "name": "惠州",
  "value": 37,
  "coordinate": [114.4, 23.09]
}, {
  "name": "江阴",
  "value": 37,
  "coordinate": [120.26, 31.91]
}, {
  "name": "蓬莱",
  "value": 37,
  "coordinate": [120.75, 37.8]
}, {
  "name": "韶关",
  "value": 38,
  "coordinate": [113.62, 24.84]
}, {
  "name": "嘉峪关",
  "value": 38,
  "coordinate": [98.289152, 39.77313]
}, {
  "name": "广州",
  "value": 38,
  "coordinate": [113.23, 23.16]
}, {
  "name": "延安",
  "value": 38,
  "coordinate": [109.47, 36.6]
}, {
  "name": "太原",
  "value": 39,
  "coordinate": [112.53, 37.87]
}, {
  "name": "清远",
  "value": 39,
  "coordinate": [113.01, 23.7]
}, {
  "name": "中山",
  "value": 39,
  "coordinate": [113.38, 22.52]
}, {
  "name": "昆明",
  "value": 39,
  "coordinate": [102.73, 25.04]
}, {
  "name": "寿光",
  "value": 40,
  "coordinate": [118.73, 36.86]
}, {
  "name": "盘锦",
  "value": 40,
  "coordinate": [122.070714, 41.119997]
}, {
  "name": "长治",
  "value": 41,
  "coordinate": [113.08, 36.18]
}, {
  "name": "深圳",
  "value": 41,
  "coordinate": [114.07, 22.62]
}, {
  "name": "珠海",
  "value": 42,
  "coordinate": [113.52, 22.3]
}, {
  "name": "宿迁",
  "value": 43,
  "coordinate": [118.3, 33.96]
}, {
  "name": "咸阳",
  "value": 43,
  "coordinate": [108.72, 34.36]
}, {
  "name": "铜川",
  "value": 44,
  "coordinate": [109.11, 35.09]
}, {
  "name": "平度",
  "value": 44,
  "coordinate": [119.97, 36.77]
}, {
  "name": "佛山",
  "value": 44,
  "coordinate": [113.11, 23.05]
}, {
  "name": "海口",
  "value": 44,
  "coordinate": [110.35, 20.02]
}, {
  "name": "江门",
  "value": 45,
  "coordinate": [113.06, 22.61]
}, {
  "name": "章丘",
  "value": 45,
  "coordinate": [117.53, 36.72]
}, {
  "name": "肇庆",
  "value": 46,
  "coordinate": [112.44, 23.05]
}, {
  "name": "大连",
  "value": 47,
  "coordinate": [121.62, 38.92]
}, {
  "name": "临汾",
  "value": 47,
  "coordinate": [111.5, 36.08]
}, {
  "name": "吴江",
  "value": 47,
  "coordinate": [120.63, 31.16]
}, {
  "name": "石嘴山",
  "value": 49,
  "coordinate": [106.39, 39.04]
}, {
  "name": "沈阳",
  "value": 50,
  "coordinate": [123.38, 41.8]
}, {
  "name": "苏州",
  "value": 50,
  "coordinate": [120.62, 31.32]
}, {
  "name": "茂名",
  "value": 50,
  "coordinate": [110.88, 21.68]
}, {
  "name": "嘉兴",
  "value": 51,
  "coordinate": [120.76, 30.77]
}, {
  "name": "长春",
  "value": 51,
  "coordinate": [125.35, 43.88]
}, {
  "name": "胶州",
  "value": 52,
  "coordinate": [120.03336, 36.264622]
}, {
  "name": "银川",
  "value": 52,
  "coordinate": [106.27, 38.47]
}, {
  "name": "张家港",
  "value": 52,
  "coordinate": [120.555821, 31.875428]
}, {
  "name": "三门峡",
  "value": 53,
  "coordinate": [111.19, 34.76]
}, {
  "name": "锦州",
  "value": 54,
  "coordinate": [121.15, 41.13]
}, {
  "name": "南昌",
  "value": 54,
  "coordinate": [115.89, 28.68]
}, {
  "name": "柳州",
  "value": 54,
  "coordinate": [109.4, 24.33]
}, {
  "name": "三亚",
  "value": 54,
  "coordinate": [109.511909, 18.252847]
}, {
  "name": "自贡",
  "value": 56,
  "coordinate": [104.778442, 29.33903]
}, {
  "name": "吉林",
  "value": 56,
  "coordinate": [126.57, 43.87]
}, {
  "name": "阳江",
  "value": 57,
  "coordinate": [111.95, 21.85]
}, {
  "name": "泸州",
  "value": 57,
  "coordinate": [105.39, 28.91]
}, {
  "name": "西宁",
  "value": 57,
  "coordinate": [101.74, 36.56]
}, {
  "name": "宜宾",
  "value": 58,
  "coordinate": [104.56, 29.77]
}, {
  "name": "呼和浩特",
  "value": 58,
  "coordinate": [111.65, 40.82]
}, {
  "name": "成都",
  "value": 58,
  "coordinate": [104.06, 30.67]
}, {
  "name": "大同",
  "value": 58,
  "coordinate": [113.3, 40.12]
}, {
  "name": "镇江",
  "value": 59,
  "coordinate": [119.44, 32.2]
}, {
  "name": "桂林",
  "value": 59,
  "coordinate": [110.28, 25.29]
}, {
  "name": "张家界",
  "value": 59,
  "coordinate": [110.479191, 29.117096]
}, {
  "name": "宜兴",
  "value": 59,
  "coordinate": [119.82, 31.36]
}, {
  "name": "北海",
  "value": 60,
  "coordinate": [109.12, 21.49]
}, {
  "name": "西安",
  "value": 61,
  "coordinate": [108.95, 34.27]
}, {
  "name": "金坛",
  "value": 62,
  "coordinate": [119.56, 31.74]
}, {
  "name": "东营",
  "value": 62,
  "coordinate": [118.49, 37.46]
}, {
  "name": "牡丹江",
  "value": 63,
  "coordinate": [129.58, 44.6]
}, {
  "name": "遵义",
  "value": 63,
  "coordinate": [106.9, 27.7]
}, {
  "name": "绍兴",
  "value": 63,
  "coordinate": [120.58, 30.01]
}, {
  "name": "扬州",
  "value": 64,
  "coordinate": [119.42, 32.39]
}, {
  "name": "常州",
  "value": 64,
  "coordinate": [119.95, 31.79]
}, {
  "name": "潍坊",
  "value": 65,
  "coordinate": [119.1, 36.62]
}, {
  "name": "重庆",
  "value": 66,
  "coordinate": [106.54, 29.59]
}, {
  "name": "台州",
  "value": 67,
  "coordinate": [121.420757, 28.656386]
}, {
  "name": "南京",
  "value": 67,
  "coordinate": [118.78, 32.04]
}, {
  "name": "滨州",
  "value": 70,
  "coordinate": [118.03, 37.36]
}, {
  "name": "贵阳",
  "value": 71,
  "coordinate": [106.71, 26.57]
}, {
  "name": "无锡",
  "value": 71,
  "coordinate": [120.29, 31.59]
}, {
  "name": "本溪",
  "value": 71,
  "coordinate": [123.73, 41.3]
}, {
  "name": "克拉玛依",
  "value": 72,
  "coordinate": [84.77, 45.59]
}, {
  "name": "渭南",
  "value": 72,
  "coordinate": [109.5, 34.52]
}, {
  "name": "马鞍山",
  "value": 72,
  "coordinate": [118.48, 31.56]
}, {
  "name": "宝鸡",
  "value": 72,
  "coordinate": [107.15, 34.38]
}, {
  "name": "焦作",
  "value": 75,
  "coordinate": [113.21, 35.24]
}, {
  "name": "句容",
  "value": 75,
  "coordinate": [119.16, 31.95]
}, {
  "name": "北京",
  "value": 79,
  "coordinate": [116.46, 39.92]
}, {
  "name": "徐州",
  "value": 79,
  "coordinate": [117.2, 34.26]
}, {
  "name": "衡水",
  "value": 80,
  "coordinate": [115.72, 37.72]
}, {
  "name": "包头",
  "value": 80,
  "coordinate": [110, 40.58]
}, {
  "name": "绵阳",
  "value": 80,
  "coordinate": [104.73, 31.48]
}, {
  "name": "乌鲁木齐",
  "value": 84,
  "coordinate": [87.68, 43.77]
}, {
  "name": "枣庄",
  "value": 84,
  "coordinate": [117.57, 34.86]
}, {
  "name": "杭州",
  "value": 84,
  "coordinate": [120.19, 30.26]
}, {
  "name": "淄博",
  "value": 85,
  "coordinate": [118.05, 36.78]
}, {
  "name": "鞍山",
  "value": 86,
  "coordinate": [122.85, 41.12]
}, {
  "name": "溧阳",
  "value": 86,
  "coordinate": [119.48, 31.43]
}, {
  "name": "库尔勒",
  "value": 86,
  "coordinate": [86.06, 41.68]
}, {
  "name": "安阳",
  "value": 90,
  "coordinate": [114.35, 36.1]
}, {
  "name": "开封",
  "value": 90,
  "coordinate": [114.35, 34.79]
}, {
  "name": "济南",
  "value": 92,
  "coordinate": [117, 36.65]
}, {
  "name": "德阳",
  "value": 93,
  "coordinate": [104.37, 31.13]
}, {
  "name": "温州",
  "value": 95,
  "coordinate": [120.65, 28.01]
}, {
  "name": "九江",
  "value": 96,
  "coordinate": [115.97, 29.71]
}, {
  "name": "邯郸",
  "value": 98,
  "coordinate": [114.47, 36.6]
}, {
  "name": "临安",
  "value": 99,
  "coordinate": [119.72, 30.23]
}, {
  "name": "兰州",
  "value": 99,
  "coordinate": [103.73, 36.03]
}, {
  "name": "沧州",
  "value": 100,
  "coordinate": [116.83, 38.33]
}, {
  "name": "临沂",
  "value": 103,
  "coordinate": [118.35, 35.05]
}, {
  "name": "南充",
  "value": 104,
  "coordinate": [106.110698, 30.837793]
}, {
  "name": "天津",
  "value": 105,
  "coordinate": [117.2, 39.13]
}, {
  "name": "富阳",
  "value": 106,
  "coordinate": [119.95, 30.07]
}, {
  "name": "泰安",
  "value": 112,
  "coordinate": [117.13, 36.18]
}, {
  "name": "诸暨",
  "value": 112,
  "coordinate": [120.23, 29.71]
}, {
  "name": "郑州",
  "value": 113,
  "coordinate": [113.65, 34.76]
}, {
  "name": "哈尔滨",
  "value": 114,
  "coordinate": [126.63, 45.75]
}, {
  "name": "聊城",
  "value": 116,
  "coordinate": [115.97, 36.45]
}, {
  "name": "芜湖",
  "value": 117,
  "coordinate": [118.38, 31.33]
}, {
  "name": "唐山",
  "value": 119,
  "coordinate": [118.02, 39.63]
}, {
  "name": "平顶山",
  "value": 119,
  "coordinate": [113.29, 33.75]
}, {
  "name": "邢台",
  "value": 119,
  "coordinate": [114.48, 37.05]
}, {
  "name": "德州",
  "value": 120,
  "coordinate": [116.29, 37.45]
}, {
  "name": "济宁",
  "value": 120,
  "coordinate": [116.59, 35.38]
}, {
  "name": "荆州",
  "value": 127,
  "coordinate": [112.239741, 30.335165]
}, {
  "name": "宜昌",
  "value": 130,
  "coordinate": [111.3, 30.7]
}, {
  "name": "义乌",
  "value": 132,
  "coordinate": [120.06, 29.32]
}, {
  "name": "丽水",
  "value": 133,
  "coordinate": [119.92, 28.45]
}, {
  "name": "洛阳",
  "value": 134,
  "coordinate": [112.44, 34.7]
}, {
  "name": "秦皇岛",
  "value": 136,
  "coordinate": [119.57, 39.95]
}, {
  "name": "株洲",
  "value": 143,
  "coordinate": [113.16, 27.83]
}, {
  "name": "石家庄",
  "value": 147,
  "coordinate": [114.48, 38.03]
}, {
  "name": "莱芜",
  "value": 148,
  "coordinate": [117.67, 36.19]
}, {
  "name": "常德",
  "value": 152,
  "coordinate": [111.69, 29.05]
}, {
  "name": "保定",
  "value": 153,
  "coordinate": [115.48, 38.85]
}, {
  "name": "湘潭",
  "value": 154,
  "coordinate": [112.91, 27.87]
}, {
  "name": "金华",
  "value": 157,
  "coordinate": [119.64, 29.12]
}, {
  "name": "岳阳",
  "value": 169,
  "coordinate": [113.09, 29.37]
}, {
  "name": "长沙",
  "value": 175,
  "coordinate": [113, 28.21]
}, {
  "name": "衢州",
  "value": 177,
  "coordinate": [118.88, 28.97]
}, {
  "name": "廊坊",
  "value": 193,
  "coordinate": [116.7, 39.53]
}, {
  "name": "菏泽",
  "value": 194,
  "coordinate": [115.480656, 35.23375]
}, {
  "name": "合肥",
  "value": 229,
  "coordinate": [117.27, 31.86]
}, {
  "name": "武汉",
  "value": 273,
  "coordinate": [114.31, 30.52]
}, {
  "name": "大庆",
  "value": 279,
  "coordinate": [125.03, 46.58]
}]

sprite2.png
在这里插入图片描述

好锅煮好饭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
20个基于Three.js的代码示例
weixin_43298747的博客
04-27 250
这些是一些简单的示例，涵盖了Three.js的基本功能和一些高级功能。- 使用WebRTC或WebSocket等技术建立网络连接。- 使用Cannon.js或其他物理引擎创建物理模拟。- 创建一个简单的三维场景，包括相机、场景和渲染器。- 使用Tween.js或GSAP等库创建动画效果。- 添加后期处理效果，如模糊、色调映射等。- 在模型上应用骨骼动画或关键帧动画。- 使用立方体贴图创建环境映射。- 创建基于文本的3D几何体。- 创建一个简单的粒子系统。- 创建一个简单的立方体。- 在模型上添加贴花效果。
Three.js利用orbit controls插件（轨道控制）控制模型交互动作详解
12-12
前言 本文主要给大家介绍了关于Three.js利用orbit controls插件（轨道控制）控制模型交互动作的相关内容，这个效果相对于第八节的轨迹球插件使用上感觉要好，虽然轨迹球插件可以来回的滚动，但是容易分辨不清楚上下左右的关系，容易混乱，适合调试，而轨道控制插件orbit则适合客户使用，还不会产生混乱效果。下面讲一下使用。 （1）首先引入插件，文件地址在官方案例的examples/js/controls/OrbitControls.js。 （2）然后实例化函数，把相机和渲染器的dom传入，并设置相关设置。 //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放 var co
threejs顶点——3、顶点法向量光照计算
u012758488的博客
02-22 770
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>顶点法向量光照计算</title> <style> body { margin: 0; overflow: hidden; /* 隐藏body窗口区域滚动条 */ } </style> <!--.
three.js使用OrbitControls
Liszter
08-03 367
引入方式 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
three.js轨道控制器OrbitControls.js
热门推荐
Bruce_wjh的博客
11-19 4万+
学习交流欢迎加群：789723098，博主会将一些demo整理共享 轨道控制器OrbitControls.js是一个相当神奇的控件，用它可以实现场景用鼠标交互，让场景动起来，控制场景的旋转、平移，缩放，下面介绍轨道控制器的代码实现方式： //添加轨道控制器 //新建一个轨道控制器 orbitControls = new THREE.OrbitControls(camera, rende...
three.js 相机控件OrbitControls
u014291990的博客
12-13 694
threejs qq交流群：814702116平时开发调试代码，或者展示模型的时候，可以通过相机控件OrbitControls实现旋转缩放预览效果。
Three.js-webgl物联网粮仓3D可视化
最新发布
03-12
项目案例使用threejs+vue+js实现粮仓三维可视化管理，加载粮仓3d场景，实现粮仓信息查询，标注，粮仓剖切，天气模拟功能，免安装即可运行，代码结构清晰，根据需求下载
基于threejs的2.5D地图项目.zip
05-30
基于threejs的2.5D地图项目.zip
orbitControls.js
05-25
threeJs中orbitControls，轨道控制，轨道控制允许摄像机围绕目标旋转。var controls = new OrbitControls( camera, renderer.domElement );
Three.js相机控件OrbitControls
u014291990的博客
10-30 2855
Three.js相机控件OrbitControls 通过Three.js的相机控件OrbitControls.js可以对Threejs的三维场景进行缩放、平移、旋转操作，本质上改变的并不是场景，而是相机的参数，通过前面的学习应该知道，相机的位置角度不同，同一个场景的渲染效果是不一样，比如一个相机绕着一个场景旋转，就像场景旋转一样。 如果你想深入了解相机控制器OrbitControls的每一个功能，...
THREE.js控制器OrbitControls控制物体旋转
qq_40245044的博客
03-23 4229
因为OrbitControls控制器控制的是相机移动，移动后旋转的也是相机，观察物体时移动后旋转会跑到其他位置，做了一点小修改使之变为物体自身旋转。 THREE.OrbitControls = function (object, domElement) { this.object = object; var model = null; this.model = model...
three.js入门 ---- 相机控件OrbitControls
一只想躺平却不敢躺平的小菜鸟
10-12 1109
three.js入门 —— 相机控件、动画渲染循环
Three.js教程：相机控件轨道控制器OrbitControls
ygtu2018的博客
06-15 2405
相机控件轨道控制器OrbitControls
【Three.js】轨道控制器（OrbitControls）的使用
叶子yes的博客
01-26 2884
轨道控制器可以使得相机围绕目标进行轨道运动。轨道控制器功能不可以通过three模块来直接访问，需要从 example/jsm 子目录下导入。
three.js（二）尝试OrbitControls
Wendelle的博客
04-23 4054
OrbitControls是用于threejs的轨道控制插件，试了下在threejs里建立坐标系，使用Phong光照模型材质，开启雾化效果。做了个简单的demo.代码如下。&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简
three.js物联网3d可视化—粮仓案例源码
06-26
粮仓案例源码是基于three.js物联网3d可视化技术开发的，利用现代化的WebGL技术，实现了粮仓3d可视化界面的设计和搭建。该源码采用基于前端技术的开发方式，充分发挥Web端数据和可视化交互性的优势。 该源码提供了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值