我们如何根据现有图像 Jquery,Css 绘制 3D 建筑结构？

Question

请查看此网站，它是用 Flash 制作的：我们可以通过 jquery css 完成吗？

然后点击任何标有 "Release" 的建筑物您将在悬停动画效果上看到一栋建筑。我想使用 jquery 和 css 进行开发或者你可以建议发展

Answer 1

首先你需要知道这里没有3d。这些是预渲染的图像。您在软件中将这些突出显示的区域绘制为不同的图层，例如 photoshop。

然后你需要创建一个可以检测鼠标悬停的区域。老派 image map html 标记是一种方法。您将绘制一个覆盖与突出显示图像相同区域的多边形。

结果将是这样的：

<map name="image-maps-2015-02-15-031753" id="ImageMapsCom-image-maps-2015-02-15-031753">
    <area alt="" href="#" title="" shape="poly" coords="52,99,101,49,172,21,267,21,317,93,302,127,268,63,194,73,129,89,74,115,49,132" style="outline:none;" target="_self" />
</map>

最后，你需要一点 JS 来做“如果鼠标悬停在该区域，显示高亮图像”。如果您使用 jquery，地图上的 mouseenter 事件很简单；

$('map').on('mouseenter', 函数 () { $('#highlight').show(); })

$('map').on('mouseleave', 函数 () { $('#highlight').隐藏(); })

完整演示：http://jsfiddle.net/pggyq4t8/2/（悬停在顶层）

Answer 2

2020 年 5 月，在我对类似 , I showed the OP in my 的回答中，如何改用 SVG 文件并更好地控制图像叠加并使用仅 CSS 的解决方案（<a> 和 :hover 上显示的一些演示文本）。我还使 HTML 页面完全响应以在不同设备上使用。

仅在此处发布代码片段（转到 'Full page' 以获得更好的外观。调整浏览器大小以测试响应能力）：

/*
    Visit below answers on Whosebug for an explanation
    of the math used for responsive sizing of elements.

    
    
*/
/**************************/
/* preferred global rules */
/**************************/
html,body               { box-sizing: border-box; width: 100%; max-width: 100%; height: 100% }
*::before,*::after, *   { box-sizing: inherit }
body                    { margin: 0 }

/* responsive base font size using y = mx + b */
html    { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */
body    { font-size: 1rem }

[band]  { display: flex; flex-flow: column wrap; align-content: center }

[padded="1"], [padded="0"] [band*="padded"] {
/*
    responsive page padding
    and responsive band padding (same as responsive page padding, but at band level)
    p1(320,32) p2(1920, 72) => 0.025x + 24
    p3(320, 8) p4(1920,320) => 0.195x - 54.4 

    'Band padding' is only active when 'page padding' is off 
*/
    padding: calc( 2.5vh + 24px) calc(19.5vw - 54.4px);
}

/* Making sure the image fits in any viewport, either portrait or landscape */
@media (orientation: portrait ) { #construction-site { height: auto; width: 100% } }
@media (orientation: landscape) { #construction-site { height: 100%; width: auto } }
</style>

<body padded="0">
<div id="construction-site" band="padded">
    <svg viewbox="0 0 1600 1200"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">

        <style>
            .line       { stroke: Black; stroke-opacity: 0; stroke-width: 2px; cursor: pointer } 
            .polyline   { fill  : Red  ; fill-opacity  : 0 }
    
            .floor-text { fill: Black; stroke: none; fill-opacity: 0; cursor: default;
                          font-weight: bold; font-family: sans-serif;
                          /* responsive font using y = mx + b */
                          font-size: calc(-1vmin + 51.2px); /* (320,48)(1920,32) */
                        }

            .floor:hover>.line       { fill-opacity: .4; stroke-opacity: .8 }
            .floor:hover+.floor-text { fill-opacity: .7 }
        </style>

        <image href="https://i.imgur.com/0i4N0d3.jpg"/>

        <a id="top-floor" class="floor" rel="noopener" target="_blank" href="javascript:void(0)" title="top floor, click for details...">
            <polyline class="line polyline" 
                points="201.242,678.473 1121.43, 333.16 1370.24,
                        553.473 1387.74, 668.473 1127.49,
                        474.098 189.242, 753.473 202.242, 678.973"/>

            <line class="line" x1="1121.42" y1="333.472" x2="1127.45" y2="474.097"/>

        </a>
        <text class="floor-text" x="800" y="150" text-anchor="middle">top floor demo text</text>
    </svg>
</div>
</body>

我们如何根据现有图像 Jquery,Css 绘制 3D 建筑结构？

How can we draw 3D bulding structure from existing image Jquery,Css?

css

jquery

webgl

three.js