state.ts 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. /**
  2. * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
  3. *
  4. * @author Alexander Rose <alexander.rose@weirdbyte.de>
  5. */
  6. import { BehaviorSubject } from 'rxjs';
  7. // import { ValueCell } from 'mol-util/value-cell'
  8. // import { Vec3, Mat4 } from 'mol-math/linear-algebra'
  9. import Viewer from 'mol-view/viewer'
  10. // import { createColorTexture } from 'mol-gl/util';
  11. // import Icosahedron from 'mol-geo/primitive/icosahedron'
  12. // import Box from 'mol-geo/primitive/box'
  13. import Spacefill from 'mol-geo/representation/structure/spacefill'
  14. import Point from 'mol-geo/representation/structure/point'
  15. import { Run } from 'mol-task'
  16. import { Symmetry } from 'mol-model/structure'
  17. // import mcubes from './utils/mcubes'
  18. import { getStructuresFromPdbId } from './utils'
  19. import { StructureRepresentation } from 'mol-geo/representation/structure';
  20. // import Cylinder from 'mol-geo/primitive/cylinder';
  21. export default class State {
  22. viewer: Viewer
  23. pdbId = '4cup'
  24. initialized = new BehaviorSubject<boolean>(false)
  25. loading = new BehaviorSubject<boolean>(false)
  26. async initRenderer (canvas: HTMLCanvasElement, container: HTMLDivElement) {
  27. this.viewer = Viewer.create(canvas, container)
  28. this.initialized.next(true)
  29. this.loadPdbId()
  30. this.viewer.animate()
  31. }
  32. async loadPdbId () {
  33. const { viewer, pdbId } = this
  34. viewer.clear()
  35. if (pdbId.length !== 4) return
  36. this.loading.next(true)
  37. const structures = await getStructuresFromPdbId(pdbId)
  38. const struct = Symmetry.buildAssembly(structures[0], '1')
  39. // const structPointRepr = StructureRepresentation(Point)
  40. // await Run(structPointRepr.create(struct))
  41. // structPointRepr.renderObjects.forEach(viewer.add)
  42. const structSpacefillRepr = StructureRepresentation(Spacefill)
  43. await Run(structSpacefillRepr.create(struct, { detail: 0 }))
  44. structSpacefillRepr.renderObjects.forEach(viewer.add)
  45. this.loading.next(false)
  46. }
  47. }
  48. // async foo () {
  49. // const p1 = Vec3.create(0, 4, 0)
  50. // const p2 = Vec3.create(-3, 0, 0)
  51. // // const position = ValueCell.create(new Float32Array([0, -1, 0, -1, 0, 0, 1, 1, 0]))
  52. // // const normal = ValueCell.create(new Float32Array([0, 0, 0, 0, 0, 0, 0, 0, 0]))
  53. // const transformArray1 = ValueCell.create(new Float32Array(16))
  54. // const transformArray2 = ValueCell.create(new Float32Array(16 * 3))
  55. // const m4 = Mat4.identity()
  56. // Mat4.toArray(m4, transformArray1.ref.value, 0)
  57. // Mat4.toArray(m4, transformArray2.ref.value, 0)
  58. // Mat4.setTranslation(m4, p1)
  59. // Mat4.toArray(m4, transformArray2.ref.value, 16)
  60. // Mat4.setTranslation(m4, p2)
  61. // Mat4.toArray(m4, transformArray2.ref.value, 32)
  62. // const color = ValueCell.create(createColorTexture(3))
  63. // color.ref.value.set([
  64. // 0, 0, 255,
  65. // 0, 255, 0,
  66. // 255, 0, 0
  67. // ])
  68. // // const points = createRenderObject('point', {
  69. // // position,
  70. // // transform: transformArray1
  71. // // })
  72. // // // renderer.add(points)
  73. // // const mesh = createRenderObject('mesh', {
  74. // // position,
  75. // // normal,
  76. // // color,
  77. // // transform: transformArray2
  78. // // })
  79. // // renderer.add(mesh)
  80. // // const cylinder = Cylinder({ height: 3, radiusBottom: 0.5, radiusTop: 0.5 })
  81. // // console.log(cylinder)
  82. // // const cylinderMesh = createRenderObject('mesh', {
  83. // // position: ValueCell.create(cylinder.vertices),
  84. // // normal: ValueCell.create(cylinder.normals),
  85. // // color,
  86. // // transform: transformArray2
  87. // // }, cylinder.indices)
  88. // // renderer.add(cylinderMesh)
  89. // // const sphere = Icosahedron()
  90. // // console.log(sphere)
  91. // // const box = Box()
  92. // // console.log(box)
  93. // // const points2 = createRenderObject('point', {
  94. // // position: ValueCell.create(new Float32Array(box.vertices)),
  95. // // transform: transformArray1
  96. // // })
  97. // // renderer.add(points2)
  98. // // let rr = 0.7;
  99. // // function cubesF(x: number, y: number, z: number) {
  100. // // return x * x + y * y + z * z - rr * rr;
  101. // // }
  102. // // let cubes = await mcubes(cubesF);
  103. // // const makeCubesMesh = () => createRenderObject('mesh', {
  104. // // position: cubes.surface.vertexBuffer,
  105. // // normal: cubes.surface.normalBuffer,
  106. // // color,
  107. // // transform: transformArray2,
  108. // // elements: cubes.surface.indexBuffer,
  109. // // instanceCount: transformArray2.ref.value.length / 16,
  110. // // elementCount: cubes.surface.triangleCount,
  111. // // positionCount: cubes.surface.vertexCount
  112. // // }, {});
  113. // // const mesh2 = makeCubesMesh();
  114. // // renderer.add(mesh2)
  115. // }