个人中心
gpt4 book ai didi

javascript - 如何使用 two.js 创建圆形热点？

转载 作者：行者123 更新时间：2023-11-28 09:02:27 26 4
gpt4 key购买 nike

我正在尝试制作一个太阳系模型。到目前为止，我使用 two.js 完成了这一切。我想做到这一点，当鼠标悬停在行星轨道上时，它会突出显示该行星的轨道，并成为该行星信息的链接。不过，我找不到执行此操作的方法。

如果你没有，这里是Two.js .

我的文件结构是这样的:

css
   main.css
js
   main.js
   two.js
index.html

附言。这不会使用“运行代码片段”功能呈现。如果你想看到它，你必须保存这段代码并将它放在与我相同的文件结构中。

//This work was created by the minds of Sam Steele and Devin Fowler of Cryptocosm Developers.
//Cryptocosm ©2014
//cryptocosm.x10.bz

//Initiate the render context
var elem = document.getElementById('canvas');
var two = new Two({
    fullscreen: true
}).appendTo(elem);

//Define our planets and their colors
var sun = two.makeCircle(0, 0, 70);
var mercury = two.makeCircle(95, 0, 7);
var venus = two.makeCircle(125, 0, 8.5);
var earth = two.makeCircle(160, 0, 11.4);
var mars = two.makeCircle(200, 0, 9.5);
var jupiter = two.makeCircle(260, 0, 28);
//      For Saturn we're going to do something special in order to get the rings
var saturnBody = two.makeCircle(320, 0, 24);
var saturnRings = two.makeCurve(296, 0, 290, 10, 322, 10, 350, -8, 342, -10, true);
saturnRings.rotation = 4.5;
var saturn = two.makeGroup(saturnBody, saturnRings);
var uranus = two.makeCircle(460, 0, 18);
var neptune = two.makeCircle(540, 0, 16);
var asteroid = two.makeCircle(0, 320, 3);

//Try to make some stars
var width = window.innerWidth;
var height = window.innerHeight;
var star;
for (i = 0; i < 200; i++) {
    var randX = Math.round(Math.random() * width);
    var randY = Math.round(Math.random() * height);
    star = two.makeCircle(randX, randY, 2);
}

//Set the color of the planets
sun.fill = '#F7CA18';
mercury.fill = '#9E9E9E';
venus.fill = '#795548';
earth.fill = '#2196F3';
mars.fill = '#FF7043';
jupiter.fill = '#E67E22';
saturnBody.fill = '#A1887F';
saturnRings.stroke = "#F5F5F5";
saturnRings.linewidth = 7;
saturnRings.noFill();
saturn.translation.set(20, 0);
uranus.fill = '#4DB6AC';
neptune.fill = '#3F51B5';
star.fill = '#FAFAFA';
asteroid.fill = '#FAFAFA';

//Group the planets
var Mercury = two.makeGroup(mercury);
var Venus = two.makeGroup(venus);
var Earth = two.makeGroup(earth);
var Mars = two.makeGroup(mars);
var Jupiter = two.makeGroup(jupiter);
var Saturn = two.makeGroup(saturn);
var Uranus = two.makeGroup(uranus);
var Neptune = two.makeGroup(neptune);
var planets = two.makeGroup(sun, Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune);

//Center everything in the center of the element
planets.translation.set(two.width / 2, two.height / 2);
Mercury.rotation = 4;
Venus.rotation = 2.5;
Earth.rotation = 5.5;
Mars.rotation = 1;
Jupiter.rotation = 4.2;
Saturn.rotation = 2.5;
Uranus.rotation = 5.75;
Neptune.rotation = .5;

var counter = document.getElementById('counter');
var count = 0;
var yearsPassed = 0;


// Bind a function to scale and rotate the group to the animation loop.
two.bind('update', function (frameCount) {
    //Set the "ZOOM" of the system
    planets.scale = .8;

    //Rotate all the planets
    Mercury.rotation += .01607;
    Venus.rotation += .01174;
    Earth.rotation += .01;
    /* //Earth year counter (not currently accurate at all)
	count++;
    if (count % 550 == 0) {
        yearsPassed++;
        counter.innerHTML = "An estimated " + yearsPassed + " Earth years passed";
    }; */
    Mars.rotation += .00802;
    Jupiter.rotation += .00434;
    Saturn.rotation += .00323;
    Uranus.rotation += .00228;
    Neptune.rotation += .00182;

    //Rotate Saturn's rings so that it doesn't look dumb
    saturnRings.rotation -= .00323;
}).play(); // Finally, start the animation loop
@font-face {
    font-family: Roboto-Thin;
    font-style: normal;
    src: url(Roboto/Roboto-Thin.ttf);
}
html {
    background-color: #212121;
}
body {
    color: white;
    font-family: Roboto-Thin;
}
#counter {
    background-color: rgba(0, 0, 0, .4);
    width: auto;
    height: auto;
    font-size: 34px;
    float: left;
    position: fixed;
    padding: 10px;
}
#canvas {}
<html>

<head>
    <title>The Solar System</title>
    <link href="css/main.css" type="text/css" rel="stylesheet">
    <script src="js/two.js"></script>
</head>

<body>
    <div id="counter"></div>
    <div id="canvas">
    </div>
    <script src="js/main.js"></script>
</body>

</html>

最佳答案

这是实现该效果的一种方法:

这仅适用于 svg 渲染器，但您可以在 mouseover 和 mouseout 以及 touchmove 上添加事件监听器 像这样的事件:

// ... After you've created all the planets ...

// This command will create all the dom elements
// which you can bind events to.
two.update();

var highlight = function() { sun.fill = 'red'; };
var ignore = function() { sun.fill = 'yellow'; };

sun._renderer.elem.addEventListener('mousemove', highlight, false);
sun._renderer.elem.addEventListener('mouseout', ignore, false);

还有一个如何实现这个的例子here .

关于javascript - 如何使用 two.js 创建圆形热点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26850747/

26 4 0
文章推荐： javascript - 如何将输入框的内容转移到段落元素，如博客
文章推荐： css - 使用css设置原始图片宽度和高度的50%
文章推荐： jquery - 如何修复由 jQuery FlexSlider 引起的水平滚动条？
文章推荐： FireFox 中的 JQuery Draggable 仅适用于 iFrame - 如何设置 ViewPort
行者123
个人简介

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

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