我试图使用three.js绘制一个三维网络。three.jss图形网络的节点与值数组相关联。我希望单击时使用plotly.js绘制这些值。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js & Plotly integration</title>
<style>
#three-js-container {
width: 70%;
height: 400px;
float: left;
}
#plotly-container {
width: 30%;
height: 400px;
float: right;
}
</style>
</head>
<body>
<div id="three-js-container"></div>
<div id="plotly-container"></div>
<script src="https://cdn.jsdelivr.net/npm/three@0.117.0/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/plotly.js@1.55.3/dist/plotly.min.js"></script>
<script>
// Three.js code for network graph
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth * 0.7, 400);
document.querySelector("#three-js-container").appendChild(renderer.domElement);
// Values of nodes
var values = [
[10, 15, 20, 25],
[5, 10, 15, 20]
];
// Create node1
var node1 = new THREE.SphereGeometry(5, 32, 32);
var node1Material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var node1Mesh = new THREE.Mesh(node1, node1Material);
node1Mesh.position.set(-10, 0, 0);
scene.add(node1Mesh);
// Create node2
var node2 = new THREE.SphereGeometry(5, 32, 32);
var node2Material = new THREE.MeshBasicMaterial({color: 0xff0000});
var node2Mesh = new THREE.Mesh(node2, node2Material);
node2Mesh.position.set(10, 0, 0);
scene.add(node2Mesh);
// Create edge
var edge = new THREE.Line(
new THREE.BufferGeometry().setFromPoints( [
new THREE.Vector3( node1Mesh.position.x, node1Mesh.position.y, node1Mesh.position.z ),
new THREE.Vector3( node2Mesh.position.x, node2Mesh.position.y, node2Mesh.position.z )
] ),
new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } )
);
scene.add(edge);
camera.position.z = 20;
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
// Event listener to detect click on edge
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
document.querySelector("#three-js-container").addEventListener("click", function(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects([edge]);
if (intersects.length > 0) {
// Show plotly graph on side panel
Plotly.newPlot('side-panel', [{
y: values[0],
type: 'line'
}, {
y: values[1],
type: 'line'
}], {
title: 'Values of Nodes'
});
}
});
</script>
</body>
</html>
但是当单击三个.js节点时，绘制的折线图是不可见的。关于如何解决这一问题的建议将非常有用。