vis.js动画移动点3d图形

代码案例

 <!DOCTYPE html>
<html>
  <head>
    <title>Graph 3D demo</title>
    <style>
        body {
          font: 10pt arial;
        }
    </style>
    <script
      type="text/javascript"
      src="https://unpkg.com/vis-graph3d@latest/dist/vis-graph3d.min.js"
    ></script>
    <script type="text/javascript">
        var data = null;
        var graph = null;
 
        // Called when the Visualization API is loaded.
        function drawVisualization() {
          // create the data table.
          data = new vis.DataSet();
 
          // create some shortcuts to math functions
          var sin = Math.sin;
          var cos = Math.cos;
          var pi = Math.PI;
 
          // create the animation data
          var tmax = 2.0 * pi;
          var tstep = tmax / 75;
          var dotCount = 1; // set this to 1, 2, 3, 4, ...
          for (var t = 0; t < tmax; t += tstep) {
            var tgroup = parseFloat(t.toFixed(2));
            var value = t;
 
            // a dot in the center
            data.add({ x: 0, y: 0, z: 0, filter: tgroup, style: value });
 
            // one or multiple dots moving around the center
            for (var dot = 0; dot < dotCount; dot++) {
              var tdot = t + (2 * pi * dot) / dotCount;
              data.add({
                x: sin(tdot),
                y: cos(tdot),
                z: sin(tdot),
                filter: tgroup,
                style: value,
              });
              data.add({
                x: sin(tdot),
                y: -cos(tdot),
                z: sin(tdot + (tmax * 1) / 2),
                filter: tgroup,
                style: value,
              });
            }
          }
 
          // specify options
          var options = {
            width: "600px",
            height: "600px",
            style: "dot-color",
            showPerspective: true,
            showGrid: true,
            keepAspectRatio: true,
            verticalRatio: 1.0,
            animationInterval: 35, // milliseconds
            animationPreload: false,
            animationAutoStart: true,
            legendLabel: "color value",
            cameraPosition: {
              horizontal: 2.7,
              vertical: 0.0,
              distance: 1.65,
            },
          };
 
          // create our graph
          var container = document.getElementById("mygraph");
          graph = new vis.Graph3d(container, data, options);
        }
 
        window.addEventListener("load", () => {
          drawVisualization();
        });
 
    </script>
  </head>
  <body onload="drawVisualization();">    
    <div id="mygraph"></div>
 
    <div id="info"></div>    
      
  </body>
</html>

效果图

点击查看详情

posted @ 2024-04-24 14:13 DogLeftover 阅读(37) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vis.js彩色点3d图形

· vis.js动态3d图形

· d3js使用说明

· threejs Vector3 类定义位置

· Three.js进阶之旅：基础介绍（二）

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术

历史上的今天：
2022-04-24 Mybatis入门（二）：@Param源码
2022-04-24 Mybatis入门（一）：入门案例

vis.js动画移动点3d图形

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<title>Graph 3D demo</title>
	<style>
	body {
	font: 10pt arial;
	}
	</style>
	<script
	type="text/javascript"
	src="https://unpkg.com/vis-graph3d@latest/dist/vis-graph3d.min.js"
	></script>
	<script type="text/javascript">
	var data = null;
	var graph = null;

	// Called when the Visualization API is loaded.
	function drawVisualization() {
	// create the data table.
	data = new vis.DataSet();

	// create some shortcuts to math functions
	var sin = Math.sin;
	var cos = Math.cos;
	var pi = Math.PI;

	// create the animation data
	var tmax = 2.0 * pi;
	var tstep = tmax / 75;
	var dotCount = 1; // set this to 1, 2, 3, 4, ...
	for (var t = 0; t < tmax; t += tstep) {
	var tgroup = parseFloat(t.toFixed(2));
	var value = t;

	// a dot in the center
	data.add({ x: 0, y: 0, z: 0, filter: tgroup, style: value });

	// one or multiple dots moving around the center
	for (var dot = 0; dot < dotCount; dot++) {
	var tdot = t + (2 * pi * dot) / dotCount;
	data.add({
	x: sin(tdot),
	y: cos(tdot),
	z: sin(tdot),
	filter: tgroup,
	style: value,
	});
	data.add({
	x: sin(tdot),
	y: -cos(tdot),
	z: sin(tdot + (tmax * 1) / 2),
	filter: tgroup,
	style: value,
	});
	}
	}

	// specify options
	var options = {
	width: "600px",
	height: "600px",
	style: "dot-color",
	showPerspective: true,
	showGrid: true,
	keepAspectRatio: true,
	verticalRatio: 1.0,
	animationInterval: 35, // milliseconds
	animationPreload: false,
	animationAutoStart: true,
	legendLabel: "color value",
	cameraPosition: {
	horizontal: 2.7,
	vertical: 0.0,
	distance: 1.65,
	},
	};

	// create our graph
	var container = document.getElementById("mygraph");
	graph = new vis.Graph3d(container, data, options);
	}

	window.addEventListener("load", () => {
	drawVisualization();
	});

	</script>
	</head>
	<body onload="drawVisualization();">
	<div id="mygraph"></div>

	<div id="info"></div>

	</body>
	</html>