The art-salad from felixmariotto

Bug when model is gripped while exiting a puzzle

So when a puzzle is exited, PuzzleManager is told to clear everything. But if the model is gripped, it is in the controller space, not a child of puzzleManager.group. So controls should have something like that :

events.on( 'exit-puzzle-request', e => {

	controllers.forEach( c => /* remove gripped parts */ )

} );

Part disappear with controller when controller is disabled

For instance if a controller runs out of battery, three.js automatically removes it from the scene.
Since gripped parts are children of the controller, they get removed as well.

Whatever is done against this, it should happen here :

art-salad/src/controls/controls.js

Lines 284 to 295 in 8378c5f

    
           // TODO: handle case when the user was gripping a piece and their controller runs out of battery. 
        
           // In this case three.js will automatically remove the controller from the scene, along with its 
        
           // children, which is to say the gripped piece. 
        
           // It's not ultra important since our controller object still exists, and when the user release the 
        
           // grip button, .release() will be called normally. But still this is weird to see the part disappear 
        
           // temporarily. 
        
           controller.addEventListener( 'disconnected', () => { 
        
           	// 
        
           } );

Roadmap before application to Oculus Browser homepage

Requirements here.

Make title image of 2560 x 1440 pixels
Controller vibration #6
Fix parts-controllers bugs #5 #4
Pivot pieces toward camera #3
Feedback sounds #2

TODO for release

Record a video playing a puzzle for comm.
Record a screenshot for site thumbnail and readme.
Rework the UI and particularly the homepage, write Art Salad.
Refactor the file system, put stuff in subfolders.
Setup GH Pages
Setup domain name with GH Pages
Add 2D Github button
Remove the license

Add dark mode

Apparently advised by Oculus Browser accessibility requirements here.

To make the musem model darker, it's enough to add a onBeforeCompile callback here to tinker a bit with the musem material's fragment shader.

Same for the pieces material here, although I think they shouldn't be darkened in the same proportion as the musem model.

Add vibration on parts merging

It would be a good feedback, improves a bit accessibility, and not much work to implement.
The Gamepad object of each controller gets referenced here

Add music and sounds

It would be nice to have sounds in the game, particularly when two puzzle parts get merged, and when a puzzle is finished.
A background ambient music would be nice too, or light crowd noises with lot of echo like in museums.

Here is where parts are merged :

art-salad/src/puzzles/puzzleManager.js

Lines 172 to 191 in 0ec2d75

    
           if ( 
        
           	part.position.distanceTo( oppositePart.position ) < 0.07 && 
        
           	part.quaternion.angleTo( oppositePart.quaternion ) < 0.5 
        
           ) { 
        
           	// in here we do the actual merging of one part into the passed part. 
        
           	for ( let i = oppositePart.children.length - 1 ; i > -1 ; i -- ) { 
        
           		const child = oppositePart.children[i]; 
        
           		part.add( child ); 
        
           	} 
        
           	const isFinished = ( part.children.length === this.pieces.length ); 
        
           	events.emit( 'parts-assembled', isFinished ); 
        
           }

A event should be fired here with the events module, and this event should be listened in a new audio module.

Add neck rotation on jostick left/right

A rotation of one quarter would be good, since the information is placed one quarter on the right during a puzzle.
Would improve accessibility for heavily disabled people.

It could happen here :

art-salad/src/controls/controls.js

Lines 112 to 128 in 8378c5f

    
           // here we check if the user is pressing the joystick to attract or move away a puzzle part. 
        
           if ( 
        
           	controller.grippedPart && 
        
           	controller.gamepad.axes && 
        
           	Math.abs( controller.gamepad.axes[3] ) > 0.5 
        
           ) { 
        
           	const direction = Math.sign( controller.gamepad.axes[3] ); 
        
           	controller.raySpace.attach( controller.grippedPart ); 
        
           	controller.grippedPart.position.z += direction * TELEKINESIS_SPEED * frameSpeed; 
        
           	controller.attach( controller.grippedPart ); 
        
           }

I think the camera can't be rotated while updated by the xr session (?), so it would need to be placed a child in a dolly, so the dolly can be rotated instead.

Pivot each piece to face the camera

When pieces are laid out in grid, it would be much better if they were also pivoted so that their front face look at the camera.

Currently half the pieces look away from the camera, that's not ideal :

It should happen here :

art-salad/src/puzzles/puzzleManager.js

Lines 102 to 110 in 0ec2d75

    
           		/* 
        
           		Ideally here is would be nice to add a function to pivot the part so it doesn't look "away" 
        
           		from the center of the scene. 
        
           		Idea: computing the normal of 10 random triangle in the mesh, computing the average, and pivot 
        
           		the part so this averaged normal look the camera. 
        
           		*/

felixmariotto / art-salad Goto Github PK

art-salad's People

Contributors

Stargazers

Watchers

Forkers

art-salad's Issues

Bug when model is gripped while exiting a puzzle

Part disappear with controller when controller is disabled

Roadmap before application to Oculus Browser homepage

TODO for release

Add dark mode

Add vibration on parts merging

Add music and sounds

Add neck rotation on jostick left/right

Pivot each piece to face the camera

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	// TODO: handle case when the user was gripping a piece and their controller runs out of battery.
	// In this case three.js will automatically remove the controller from the scene, along with its
	// children, which is to say the gripped piece.
	// It's not ultra important since our controller object still exists, and when the user release the
	// grip button, .release() will be called normally. But still this is weird to see the part disappear
	// temporarily.

	controller.addEventListener( 'disconnected', () => {

	//

	} );

	if (
	part.position.distanceTo( oppositePart.position ) < 0.07 &&
	part.quaternion.angleTo( oppositePart.quaternion ) < 0.5
	) {

	// in here we do the actual merging of one part into the passed part.

	for ( let i = oppositePart.children.length - 1 ; i > -1 ; i -- ) {

	const child = oppositePart.children[i];

	part.add( child );

	}

	const isFinished = ( part.children.length === this.pieces.length );

	events.emit( 'parts-assembled', isFinished );

	}

	// here we check if the user is pressing the joystick to attract or move away a puzzle part.

	if (
	controller.grippedPart &&
	controller.gamepad.axes &&
	Math.abs( controller.gamepad.axes[3] ) > 0.5
	) {

	const direction = Math.sign( controller.gamepad.axes[3] );

	controller.raySpace.attach( controller.grippedPart );

	controller.grippedPart.position.z += direction * TELEKINESIS_SPEED * frameSpeed;

	controller.attach( controller.grippedPart );

	}

	/*

	Ideally here is would be nice to add a function to pivot the part so it doesn't look "away"
	from the center of the scene.

	Idea: computing the normal of 10 random triangle in the mesh, computing the average, and pivot
	the part so this averaged normal look the camera.

	*/