-
Notifications
You must be signed in to change notification settings - Fork 106
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
26 changed files
with
518 additions
and
92 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,7 +5,6 @@ | |
"packages": [ | ||
"devtool/*", | ||
"packages/react-babylonjs", | ||
"packages/extra", | ||
"packages/static" | ||
] | ||
}, | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
packages/static/content/examples/basic/dynamic-terrain/DynamicTerrain.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
8 changes: 8 additions & 0 deletions
8
packages/static/content/examples/basic/dynamic-terrain/index.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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] |
42 changes: 42 additions & 0 deletions
42
packages/static/content/examples/basic/edges-rendering/edgesRendering.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
11
packages/static/content/examples/basic/edges-rendering/index.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
125
packages/static/content/examples/basic/engine-view/EngineView.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
10
packages/static/content/examples/basic/engine-view/index.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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] |
65 changes: 65 additions & 0 deletions
65
packages/static/content/examples/basic/from-instance/FromInstance.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
8 changes: 8 additions & 0 deletions
8
packages/static/content/examples/basic/from-instance/index.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.