Skip to content

Commit

Permalink
feat: add caffeine example
Browse files Browse the repository at this point in the history
  • Loading branch information
@superwf
superwf committed Oct 25, 2019
1 parent 56be7d8 commit fb6c2df
Show file tree
Hide file tree
Showing 6 changed files with 6,092 additions and 0 deletions.
5,904 changes: 5,904 additions & 0 deletions public/4hhb.pdb
View file

Large diffs are not rendered by default.

Binary file added public/a.glb
View file
Binary file not shown.
44 changes: 44 additions & 0 deletions public/caffeine.pdb
View file
@@ -0,0 +1,44 @@
HEADER NONAME 22-Apr-10 NONE 1
TITLE NONE 2
AUTHOR Chemical Structure Services at http://cactus.nci.nih.gov NONE 3
REVDAT 1 22-Apr-10 0 NONE 4
ATOM 1 C 0 -2.561 1.251 -0.000 0.00 0.00 C+0
ATOM 2 C 0 -3.261 -1.161 -0.000 0.00 0.00 C+0
ATOM 3 C 0 1.534 2.629 0.000 0.00 0.00 C+0
ATOM 4 C 0 2.247 -2.176 -0.000 0.00 0.00 C+0
ATOM 5 O 0 -0.438 -2.428 0.000 0.00 0.00 O+0
ATOM 6 O 0 2.994 0.384 0.000 0.00 0.00 O+0
ATOM 7 C 0 -0.016 -1.285 -0.000 0.00 0.00 C+0
ATOM 8 C 0 1.791 0.208 0.000 0.00 0.00 C+0
ATOM 9 C 0 -0.911 -0.194 -0.000 0.00 0.00 C+0
ATOM 10 C 0 -0.403 1.099 -0.000 0.00 0.00 C+0
ATOM 11 N 0 -1.445 1.934 -0.000 0.00 0.00 N+0
ATOM 12 N 0 0.971 1.277 -0.000 0.00 0.00 N+0
ATOM 13 N 0 1.312 -1.048 -0.000 0.00 0.00 N+0
ATOM 14 N 0 -2.286 -0.068 0.000 0.00 0.00 N+0
ATOM 15 H 0 -3.552 1.680 0.004 0.00 0.00 H+0
ATOM 16 H 0 -3.503 -1.433 1.028 0.00 0.00 H+0
ATOM 17 H 0 -4.168 -0.840 -0.514 0.00 0.00 H+0
ATOM 18 H 0 -2.839 -2.025 -0.514 0.00 0.00 H+0
ATOM 19 H 0 1.673 2.965 1.028 0.00 0.00 H+0
ATOM 20 H 0 2.495 2.623 -0.514 0.00 0.00 H+0
ATOM 21 H 0 0.851 3.307 -0.514 0.00 0.00 H+0
ATOM 22 H 0 2.478 -2.456 -1.028 0.00 0.00 H+0
ATOM 23 H 0 3.164 -1.888 0.513 0.00 0.00 H+0
ATOM 24 H 0 1.793 -3.024 0.514 0.00 0.00 H+0
CONECT 1 14 11 15 0 NONE 29
CONECT 2 14 16 17 18 NONE 30
CONECT 3 12 19 20 21 NONE 31
CONECT 4 13 22 23 24 NONE 32
CONECT 5 7 0 0 0 NONE 33
CONECT 6 8 0 0 0 NONE 34
CONECT 7 9 13 5 0 NONE 35
CONECT 8 12 6 13 0 NONE 36
CONECT 9 10 7 14 0 NONE 37
CONECT 10 9 12 11 0 NONE 38
CONECT 11 10 1 0 0 NONE 39
CONECT 12 10 8 3 0 NONE 40
CONECT 13 7 4 8 0 NONE 41
CONECT 14 9 1 2 0 NONE 42
END NONE 43

136 changes: 136 additions & 0 deletions src/pages/Caffeine.tsx
View file
@@ -0,0 +1,136 @@
import * as React from 'react'
import * as THREE from 'three'
import { getCanvasContextAndProgram } from '../webglUtils'
import * as dat from 'dat.gui'
import { PDBLoader } from 'three/examples/jsm/loaders/PDBLoader'
// import { WEBGL } from 'three/examples/jsm/WebGL'

const loader = new PDBLoader()

let ticker: any

