3D Animated Cube - [FREE DL] credit @Luckyde


(Stephen G) #1

Hi guys,

I have being trying to implement this old Hype project from the template library created by @Luckyde. I am getting an error when uploaded to server that causes the project to breakdown.

PROBLEM:
The 3D cube loads perfect locally with no issues but as you can see in the error log on the live demo below this error appears. My thoughts are that some of the code in the project (created in 2015) is obsolete in the latest version of hype.

Error in undefined: TypeError: Cannot read property 'offsetLeft' of null

Final working hype file: 3dcube_v2.hypetemplate.zip (134.5 KB)

View live demo here >

Would appreciate it if anyone has any suggestions on how to resolve this error.
Here is the function that is causing the error as far as I can see.

Many thanks,

stageLeft = (event.pageX-mainStage.offsetLeft);
stageTop = (event.pageY-mainStage.offsetTop);
centreX = (parseInt(mainStage.style.width)/2)-stageLeft;
centreY = (parseInt(mainStage.style.height)/2)-stageTop;

TweenLite.to(cube, 2,{ rotationX: -centreY ,rotationY:-(centreX+cubeSize/1) ,ease: Back.easeOut, transformOrigin: 100+"px "+100+"px"});

 if(event['hypeGesturePhase']=='end'){
 	console.log('x '+ -centreY)
	console.log('y '+-(centreX+cubeSize/1))
 }

(Rick) #2

Maybe it’s that you’re missing a bracket } in the above?


(Stephen G) #3

The brackets are ok thanks though. I have updated the code snippet above as it was a cut and paste error not a mistake in code


#4

The error is saying that it doesn’t know what “mainStage” is. That it is not set (null) and therefore cannot read the offsetLeft property.

Check where “mainStage” is being set and that it’s available for the function to read.


(Stephen G) #5

Thanks thats what I figured but still no closer to solution. Main stage is set in the Head of the document along with other vars. I tried to change this to window.mainStage; but this had no effect.

<script>
	var stageLeft;
	var stageTop;
	var mainStage;
	var centreX;
	var centreY;
	var sides2Left;
	var innitialWidth;
	

	var cubeSize = 200;
	var cubeOpacity=0.5;
	var cube;
	
	</script>

#6

Yes. But “mainStage” has not been assigned anything so it’s just a null variable. So in other words it has been defined hence the error does not show as “undefined” but has not been assigned to anything so it’s “null”. Somewhere else there should be an assignment mainStage = ... for it to no longer be null.

EDIT
Just seen you posted the doc so now I’m on my comp. You need to load the “cubeSetup” script on scene load as this is where the “mainStage” is being assigned (as the hype document container).


(Lucky) #7

yeah that example’s really really old also

you could do

mainStage = document.getElementById(hypeDocument.documentId());

trying that i even removed mainStage off the header and it still worked, i’m not getting your error even on publish or you could redeclare it in the 3dSpin function at the top

var easeType=Linear.easeNone;
cube = hypeDocument.getElementById('cube')
console.log(this)
mainStage = document.getElementById(hypeDocument.documentId()); 
CSSPlugin.defaultTransformPerspective =0;

var sides = [];
var sidesAmount = 6;

 for(var i=1;i<sidesAmount+1;i++){
	sides[i]=hypeDocument.getElementById('side'+i)
	TweenLite.set(sides[i].parentNode, {transformStyle: "preserve-3d"}); 
	TweenLite.set(cube.parentNode, {transformStyle: "preserve-3d",perspective:1500,perspectiveOrigin:"50% 50% 50%"}); 
	
	sides[i].style.width=cubeSize+"px";
	sides[i].style.height=cubeSize+"px";
	sides[i].style.left="0px"
	sides[i].style.top="0px"
	if(sides.length>=sidesAmount+1){
	sidesLoad();
	} 
}
function sidesLoad(){

	stageLeft = (event.pageX-mainStage.offsetLeft);
	stageTop = (event.pageY-mainStage.offsetTop);
	centreX = (parseInt(mainStage.style.width)/2)-stageLeft;
	centreY = (parseInt(mainStage.style.height)/2)-stageTop;

	sides2Left=(parseInt(mainStage.style.width)/2)-parseInt(sides[2].style.width)/2

	cube = hypeDocument.getElementById('cube')

	for(i=1;i<7;i++){
	cube.appendChild(sides[i]); 
}
var setupTL = new TimelineLite()
.set(cube, {transformStyle:"preserve-3d"})
.set(sides[1], {  z: 100+'px' })
.set(sides[2], {  rotationY: 180, z: '-100px' })
.set(sides[3], { rotationX: 90, rotationZ: 90, rotationY: 90, x: '100px'})
.set(sides[4], { rotationX: 90, rotationZ: -90, rotationY: -90, x: '-100px' })
.set(sides[5], { rotationX: 90, y: '-100px' })
.set(sides[6], { rotationX: -90, y: '100px' })
.set(cube, { rotationX:45 ,rotationY: 45,transformOrigin: 100+"px "+100+"px"});

}

#8

I think it’s because the “cubeSetup” function is being called with a timeline action on the first frame and for this reason I suggest running it on scene load. As this is probably causing it to not run sometimes hence the error.

This is because it still gets assigned in global scope when run in the “cubeSetup” function. (without var an assignment is attached to the higher scope in this case window(global))


(Stephen G) #9

Awesome will give that a go, thanks for quick reply


(Stephen G) #10

Thanks for the reply, the error happens when files is uploaded to a live site. (see link above then look at the console error)

Will try make suggested changes and report back.


(Stephen G) #11

Thanks @Luckyde and @DBear for helping me resolve this problem!
This is a great solution Luckyde for creating engaging 3D shapes for teaching children maths…my next problem is how to create a 3D Pyramid using this technique !! Wish me luck, thanks again.

Final working hype file: 3dcube_v2.hypetemplate.zip (134.5 KB)

Link to working demo >>


(Hans-Gerd Claßen) #12

cool :slight_smile:


(strmiska) #13

:flushed: awesome!