3D Cover with 360 rotation (java)

Here you can post your ideas, scripts, dats, images, mods, themes, etc...
User avatar
Phoenix
ECC Developer 2006-2016
Posts: 9057
Joined: 27 Aug 2006, 01:17
Location: Deventer, The Netherlands
Contact:

3D Cover with 360 rotation (java)

Unread post by Phoenix » 21 Nov 2012, 21:15

Hi All,

This was mentioned earlier in the forums about creating a 3D animation with the cover/box pictures wich you can control 360 degrees, now Vicman has bumped into the 'Three JS' Javascript engine (i had seen that one before, but this release seems much better)
three_js.jpg
three_js.jpg (5.58 KiB) Viewed 3065 times
Example site: http://retrocollector.org/index.php?pag ... g=1#threed
Download: http://mrdoob.github.com/three.js
Tutorials: http://www.aerotwist.com/tutorials
More tutorials: http://stemkoski.github.com/Three.js
Ps. for some examples you need Chrome to work...

@DerMicha75,
Could you help buiding the final script together, since you got more Java knowledge? :-"

This is the template from the example we will use: canvas_geometry_cube.html, wich looks like:
Attachments
three_template.png
Sebastiaan Ebeltjes | ECC Developer 2006-2016 | ECC Forum Admin | Phoenix Interactive WebMaster
[- ECC programs -]
eccUpdate, eccScriptSystem, GtkThemeSelect, DatFileUpdater (DFU), ImagePackCenter (IPC), eccDiagnostics, 3dGallery, iccImageInject
eccKameleonCode, eccCreateStartmenuShotcut, eccThirdPartyConfig (TPC), EmuMoviesDownloader (EMD), eccVideoPlayer
MobyGamesImporter (MGI), ECC Amiga GetGemusConfig.

User avatar
Phoenix
ECC Developer 2006-2016
Posts: 9057
Joined: 27 Aug 2006, 01:17
Location: Deventer, The Netherlands
Contact:

Re: 3D Cover with 360 rotation (java)

Unread post by Phoenix » 21 Nov 2012, 21:25

Here is the v0.0.0.1 release, haha

More BOX like shape
Adjustments made:
changed:

Code: Select all

var geometry = new THREE.CubeGeometry( 200, 200, 200 );
into:

Code: Select all

var geometry = new THREE.CubeGeometry( 300, 400, 70 );
Start a littlbit of camera rotation, to show that it is a box on start
changed:

Code: Select all

var targetRotation = 0;
into:

Code: Select all

var targetRotation = 0.7;
Java files needed:
stats.min.js
three.min.js

Download:
three_java_files.zip
(94.89 KiB) Downloaded 70 times
Code: ecc_3d_cover_v0001.html (put this in the same folder as the .js scripts)

Code: Select all

