Simulate graph states in the browser
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

38 lines
1.2KB

  1. var materials = {};
  2. // Is called on boot
  3. materials.prepare = function() {
  4. var ballSprite = new THREE.Texture(document.getElementById("ball"));
  5. ballSprite.needsUpdate = true;
  6. materials.edge = new THREE.LineBasicMaterial({
  7. color: "black",
  8. transparent: false,
  9. linewidth: 1
  10. });
  11. materials.edge.depthTest = false;
  12. materials.qubit = new THREE.PointsMaterial({
  13. size: 0.4,
  14. map: ballSprite,
  15. alphaTest: 0.5,
  16. transparent: true,
  17. vertexColors: THREE.VertexColors
  18. });
  19. materials.curveProperties = {
  20. splineDensity: 10,
  21. curvature: 20
  22. };
  23. };
  24. materials.makeCurve = function(a, b) {
  25. var length = new THREE.Vector3().subVectors(a, b).length();
  26. var bend = new THREE.Vector3(length / materials.curveProperties.curvature, length / materials.curveProperties.curvature, 0);
  27. var mid = new THREE.Vector3().add(a).add(b).multiplyScalar(0.5).add(bend);
  28. var spline = new THREE.CatmullRomCurve3([a, mid, b]);
  29. var geometry = new THREE.Geometry();
  30. var splinePoints = spline.getPoints(materials.curveProperties.splineDensity);
  31. Array.prototype.push.apply(geometry.vertices, splinePoints);
  32. return new THREE.Line(geometry, materials.edge);
  33. };