SHARE
TWEET

Untitled

a guest Aug 14th, 2019 78 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState } from 'react'
  2. import { FullContainer } from '../FullContainer'
  3. import { BabylonScene } from '../BabylonScene'
  4. import { Container } from '../Container'
  5. import { ScrollContainer } from '../ScrollContainer'
  6.  
  7. import * as BABYLON from 'babylonjs'
  8. import * as GUI from 'babylonjs-gui'
  9.  
  10. const {
  11.   UniversalCamera,
  12.   Vector3,
  13.   HemisphericLight,
  14.   Mesh
  15. } = BABYLON
  16.  
  17. export const BabylonLayout = ({ children, className }) => {
  18.   const [buttonState, setButtonState] = useState('Init')
  19.  
  20.   const onBootHandler = ({ engine, scene, canvas }) => {
  21.     const camera = new UniversalCamera('camera1', new Vector3(0, 5, -10), scene)
  22.     camera.setTarget(Vector3.Zero())
  23.     camera.attachControl(canvas, true)
  24.  
  25.     const light = new HemisphericLight('light1', new Vector3(0, 1, 0), scene)
  26.     light.intensity = 0.7
  27.  
  28.     const sphere = Mesh.CreateSphere('sphere1', 16, 2, scene)
  29.     sphere.position.y = 1
  30.  
  31.     const ground = Mesh.CreateGround('ground1', 6, 6, 2, scene)
  32.     ground.position.y = 0
  33.  
  34.     const advancedTexture = GUI.AdvancedDynamicTexture.CreateFullscreenUI('UI')
  35.     const button = GUI.Button.CreateSimpleButton('but', 'Click Me')
  36.     button.width = '100px'
  37.     button.height = '40px'
  38.     button.color = 'white'
  39.     button.background = 'green'
  40.     button.onPointerDownObservable.add(() => {
  41.       setButtonState('DOWN')
  42.     })
  43.     button.onPointerUpObservable.add(() => {
  44.       setButtonState('UP')
  45.     })
  46.     button.onPointerMoveObservable.add((coordinates) => {
  47.       const relative = button.getLocalCoordinates(coordinates)
  48.       setButtonState(`${relative.x} ${relative.y} \n${coordinates.x} ${coordinates.y}`)
  49.     })
  50.  
  51.     advancedTexture.addControl(button)
  52.  
  53.     engine.runRenderLoop(() => {
  54.       if (scene) {
  55.         scene.render()
  56.       }
  57.     })
  58.   }
  59.   return (
  60.     <FullContainer className='babylon-layout'>
  61.       <ScrollContainer>
  62.         <pre>
  63.           { buttonState }
  64.         </pre>
  65.       </ScrollContainer>
  66.       <Container>
  67.         <BabylonScene onBoot={onBootHandler} />
  68.       </Container>
  69.     </FullContainer>
  70.   )
  71. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top