<html lang="en">
	<head>
		<title>three.js canvas - geometry - cube</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<script src="three.min.js"></script>
		<script src="stats.min.js"></script>
		<script>
			var container, stats;
			var camera, scene, renderer;
			var cube, plane;
			var targetRotation = 0.7;
			var targetRotationOnMouseDown = 0;
			var mouseX = 0;
			var mouseXOnMouseDown = 0;
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				var info = document.createElement( 'div' );
				info.style.position = 'absolute';
				info.style.top = '10px';
				info.style.width = '100%';
				info.style.textAlign = 'center';
				info.innerHTML = 'ECC 3D Cover with 360 rotation v0.01';
				container.appendChild( info );

				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.y = 150;
				camera.position.z = 500;

				scene = new THREE.Scene();

				// Cube
				var geometry = new THREE.CubeGeometry( 300, 400, 70 );

				for ( var i = 0; i < geometry.faces.length; i ++ ) {
					geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
				}

				var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } );

				cube = new THREE.Mesh( geometry, material );
				cube.position.y = 150;
				scene.add( cube );

				// Plane
				var geometry = new THREE.PlaneGeometry( 200, 200 );
				geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );

				var material = new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } );

				plane = new THREE.Mesh( geometry, material );
				scene.add( plane );

				renderer = new THREE.CanvasRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );

				container.appendChild( renderer.domElement );

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				container.appendChild( stats.domElement );

				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
				//

				window.addEventListener( 'resize', onWindowResize, false );
			}

			function onWindowResize() {
				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			function onDocumentMouseDown( event ) {
				event.preventDefault();

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
				document.addEventListener( 'mouseout', onDocumentMouseOut, false );

				mouseXOnMouseDown = event.clientX - windowHalfX;
				targetRotationOnMouseDown = targetRotation;
			}

			function onDocumentMouseMove( event ) {
				mouseX = event.clientX - windowHalfX;
				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
			}

			function onDocumentMouseUp( event ) {
				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			}

			function onDocumentMouseOut( event ) {
				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			}

			function onDocumentTouchStart( event ) {
				if ( event.touches.length === 1 ) {

					event.preventDefault();

					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
					targetRotationOnMouseDown = targetRotation;
				}
			}

			function onDocumentTouchMove( event ) {
				if ( event.touches.length === 1 ) {
					event.preventDefault();
					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
				}
			}

			function animate() {
				requestAnimationFrame( animate );
				render();
				stats.update();
			}

			function render() {
				plane.rotation.y = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
				renderer.render( scene, camera );
			}
		</script>
	</body>
</html>
Looks like:
three_ecc_3dcover_0001.png
Next step would be to put the textures on the sides...
Sebastiaan Ebeltjes | ECC Developer 2006-2016 | ECC Forum Admin | Phoenix Interactive WebMaster
[- ECC programs -]
eccUpdate, eccScriptSystem, GtkThemeSelect, DatFileUpdater (DFU), ImagePackCenter (IPC), eccDiagnostics, 3dGallery, iccImageInject
eccKameleonCode, eccCreateStartmenuShotcut, eccThirdPartyConfig (TPC), EmuMoviesDownloader (EMD), eccVideoPlayer
MobyGamesImporter (MGI), ECC Amiga GetGemusConfig.

User avatar
Phoenix
ECC Developer 2006-2016
Posts: 9057
Joined: 27 Aug 2006, 01:17
Location: Deventer, The Netherlands
Contact:

Re: 3D Cover with 360 rotation (java)

Unread post by Phoenix » 21 Nov 2012, 21:51

v0.0.0.2

Fixed shadow dimensions underneath the 'model'
changed:

Code: Select all

var geometry = new THREE.PlaneGeometry( 200, 200 );
into:

Code: Select all

var geometry = new THREE.PlaneGeometry( 400, 70 );
Thus...also fixed the model height
changed:

Code: Select all

cube.position.y = 150;
into:

Code: Select all

cube.position.y = 250;
Thus...also fixed the camera position (further)
changed:

Code: Select all

camera.position.z = 500;
into:

Code: Select all

camera.position.z = 600;
Code: ecc_3d_cover_v0002.html (put this in the same folder as the .js scripts)

Code: Select all

<html lang="en">
	<head>
		<title>three.js canvas - geometry - cube</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<script src="three.min.js"></script>
		<script src="stats.min.js"></script>
		<script>
			var container, stats;
			var camera, scene, renderer;
			var cube, plane;
			var targetRotation = 0.7;
			var targetRotationOnMouseDown = 0;
			var mouseX = 0;
			var mouseXOnMouseDown = 0;
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				var info = document.createElement( 'div' );
				info.style.position = 'absolute';
				info.style.top = '10px';
				info.style.width = '100%';
				info.style.textAlign = 'center';
				info.innerHTML = 'ECC 3D Cover with 360 rotation v0.0.0.2';
				container.appendChild( info );

				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.y = 150;
				camera.position.z = 600;

				scene = new THREE.Scene();

				// Cube
				var geometry = new THREE.CubeGeometry( 300, 400, 70 );

				for ( var i = 0; i < geometry.faces.length; i ++ ) {
					geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
				}

				var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } );

				cube = new THREE.Mesh( geometry, material );
				cube.position.y = 250;
				scene.add( cube );

				// Plane
				var geometry = new THREE.PlaneGeometry( 400, 70 );
				geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );

				var material = new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } );

				plane = new THREE.Mesh( geometry, material );
				scene.add( plane );

				renderer = new THREE.CanvasRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );

				container.appendChild( renderer.domElement );

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				container.appendChild( stats.domElement );

				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
				//

				window.addEventListener( 'resize', onWindowResize, false );
			}

			function onWindowResize() {
				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			function onDocumentMouseDown( event ) {
				event.preventDefault();

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
				document.addEventListener( 'mouseout', onDocumentMouseOut, false );

				mouseXOnMouseDown = event.clientX - windowHalfX;
				targetRotationOnMouseDown = targetRotation;
			}

			function onDocumentMouseMove( event ) {
				mouseX = event.clientX - windowHalfX;
				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
			}

			function onDocumentMouseUp( event ) {
				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			}

			function onDocumentMouseOut( event ) {
				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			}

			function onDocumentTouchStart( event ) {
				if ( event.touches.length === 1 ) {

					event.preventDefault();

					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
					targetRotationOnMouseDown = targetRotation;
				}
			}

			function onDocumentTouchMove( event ) {
				if ( event.touches.length === 1 ) {
					event.preventDefault();
					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
				}
			}

			function animate() {
				requestAnimationFrame( animate );
				render();
				stats.update();
			}

			function render() {
				plane.rotation.y = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
				renderer.render( scene, camera );
			}
		</script>
	</body>
</html>
Looking like:
Attachments
three_ecc_3dcover_0002.png
Sebastiaan Ebeltjes | ECC Developer 2006-2016 | ECC Forum Admin | Phoenix Interactive WebMaster
[- ECC programs -]
eccUpdate, eccScriptSystem, GtkThemeSelect, DatFileUpdater (DFU), ImagePackCenter (IPC), eccDiagnostics, 3dGallery, iccImageInject
eccKameleonCode, eccCreateStartmenuShotcut, eccThirdPartyConfig (TPC), EmuMoviesDownloader (EMD), eccVideoPlayer
MobyGamesImporter (MGI), ECC Amiga GetGemusConfig.

User avatar
DerMicha75
ECC2 (java) Developer
Posts: 521
Joined: 05 Feb 2007, 22:14
Location: Germany
Contact:

Re: 3D Cover with 360 rotation (java)

Unread post by DerMicha75 » 22 Nov 2012, 20:46

Hi Phoenix

This is JavaScript, not Java!!! I have a big knowledge in Java, but only some basics in JavaScript, so I can't help...

Micha

User avatar
Vicman
PLATINUM member
Posts: 1233
Joined: 17 Jun 2007, 16:12
Location: Germany,Bochum

Re: 3D Cover with 360 rotation (java)

Unread post by Vicman » 22 Nov 2012, 21:30

Hi Phoenix,

the script-example looks nice
waiting for next beta :sorcerer:
imagepacks:
Done: Vic20, N64, Philips VG-5000 G7000 G7400, SordM5, Amstrad GX4000, Enterprise 64/128
Progress: Atari 8bit, Dosbox, Exelvision EXL 100
Vicman's eCC-Clips on You Tube

User avatar
Phoenix
ECC Developer 2006-2016
Posts: 9057
Joined: 27 Aug 2006, 01:17
Location: Deventer, The Netherlands
Contact:

Re: 3D Cover with 360 rotation (java)

Unread post by Phoenix » 23 Nov 2012, 18:32

Hi All,

Oh well i have to figure out the javascript myself then :surrender:

We have a problem, for three.js you need a WebGL supporting webbrowser like Chrome or Firefox (IE does not support it yet!)
So i cannot use the IE COM object we use in 3D Gallery.

Also another problem is that Chrome and Firefox won't load scripts, images and other LOCAL content!, but there is a workaround, for chrome you have to start it with the following commandline parameters:

Code: Select all

chrome.exe --allow-file-access-from-files
And the other workaround is that Chrome needs to be installed using this new '3D box' feature!

Stay tuned!
Sebastiaan Ebeltjes | ECC Developer 2006-2016 | ECC Forum Admin | Phoenix Interactive WebMaster
[- ECC programs -]
eccUpdate, eccScriptSystem, GtkThemeSelect, DatFileUpdater (DFU), ImagePackCenter (IPC), eccDiagnostics, 3dGallery, iccImageInject
eccKameleonCode, eccCreateStartmenuShotcut, eccThirdPartyConfig (TPC), EmuMoviesDownloader (EMD), eccVideoPlayer
MobyGamesImporter (MGI), ECC Amiga GetGemusConfig.

User avatar
Vicman
PLATINUM member
Posts: 1233
Joined: 17 Jun 2007, 16:12
Location: Germany,Bochum

Re: 3D Cover with 360 rotation (java)

Unread post by Vicman » 24 Nov 2012, 18:31

Hi Phoenix,

i've scanned a C64 Gamebox. So you can take it for a "3D-Cover-test"
scan of all 6 sides (front,back,left,right,top,bottom)
Attachments
Death Knights of Krynn (1991)(SSi).zip
(624.36 KiB) Downloaded 78 times
imagepacks:
Done: Vic20, N64, Philips VG-5000 G7000 G7400, SordM5, Amstrad GX4000, Enterprise 64/128
Progress: Atari 8bit, Dosbox, Exelvision EXL 100
Vicman's eCC-Clips on You Tube

User avatar
Phoenix
ECC Developer 2006-2016
Posts: 9057
Joined: 27 Aug 2006, 01:17
Location: Deventer, The Netherlands
Contact:

Re: 3D Cover with 360 rotation (java)

Unread post by Phoenix » 24 Nov 2012, 18:38

Hi Vicman,

I've mailed John (from retrocollectors) but i haven't got any reaction from him yet...because it's still nog working, not even with his script...so i made what i thought is a working example using a cover (6xjpg), but abviously i am doing something wrong, here is the test package (remember, start chrome with: chrome.exe --allow-file-access-from-files)
Attachments
3d_cover_test.zip
(720.62 KiB) Downloaded 84 times
Sebastiaan Ebeltjes | ECC Developer 2006-2016 | ECC Forum Admin | Phoenix Interactive WebMaster
[- ECC programs -]
eccUpdate, eccScriptSystem, GtkThemeSelect, DatFileUpdater (DFU), ImagePackCenter (IPC), eccDiagnostics, 3dGallery, iccImageInject
eccKameleonCode, eccCreateStartmenuShotcut, eccThirdPartyConfig (TPC), EmuMoviesDownloader (EMD), eccVideoPlayer
MobyGamesImporter (MGI), ECC Amiga GetGemusConfig.

User avatar
Vicman
PLATINUM member
Posts: 1233
Joined: 17 Jun 2007, 16:12
Location: Germany,Bochum

Re: 3D Cover with 360 rotation (java)

Unread post by Vicman » 24 Nov 2012, 20:27

Hi Phoenix,

i've no luck with your testfile.

I've installed chrome, and run it with C:\Programme\Google\Chrome\Application\chrome.exe --allow-file-access-from-files

but the testpage don't show me any cover.....

did you have more luck ?
Attachments
chrome-testpage.jpg
imagepacks:
Done: Vic20, N64, Philips VG-5000 G7000 G7400, SordM5, Amstrad GX4000, Enterprise 64/128
Progress: Atari 8bit, Dosbox, Exelvision EXL 100
Vicman's eCC-Clips on You Tube

User avatar
Phoenix
ECC Developer 2006-2016
Posts: 9057
Joined: 27 Aug 2006, 01:17
Location: Deventer, The Netherlands
Contact:

Re: 3D Cover with 360 rotation (java)

Unread post by Phoenix » 24 Nov 2012, 20:38

No..., that's why i mailed John from retrocollectors....
Sebastiaan Ebeltjes | ECC Developer 2006-2016 | ECC Forum Admin | Phoenix Interactive WebMaster
[- ECC programs -]
eccUpdate, eccScriptSystem, GtkThemeSelect, DatFileUpdater (DFU), ImagePackCenter (IPC), eccDiagnostics, 3dGallery, iccImageInject
eccKameleonCode, eccCreateStartmenuShotcut, eccThirdPartyConfig (TPC), EmuMoviesDownloader (EMD), eccVideoPlayer
MobyGamesImporter (MGI), ECC Amiga GetGemusConfig.

User avatar
Vicman
PLATINUM member
Posts: 1233
Joined: 17 Jun 2007, 16:12
Location: Germany,Bochum

Re: 3D Cover with 360 rotation (java)

Unread post by Vicman » 22 Aug 2014, 17:25

Hi Phoenix,

time has past....nearly 2 Years.
Is there maybe new developement on three.js ?
So there is now a way to add this feature in ecc/ecc2 ?

also : you don't need google chrome.....three.js (or better Webgl) works also in Firefox !
just type in the "adress-line" : about:config , now search in filter for webgl . And set "webgl-force-enabled = true (doubleclick) ;)
That works.

- Vicman
btw.
here some nice links :
http://mrdoob.github.io/three.js/ (newest three.js r68)
http://threejs.org/
https://www.youtube.com/watch?v=r7eFUi1 ... hWHZKqQvbW
http://all.develoteca.com/builder/?model=software
https://www.youtube.com/playlist?list=P ... N_E0Bdo0KI
http://www.elated.com/articles/rotatabl ... t-threejs/
https://github.com/mrdoob/three.js/
https://www.youtube.com/watch?v=UuJ3XN3e66o
imagepacks:
Done: Vic20, N64, Philips VG-5000 G7000 G7400, SordM5, Amstrad GX4000, Enterprise 64/128
Progress: Atari 8bit, Dosbox, Exelvision EXL 100
Vicman's eCC-Clips on You Tube

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest