Question

我正在尝试制作太阳能系统模型。到目前为止，我使用了two.js。我想这样做，当鼠标在行星的轨道上时，它会突出该行星的轨道，并成为有关该行星信息的链接。不过，我很难找到办法。

如果你没有，请Two.js。

我的文件结构如下：

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

PS。这不会使用＆＃34;运行代码段＆＃34;特征。如果您希望看到它，您必须保存此代码并将其放在我拥有的相同文件结构中。

＆＃13;

//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

＆＃13;

@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 {}

＆＃13;

<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>

＆＃13;

Answer 1

这是达到这种效果的一种方法：

这仅适用于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的例子。

如何使用two.js创建循环热点？

1 个答案: