Community Tip - You can Bookmark boards, posts or articles that you'd like to access again easily! X
How do I set the resource for a 3D model using JS? Is it possible to change 3D model runtime to create an animation effect?
Solved! Go to Solution.
Hello @lundha,
I think there are in principle 3 possible way to do this.
1.) as you already mention setting the resource property of one model widget controlled by parameter.
So, the animation option in JavaScript is simple. You need a loop in a interval construct -something like this:
var global_count_int1=0;
$interval( function(){
global_count_int1++; var url_source= "app/resources/Uploaded/pic_"+global_count_int1+".gif"; $scope.$applyAsync(function() { $scope.app.params['image_url']=url_source;} ); //end applyAsync
if(global_count_int1 >= max_loop) gobal_count_int1=0; //end of the loop start again from begin } , 500); //0.5 sec /////////////////////////////////////////////////////////////////////
This example will set /change a application parameter to a url where the pic_1...to pic_max_loop are pictures .gif files saved in the upload folder. You can use the same consturct for other properties. Also you can test different values of the interval - here is 500ms =0.5 sec
2.) another possible option is to load many model widget - for each pvz one. so you can make it in the same loop one particular widget visible and all other could be set to visible = false. So you can create you own function which will set all proprties to invisible and then set one to visible ... etc.
3.) the last option is to use creo View or better Creo Parameter where you can insert all components to one assembly. Here the advantage will be that you will have only one model widget. The different component could be defined as model item. So , then you do the same techniques as mention in 2.) set the property 'visible' of particular modelitem true and all other of false.
Also here you can blank and visible component of assembly without modelitems as described in the post
Here you can use the following code fragment to make it to hidden
tml3dRenderer.setProperties($scope.currentSelection, { hidden:true } );
or
tml3dRenderer.setProperties($scope.currentSelection, { hidden:false } );
where you can display the component specified in the variable $scope.currentSelection. You can then use the same construct as mention in the post for reading colors - but there you need instead of the color parameter a blankstatus parameter. If you need some assistance to implement this in javascript Code then , please let me know. Thanks!
Solved problem by writing $scope.app.params.<Application parameter> = "<File destination>.pvz"
Dont know if complete file destination is needed.
Bind the application parameter to 3D model by dragging the arrow symbol to the model. Check 'Resource'.
However, still curious if I can add many *.pvz files to Resources and quickly change between them to create an animation effect.
Hello @lundha,
I think there are in principle 3 possible way to do this.
1.) as you already mention setting the resource property of one model widget controlled by parameter.
So, the animation option in JavaScript is simple. You need a loop in a interval construct -something like this:
var global_count_int1=0;
$interval( function(){
global_count_int1++; var url_source= "app/resources/Uploaded/pic_"+global_count_int1+".gif"; $scope.$applyAsync(function() { $scope.app.params['image_url']=url_source;} ); //end applyAsync
if(global_count_int1 >= max_loop) gobal_count_int1=0; //end of the loop start again from begin } , 500); //0.5 sec /////////////////////////////////////////////////////////////////////
This example will set /change a application parameter to a url where the pic_1...to pic_max_loop are pictures .gif files saved in the upload folder. You can use the same consturct for other properties. Also you can test different values of the interval - here is 500ms =0.5 sec
2.) another possible option is to load many model widget - for each pvz one. so you can make it in the same loop one particular widget visible and all other could be set to visible = false. So you can create you own function which will set all proprties to invisible and then set one to visible ... etc.
3.) the last option is to use creo View or better Creo Parameter where you can insert all components to one assembly. Here the advantage will be that you will have only one model widget. The different component could be defined as model item. So , then you do the same techniques as mention in 2.) set the property 'visible' of particular modelitem true and all other of false.
Also here you can blank and visible component of assembly without modelitems as described in the post
Here you can use the following code fragment to make it to hidden
tml3dRenderer.setProperties($scope.currentSelection, { hidden:true } );
or
tml3dRenderer.setProperties($scope.currentSelection, { hidden:false } );
where you can display the component specified in the variable $scope.currentSelection. You can then use the same construct as mention in the post for reading colors - but there you need instead of the color parameter a blankstatus parameter. If you need some assistance to implement this in javascript Code then , please let me know. Thanks!