const useThree = () => {
React.useEffect(() => {
const gui = new dat.GUI()
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 5000)
camera.position.x = -30
camera.position.y = 40
camera.position.z = 30
camera.lookAt(scene.position)

const cameraGui = gui.addFolder('camera position')
cameraGui.add(camera.rotation, 'x')
cameraGui.add(camera.rotation, 'y')
cameraGui.add(camera.rotation, 'z')
cameraGui.open()

const { canvas } = getCanvasContextAndProgram()
const context = canvas.getContext('webgl2', { alpha: false }) as WebGLRenderingContext
const renderer = new THREE.WebGLRenderer({ canvas, context })
renderer.setClearColor(0)

const light = new THREE.DirectionalLight(0xffffff, 0.8)
light.position.set(1, 1, 1)
scene.add(light)

const light1 = new THREE.DirectionalLight(0xffffff, 0.8)
light1.position.set(-1, -1, 1)
scene.add(light1)

loader.load('./caffeine.pdb', pdb => {
const { geometryAtoms, geometryBonds, json } = pdb

var sphereGeometry = new THREE.IcosahedronBufferGeometry(1, 2)

geometryAtoms.computeBoundingBox()
const offset = new THREE.Vector3()
geometryAtoms.boundingBox.getCenter(offset).negate()

geometryAtoms.translate(offset.x, offset.y, offset.z)
geometryBonds.translate(offset.x, offset.y, offset.z)

var positions = geometryAtoms.getAttribute('position')
var colors = geometryAtoms.getAttribute('color')

var position = new THREE.Vector3()
var color = new THREE.Color()

const root = new THREE.Group()

for (let i = 0; i < positions.count; i++) {
position.x = positions.getX(i)
position.y = positions.getY(i)
position.z = positions.getZ(i)

color.r = colors.getX(i)
color.g = colors.getY(i)
color.b = colors.getZ(i)

const material = new THREE.MeshPhongMaterial({ color })
const object = new THREE.Mesh(sphereGeometry, material)
object.position.copy(position)
object.position.multiplyScalar(5)
object.scale.multiplyScalar(2)
root.add(object)
}

positions = geometryBonds.getAttribute('position')

var boxGeometry = new THREE.BoxBufferGeometry(1, 1, 1)
for (let i = 0; i < positions.count; i += 2) {
const start = new THREE.Vector3()
const end = new THREE.Vector3()
start.x = positions.getX(i)
start.y = positions.getY(i)
start.z = positions.getZ(i)

end.x = positions.getX(i + 1)
end.y = positions.getY(i + 1)
end.z = positions.getZ(i + 1)

start.multiplyScalar(5)
end.multiplyScalar(5)

const m = new THREE.MeshBasicMaterial({ color: 0xff0000 })

const object = new THREE.Mesh(boxGeometry, m)
object.position.copy(start)
object.position.lerp(end, 0.5)
object.scale.set(0.1, 0.1, start.distanceTo(end))
object.lookAt(end)
root.add(object)
}

scene.add(root)

const groupGui = gui.addFolder('group rotation')
groupGui.add(root.rotation, 'x')
groupGui.add(root.rotation, 'y')
groupGui.add(root.rotation, 'z')

groupGui.open()
})

const render = () => {
renderer.render(scene, camera)
ticker = requestAnimationFrame(render)
}

ticker = requestAnimationFrame(render)

return () => {
cancelAnimationFrame(ticker)
gui.close()
}
}, [])
}

const Three = () => {
useThree()
return <p> use three.js render </p>
}

THREE.Shape

export default Three
1 change: 1 addition & 0 deletions src/pages/Three.tsx
View file
Expand Up @@ -102,6 +102,7 @@ const useThree = () => {

return () => {
cancelAnimationFrame(ticker)
gui.close()
}
}, [])
}
Expand Down
7 changes: 7 additions & 0 deletions src/routes.tsx
View file
Expand Up @@ -12,6 +12,7 @@ const PerspectiveProjection = React.lazy(() =>
const Cube = React.lazy(() => import(/* webpackChunkName: "Cube" */ './pages/Cube'))
const LightCube = React.lazy(() => import(/* webpackChunkName: "LightCube" */ './pages/LightCube'))
const Three = React.lazy(() => import(/* webpackChunkName: "Three" */ './pages/Three'))
const Caffeine = React.lazy(() => import(/* webpackChunkName: "Three" */ './pages/Caffeine'))

export const routes = [
{
Expand Down Expand Up @@ -62,4 +63,10 @@ export const routes = [
component: (props: any) => <Three {...props} />,
path: '/three',
},
{
key: 'Caffeine',
exact: true,
component: (props: any) => <Caffeine {...props} />,
path: '/caffeine',
},
]

0 comments on commit fb6c2df

Please sign in to comment.