高德地图 JS API示例-Object3D 图形- ›立体 Mesh- › 接受光照的 Mesh

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>支持光照效果的 Mesh</title>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=Map3D"></script>
<script>
    var map = new AMap.Map('container', {
        viewMode: '3D',
        showBuildingBlock: false,
        expandZoomRange: true,
        zooms: [3, 20],
        pitch: 60,
        zoom: 16.5,
        center: [116.230766, 39.932931]
    });

    map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.3);
    map.DirectionLight = new AMap.Lights.DirectionLight([0, -1, 2], [1, 1, 1], 0.7);

    var angle = 90;
    function changeLightDirection() {
        angle += 3;
        var dir = [
            Math.cos(angle / 180 * Math.PI),
            -Math.sin(angle / 180 * Math.PI),
            2
        ];
        map.DirectionLight.setDirection(dir);
        map.render();
        AMap.Util.requestAnimFrame(changeLightDirection);
    }

    changeLightDirection();

    var object3Dlayer = new AMap.Object3DLayer();
    map.add(object3Dlayer);
    var center_3d = map.lngLatToGeodeticCoord(map.getCenter());

    //添加一个圆柱体
    var addRegularPrism = function (center, segment, height, radius, color) {

        var cylinder = new AMap.Object3D.MeshAcceptLights();
        var geometry = cylinder.geometry;
        var verticesLength = segment * 2;
        var path = [];
        for (var i = 0; i < segment; i += 1) {
            var angle = 2 * Math.PI * i / segment;
            var x = center.x + Math.cos(angle) * radius;
            var y = center.y + Math.sin(angle) * radius;
            path.push([x, y]);
            geometry.vertices.push(x, y, 0); // 底部顶点
            geometry.vertices.push(x, y, -height); // 顶部顶点

            geometry.vertexColors.push.apply(geometry.vertexColors, color); // 底部颜色
            geometry.vertexColors.push.apply(geometry.vertexColors, color); // 顶部颜色

            var nX = Math.cos(angle);
            var nY = Math.sin(angle);
            // 为了支持光照，计算侧面顶点法向量
            geometry.vertexNormals.push(nX, nY, 0);
            geometry.vertexNormals.push(nX, nY, 0);

            var bottomIndex = i * 2;
            var topIndex = bottomIndex + 1;
            var nextBottomIndex = (bottomIndex + 2) % verticesLength;
            var nextTopIndex = (bottomIndex + 3) % verticesLength;

            geometry.faces.push(bottomIndex, topIndex, nextTopIndex); // 侧面三角形1
            geometry.faces.push(bottomIndex, nextTopIndex, nextBottomIndex); // 侧面三角形2
        }

        // 构建顶面三角形,一样的颜色,但是法向量不一样，所以需要独立的顶点
        for (var i = 0; i < segment; i += 1) {
            geometry.vertices.push.apply(geometry.vertices, geometry.vertices.slice(i * 6 + 3, i * 6 + 6)); // 底部顶点
            geometry.vertexColors.push.apply(geometry.vertexColors, color);
            // 为了支持光照，计算顶面顶点法向量
            geometry.vertexNormals.push(0, 0, -1);
        }

        var triangles = AMap.GeometryUtil.triangulateShape(path);
        var offset = segment * 2;
        for (var v = 0; v < triangles.length; v += 3) {
            geometry.faces.push(triangles[v] + offset, triangles[v + 2] + offset, triangles[v + 1] + offset)
        }

        cylinder.transparent = true;//如果使用了透明颜色，请设置true
        object3Dlayer.add(cylinder);
    };

    addRegularPrism(center_3d.add(new AMap.Pixel(-1500, 0)), 3, 800, 500, [1, 0, 0, 1]) //三棱柱

    addRegularPrism(center_3d, 5, 1500, 400, [0, 1, 0, 1])//五棱柱

    addRegularPrism(center_3d.add(new AMap.Pixel(1500, 0)), 32, 1600, 500, [0, 0, 1, 1])//圆柱


</script>
</body>
</html>
0 0 投票数
文章评分