Skip to content

Commit

Permalink
Merge pull request #835 from vorth/vrml-camera
Browse files Browse the repository at this point in the history
Exposed camera store to viewer web components
  • Loading branch information
vorth authored Mar 22, 2024
2 parents 1dd9f1c + 9b21d73 commit 5f185d4
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 11 deletions.
22 changes: 16 additions & 6 deletions online/src/viewer/context/camera.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -88,18 +88,28 @@ const injectCameraState = ( cameraState, camera ) =>
camera.fov = cameraFieldOfViewY( cameraState )( 1.0 );
}

export const fixedFrustum = distance =>
{
const near = distance * NEAR_FACTOR;
const far = distance * FAR_FACTOR;
const width = distance * WIDTH_FACTOR;
return { distance, far, near, width };
}

export const createDefaultCameraStore = () => createStore( { ...defaultScene() } );

const CameraContext = createContext( {} );

const CameraProvider = ( props ) =>
{
const [ state, setState ] = createStore( { ...defaultScene() } );
const [ state, setState ] = props.cameraStore || createDefaultCameraStore();

// createEffect( () => {
// console.log( 'distance', state.camera.distance );
// })

if ( !! props.distance ) {
const distance = props.distance;
const near = distance * NEAR_FACTOR;
const far = distance * FAR_FACTOR;
const width = distance * WIDTH_FACTOR;
setState( 'camera', { distance, far, near, width } );
setState( 'camera', fixedFrustum( props.distance ) );
}

if ( !!props.context ) {
Expand Down
2 changes: 1 addition & 1 deletion online/src/viewer/ltcanvas.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const Lighting = () =>
return (
<>
<object3D ref={centerObject} visible={false} />
<ambientLight color={state.lighting.ambientColor} intensity={1.5} visible={false} />
<ambientLight color={state.lighting.ambientColor} />
<For each={state.lighting.directionalLights}>{ ( { color, direction } ) =>
<directionalLight target={centerObject} intensity={1.7} color={color} position={direction.map( x => -x )} />
}</For>
Expand Down
25 changes: 21 additions & 4 deletions online/src/wc/vrml/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@ import { urlViewerCSS } from '../../viewer/urlviewer.css.js';
import { vZomeViewerCSS } from "../vzome-viewer.css";
import { CameraProvider, DesignViewer } from '../../viewer/index.jsx';
import { VrmlModel } from './vrml.jsx';
import { createDefaultCameraStore, fixedFrustum } from '../../viewer/context/camera.jsx';


const renderVrmlViewer = ( container, src, config ) =>
const renderVrmlViewer = ( container, src, config, store ) =>
{
const bindComponent = () =>
{
return (
<CameraProvider>
<CameraProvider cameraStore={store}>
<DesignViewer config={ { ...config, allowFullViewport: true } }
componentRoot={container}
children3d={ <VrmlModel url={src()} /> }
Expand All @@ -38,6 +39,7 @@ export class VrmlViewerElement extends HTMLElement
#config;
#src
#setSrc;
#cameraStore;

constructor()
{
Expand All @@ -53,11 +55,26 @@ export class VrmlViewerElement extends HTMLElement
this.#root.appendChild( this.#container );

this.#config = { preview: true, showScenes: 'none', camera: true, lighting: true, design: true, };
}

this.#cameraStore = createDefaultCameraStore();

const [ state, setState ] = this.#cameraStore;

// These happen to be defaults that match all of George Hart's VRML
setState( 'camera', fixedFrustum( 10 ) );
setState( 'lighting', {
backgroundColor: '#3380FF',
ambientColor: '#b0b0b0',
directionalLights: [
{ direction: [ 0.5, 1, 0 ], color: '#bbbbbb' },
{ direction: [ -0.5, -1, 0 ], color: '#bbbbbb' },
]
} );
}

connectedCallback()
{
renderVrmlViewer( this.#container, this.#src, this.#config );
renderVrmlViewer( this.#container, this.#src, this.#config, this.#cameraStore );
}

static get observedAttributes()
Expand Down

0 comments on commit 5f185d4

Please sign in to comment.