Simulate graph states in the browser
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

materials.js 1.4KB

1234567891011121314151617181920212223242526272829303132333435363738
  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. materials.curveProperties.splineDensity = curvy.checked ? 10 : 1;
  26. console.log("New curve, " + materials.curveProperties.splineDensity);
  27. var length = new THREE.Vector3().subVectors(a, b).length();
  28. var bend = new THREE.Vector3(length / materials.curveProperties.curvature, length / materials.curveProperties.curvature, 0);
  29. var mid = new THREE.Vector3().add(a).add(b).multiplyScalar(0.5).add(bend);
  30. var spline = new THREE.CatmullRomCurve3([a, mid, b]);
  31. var geometry = new THREE.Geometry();
  32. var splinePoints = spline.getPoints(materials.curveProperties.splineDensity);
  33. Array.prototype.push.apply(geometry.vertices, splinePoints);
  34. return new THREE.Line(geometry, materials.edge);
  35. };