Simulate graph states in the browser
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

materials.js 1.2KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. var materials = {};
  2. var curveProperties = {
  3. splineDensity: 10,
  4. curvature: 20
  5. };
  6. // Is called on boot
  7. materials.prepare = function() {
  8. var ballSprite = new THREE.Texture(document.getElementById("ball"));
  9. ballSprite.needsUpdate = true;
  10. materials.edge = new THREE.LineBasicMaterial({
  11. color: "gray",
  12. transparent: false,
  13. linewidth: 3
  14. });
  15. materials.edge.depthTest = false;
  16. materials.qubit = new THREE.PointsMaterial({
  17. size: 0.6,
  18. map: ballSprite,
  19. alphaTest: 0.5,
  20. transparent: true,
  21. vertexColors: THREE.VertexColors
  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 / curveProperties.curvature, length / 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(curveProperties.splineDensity);
  31. Array.prototype.push.apply(geometry.vertices, splinePoints);
  32. return new THREE.Line(geometry, materials.edge);
  33. };