Skip to content

Commit

Permalink
add: more examples to docs
Browse files Browse the repository at this point in the history
  • Loading branch information
brianzinn committed Nov 14, 2022
1 parent 51f8170 commit 7f0eac1
Show file tree
Hide file tree
Showing 26 changed files with 518 additions and 92 deletions.
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
"packages": [
"devtool/*",
"packages/react-babylonjs",
"packages/extra",
"packages/static"
]
},
Expand Down
3 changes: 2 additions & 1 deletion packages/static/content/examples/basic/animations/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ This also lets you set Easing functions, etc.

The main takeaway here as a concept though is that the Spheres that are being
created are automatically parented to their parent mesh (TransformNode). That's
why the animation can be applied to a single mesh!
why the animation can be applied to a single mesh! NOTE: there is currently no
opt-out mechanism for parenting.

[devtool:BasicAnimations.tsx]
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ title: 'Context Bridge'

These can be used to bring context across renderer boundaries.

In `react-babylonjs` that will be on the Engine and Scene components. So,
capture (Consumer) the context outside and "Provide" inside the Scene.
In `react-babylonjs` that will typically be from the `react-dom` renderer
context crossing over Engine to Scene components. So, capture (Consumer) the
context outside and "Provide" inside the Scene.

Example is given here - you would need these for Themes or libraries like Redux
that depend on context. If you are using Redux and your project is not too far
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Vector3 } from '@babylonjs/core/Maths/math.vector'
import { VertexData } from '@babylonjs/core/Meshes/mesh.vertexData'
// this import is just so it works with debug builds. you should import from '@babylonjs/*` directly as above
import { Mesh } from 'react-babylonjs/node_modules/@babylonjs/core/Meshes/mesh'
import { Mesh } from '@babylonjs/core/Meshes/mesh'

import React, { FC, useState } from 'react'
import { Engine, Scene, useScene } from 'react-babylonjs'
Expand Down Expand Up @@ -69,6 +68,8 @@ const CustomMeshes = () => {
alpha={Math.PI / 2}
beta={Math.PI / 2}
radius={20}
lowerRadiusLimit={15}
upperRadiusLimit={30}
/>
<hemisphericLight name="light1" intensity={0.7} direction={Vector3.Up()} />
<CustomMesh name="custom-0" position={new Vector3(0, 0, 0)} useWireframe={false} />
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import { Color3, Color4 } from '@babylonjs/core/Maths/math.color'
import { Vector3 } from '@babylonjs/core/Maths/math.vector'
import React from 'react'
import { Engine, Scene } from 'react-babylonjs'

const xSize = 500
const zSize = 500
const subSize = 100

const getMapData = () => {
let mapSubX = xSize
let mapSubZ = zSize

// map creation
let mapData = new Float32Array(mapSubX * mapSubZ * 3)
for (var l = 0; l < mapSubZ; l++) {
for (var w = 0; w < mapSubX; w++) {
mapData[3 * (l * mapSubX + w)] = (w - mapSubX * 0.5) * 2.0
mapData[3 * (l * mapSubX + w) + 1] =
(w / (l + 1)) * Math.sin((l + 1) / 2) * Math.cos(w / 2) * 2.0
mapData[3 * (l * mapSubX + w) + 2] = (l - mapSubZ * 0.5) * 2.0
}
}
return mapData
}

const WithDynamicTerrain = () => (
<Engine antialias adaptToDeviceRatio canvasId="babylonJS">
<Scene clearColor={new Color4(0.2, 0.4, 0.75, 1.0)}>
<hemisphericLight name="light1" intensity={0.7} direction={Vector3.Up()} />
<freeCamera
name="camera1"
position={new Vector3(-50, 10, 0)}
setTarget={[new Vector3(-20, 0, 0)]}
/>
<dynamicTerrain
name="ContinuousTerrain"
mapData={getMapData()}
mapSubX={xSize}
mapSubZ={zSize}
terrainSub={subSize}
position={new Vector3(0, 0, 0)}
>
<standardMaterial
name="terrain-material"
diffuseColor={Color3.Green()}
assignTo="mesh.material"
wireframe={true}
/>
</dynamicTerrain>
</Scene>
</Engine>
)

export const DynamicTerrain = () => (
<div style={{ flex: 1, display: 'flex' }}>
<WithDynamicTerrain />
</div>
)

export default DynamicTerrain
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: 'Dynamic Terrain'
---

This was a contribution and is not part of `@babylonjs/core` - it's an extension
converted to TypeScript and brought into this library.

[devtool:DynamicTerrain.tsx]
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { Color4 } from '@babylonjs/core/Maths/math.color'
import { Vector3 } from '@babylonjs/core/Maths/math.vector'
import '@babylonjs/core/Rendering/edgesRenderer' // You this need for side-effects
import React from 'react'
import { Engine, Scene } from 'react-babylonjs'

/**
* https://www.babylonjs-playground.com/#TYAHX#10
*/
export const EdgesRendering = () => (
<div style={{ flex: 1, display: 'flex' }}>
<Engine antialias adaptToDeviceRatio canvasId="babylonJS">
<Scene>
<arcRotateCamera
name="camera1"
alpha={0}
beta={Math.PI / 3}
radius={10}
target={Vector3.Zero()}
/>
<hemisphericLight name="light1" direction={Vector3.Up()} />
<box
name="box1"
onCreated={(box) => box.enableEdgesRendering()}
edgesWidth={4}
size={2}
position={new Vector3(0, 1.2, 0)}
edgesColor={new Color4(0, 0, 1, 1)}
/>
<ground
onCreated={(g) => g.enableEdgesRendering()}
edgesWidth={3}
width={6}
height={6}
subdivisions={1}
/>
</Scene>
</Engine>
</div>
)

export default EdgesRendering
11 changes: 11 additions & 0 deletions packages/static/content/examples/basic/edges-rendering/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
title: 'Edges Rendering'
---

This is an example of EdgesRendering. You need to import for side-effects and
then run a method on the mesh once the mesh has been created.

`onCreated` is available for all objects created and gives you direct access as
an escape hatch whenever you want to do something imperatively.

[devtool:EdgesRendering.tsx]
125 changes: 125 additions & 0 deletions packages/static/content/examples/basic/engine-view/EngineView.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
import { Camera } from '@babylonjs/core/Cameras/camera'
import { Color3, Vector3 } from '@babylonjs/core/Maths/math'
import { Nullable } from '@babylonjs/core/types'
import React, { FC, useRef } from 'react'
import { Engine, Scene } from 'react-babylonjs'

const size = 2
const shade = 0

type BoxType = {
position: Vector3
}

const BoxWithArrows: FC<BoxType> = ({ position }) => {
return (
<transformNode position={position} name="transform-node">
<lines
name="red-line"
points={[
Vector3.Zero(),
new Vector3(size, 0, 0),
new Vector3(size * 0.95, 0.05 * size, 0),
new Vector3(size, 0, 0),
new Vector3(size * 0.95, -0.05 * size, 0),
]}
color={new Color3(1, shade, shade)}
/>
<lines
name="green-line"
points={[
Vector3.Zero(),
new Vector3(0, size, 0),
new Vector3(-0.05 * size, size * 0.95, 0),
new Vector3(0, size, 0),
new Vector3(0.05 * size, size * 0.95, 0),
]}
color={new Color3(shade, 1, shade)}
/>
<lines
name="blue-line"
points={[
Vector3.Zero(),
new Vector3(0, 0, size),
new Vector3(0, -0.05 * size, size * 0.95),
new Vector3(0, 0, size),
new Vector3(0, 0.05 * size, size * 0.95),
]}
color={new Color3(shade, shade, 1)}
/>
<box
name="color-box"
faceColors={[
Color3.Blue().toColor4(),
Color3.Red().toColor4(),
Color3.Green().toColor4(),
Color3.White().toColor4(),
Color3.Yellow().toColor4(),
Color3.Black().toColor4(),
]}
></box>
</transformNode>
)
}

type MultiCanvasType = {
secondCanvas: React.MutableRefObject<Nullable<HTMLCanvasElement>>
}

const MultiCanvas: FC<MultiCanvasType> = ({ secondCanvas }) => {
const freeCameraRef = useRef<Nullable<Camera>>(null)
return (
<>
<BoxWithArrows position={Vector3.Zero()} />

<hemisphericLight name="light1" intensity={0.7} direction={Vector3.Up()} />

<freeCamera
name="freeCamera"
ref={freeCameraRef}
position={new Vector3(0, 5, -10)}
setTarget={[Vector3.Zero()]}
setActiveOnSceneIfNoneActive={false}
/>

<arcRotateCamera
name="camera1"
alpha={(3 * Math.PI) / 8}
beta={(3 * Math.PI) / 8}
radius={15}
target={new Vector3(0, 2, 0)}
/>

{secondCanvas && secondCanvas.current !== null && (
<engineView canvas={secondCanvas.current} camera={freeCameraRef.current ?? undefined} />
)}
</>
)
}

export const EngineView = () => {
const secondCanvasRef = useRef<Nullable<HTMLCanvasElement>>(null)
return (
<div className="container">
<div className="row">
<div className="col-6">
<Engine antialias adaptToDeviceRatio canvasId="babylonJS">
<Scene clearColor={new Color3(0.5, 0.5, 0.5).toColor4()}>
<MultiCanvas secondCanvas={secondCanvasRef} />
</Scene>
</Engine>
</div>
</div>
<div className="row">
<div className="col-12">second canvas</div>
</div>
<div className="row">
<div className="col-6">
<canvas className="second-canvas-babylon" ref={secondCanvasRef} />
</div>
</div>
</div>
)
}

export default EngineView
10 changes: 10 additions & 0 deletions packages/static/content/examples/basic/engine-view/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
title: 'Engine View'
---

EngineView is the component used by React Native to bring the Engine from React
Native to a view. Pointer events only work on one of the views in this example,
but you can see it mirrored onto the second canvas (using the same Babylon.js
Engine).

[devtool:EngineView.tsx]
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { Color3 } from '@babylonjs/core/Maths/math.color'
import { Vector3 } from '@babylonjs/core/Maths/math.vector'
import { Mesh } from '@babylonjs/core/Meshes/mesh'
import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder'
import { Nullable } from '@babylonjs/core/types'
import React, { FC, useMemo, useState } from 'react'
import { Engine, Scene, useScene } from 'react-babylonjs'

type MyMeshProps = {
rotation: Vector3
}

const MyMesh: FC<MyMeshProps> = (props) => {
const [mesh, setMesh] = useState<Nullable<Mesh>>(null)
const scene = useScene()
useMemo(() => {
console.log('creating a box with scene', scene)
setMesh(MeshBuilder.CreateBox('test', { size: 1 }, scene))
}, [])

return (
<>
{mesh && (
<mesh fromInstance={mesh} rotation={props.rotation} disposeInstanceOnUnmount>
<standardMaterial
name="boxmat"
diffuseColor={Color3.Blue()}
specularColor={Color3.Black()}
/>
</mesh>
)}
</>
)
}

export const FromInstance = () => {
const [rotation, setRotation] = useState(new Vector3(0, 0, 0))
const addRotation = () => {
setRotation(() => new Vector3(0, rotation.y + Math.PI / 4, 0))
}

return (
<div className="App">
<button className="btn btn-primary mb-2" onClick={addRotation}>
Rotate
</button>
<Engine antialias adaptToDeviceRatio canvasId="babylonJS">
<Scene>
<arcRotateCamera
name="arc"
target={Vector3.Zero()}
minZ={0.001}
alpha={-Math.PI / 2}
beta={Math.PI / 1.2}
radius={4}
/>
<hemisphericLight name="light1" intensity={0.9} direction={Vector3.Down()} />
<MyMesh rotation={rotation} />
</Scene>
</Engine>
</div>
)
}

export default FromInstance
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: 'From Instance'
---

This is the example to show the custom property 'fromInstance', although it is
used in many examples it is provided here as a single concept.

[devtool:FromInstance.tsx]
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,8 @@ const Instances = () => {
alpha={-Math.PI / 2}
beta={Math.PI / 1.2}
radius={Math.max(GRID_WIDTH, GRID_HEIGHT) * 1.5}
lowerRadiusLimit={Math.max(GRID_WIDTH, GRID_HEIGHT) * 1.3}
upperRadiusLimit={Math.max(GRID_WIDTH, GRID_HEIGHT) * 2}
/>
<hemisphericLight name="light1" intensity={0.9} direction={Vector3.Down()} />
<disc ref={hexRef} name="hex" radius={1} tessellation={6} isVisible={false} />
Expand Down
Loading

0 comments on commit 7f0eac1

Please sign in to comment.