- This topic has 7 replies, 2 voices, and was last updated 3 years, 7 months ago by D3Pixel.
2019-08-07 at 10:44 am #17638
1. Can we have a “Camera Tween To: Camera” puzzle so we can simply fill a 3D scene with additional cameras that are perfectly positioned and rotated to what we want and then just tween between them. This will make it much easier to animate between camera views (and without having to setup Helpers everywhere. The current puzzle seems buggy and difficult to use without a lot of trial and error.
2. Can the puzzle editor load in Index.html rather than just the raw gltf so we can test faster? Also allow us to move the editor window right-aligned or bottom.
3. Can we have an animation property that returns current frame number of the playhead during an animation clip so we can use reverse from current frame. e.g. a property like “UpdatedValue” but for “ClipCurrentFrame”
Cheers2019-08-07 at 11:05 am #17639
Regarding #1, the current puzzle is awkward to use if the LookAt object is currently animating its position, even if the Camera Tween To is still animating it only gets the LookAt position once rather than constantly while the camera tween is still animating.
2019-08-07 at 1:33 pm #17641
- This reply was modified 3 years, 7 months ago by D3Pixel.
4. Disable mouse scroll wheel if a Tween Camera animation is playing.2019-08-07 at 10:48 pm #17643
D3 Pixel – Lets get #2 out of the way first. Are you testing/running your puzzles in the same browser window as you are working with puzzles in? In other words, are you using that “play” button in the puzzles window (the one right next to the save button?) for testing. If so, that has to be a pain.
I never use that “play” button. I open puzzles in one browser tab than in another tab I load the project.html (or index html). I save puzzles then jump to project.html (or index.html) tab and just hit refresh. So much easier and faster.
Not sure how you have your browser configured but mine is setup to open new links in new tabs.
As for question #1… I might soon publish a quick tutorial on camera movement tips and tricks as I am in process right now of documenting the results of all my “trial and errors” camera tricks for a project I am trying to wrap up right now.
As for Q #3.. not sure about that as I haven’t had to tackle any animation playhead position issues.. yet.. but I know I will. As of the moment, I don’t see any puzzles that can fetch the current animation frame property.2019-08-08 at 6:50 am #17651
Here is a solution for what I believe is your request here.
Step One: Create your project
First thing I usually do after my project is created, is get into puzzles and under the init tab (I find it best to add HTML elements in this section, although the main tab usually works fine), I add an add HTML div puzz then cut n paste into the
innerHTML attribute this simple markup:
<button id=”but01″> Position 1</button>
<button id=”but02″> Position 2</button>
<button id=”but03″> Position 3</button>
<button id=”but04″> Position 4</button>
(See Figure 2)
Tip: keep a scratch notepad file on your desktop with some generic HTML markup bits like this one handy for reuse in other test projects
With our ‘tween-to-tween-camera’ effect switches in place, go into blender.
Step 2 (optional*): Switch to front orthograpnic view (num pad 1) then align active camera to view (ctrl-alt-numpad )
*step 2 is not required, I usually do this to get my orientation/bearings straight in my head when I start a scene.
Tip: If you just have the default blender cube in your scene, you should probably add a few more objects to make it more appealing for the multiple number of cams we are going to be using.
Step 3: Add an empty to your scene. Select your camera, add a track-to constraint, select empty as your target with settings in (Figure 3)
From cam view (0 on numpad), select your empty and drag it around.
Your cam view should track/follow (“look at”) the empty. Moving your cam around in combination with your target empty, position your Cam #1 as you see fit.
Tip: If you didn’t know, when you create a new default scene in blender, it comes standard with an orbit cam and the default “target: from object” field in verge settings (under cam properties tab) is blank. When blank, your Verge3d scene defaults the camera targeted to the global origin point.
Step 4: With your cam and empty selected, object > duplicate objects (shift D). Drag out the duplicate a bit to provide separation. Repeat process 2 more times so you have a total of 4 cameras in your scene. (fig 8)
Step 5: Select your first copy of the cam (should be Camera.001, then click view > cameras > Set active object as camera (ctrl numpad 0). Moving your now active Camera.001 around in combination with your corresponding target empty (Empty.001), position your Cam #2 to taste.
Step 6: Repeat this process for each of your remaining cams. (end result Figure 9)
Step 7: With the cams all set how you want, go back to your original Cam #1 (camera). Ctrl numpad 0 to make sure it selected as default camera for the scene. IMPORTANT. Next we need to remove the track to constraint on this, and only this camera. Otherwise Cam #1 is going to be locked to our first empty and won’t tween properly in our puzzles setup.
BUT BEFORE removing the track constraint, we first need to apply it (otherwise, the cam snaps back out of position the moment you remove the track to constraint). To do this, with your main Cam selected, from the menu Object > apply > visual transform. Now it is safe to remove the track to constraint.
Step 8: One last thing to do in Blender. Opps, I lied. Two last things:
1, Go back into the camera properties tag for your main camera (Cam #1) and make sure you fill in that blank to your original Empty (Figure 9.5)
2.With Cam #1 selected (camera), right click for the pop up menu then select Snap Cursor to Selected. (Figure 10) Add another empty. This empty will be the marker for our original camera location after we start moving the cam around in puzzles.
Step 9: Save and Export the updated scene gtlf file.
Step 10: Close down your puzzles if left the window open and re-open it to account for the new objects you added to scene in updated gtlf export.
Step 10: Making sure you are back in the “main” tab of the puzzles interface, add these 4 puzzles (see figure 11). Notice the pattern of cam001 being assigned empy001, and so on, with exception of the first button for Cam #1 which is a little different since Cam #1 is the only camera that is actually moving (or active).
Yes that is right, its all an illusion, many different camera angle but performed by only 1 camera,https://www.soft8soft.com/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif
Pressing the 1st button sets to Cam #1 original position, whose position was held by that extra Empty 4 marker and looking at the original Empty.
Step 11 BONUS: See if you can find my easter egg… hint, click on the glowing sphere to see someone as happy as you are all now with the knowledge of being able to set up a quasi-multicam scene with perfect tweening.
https://www.soft8soft.com/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif2019-08-08 at 6:51 am #17656
and the last few figures.. i probably should have just done a screencast tutorial.2019-08-08 at 6:53 am #17660
Oh my… let us not forget a link to a live working demo
here ya goes:
https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:bddc09b7fe/applications/tweenmadness/tweenmadness.html2019-08-08 at 10:25 am #17674
Hi Crunch, thanks for the detailed post. Much appreciated.
My request was simpler in that we don’t need to setup Blender empties or Max Dummy objects for position and LookAt targets. If we had a Tween to Camera puzzle then it would tween to that camera taking Position, Rotation and FOV into account so the Blender side of WYSIWYG to Verge3D is much quicker with less scene clutter.
How you describe the camera’s is how I have been doing it already but thanks for writing it out for others who maybe wondering. One thing to note is that the Tween Puzzle will only take the LookAt’s transform the instant it runs rather than constantly so if your LookAt object is also animating then this will create undesired tween results. You can get around this by animating the camera in Blender rather than using a Tween Puzzle but the downside is that it locks view rotation while a camera is animating.
I like the way you use Init for creating buttons in the puzzle editor, that is neat and great for quick prototyping. However, anything more complex than buttons requires multiple tabs open (Puzzle + index) which I think is unnecessary when the puzzle editor could house the index.html page, maybe this could be optional. The raw gltf running to the side is only useful at the most basic of projects and I would rather have my index page there so it would be a case of “Save + F5” to test tweaks to parameters. Currently I have to Save + Switch Tab + F5, it might not seem much but it is an extra step and also means you have 2 x gltf running on a system unless you close the puzzle editor tab.
The fastest result would be for the runtime JS to be updated on save without having to reload the entire page but not sure that is even possible.
I can already see the need for a third monitor as it is with Code editor / Puzzle Editor / Index.html
#3 Yes you are correct, there is no property in the puzzle editor for this yet. You can do it by editing the visual_logic.js file and coding it manually but be aware this code will be overwritten each time you save in the puzzle editor.
You mentioned keeping notepad handy for the init template code.
Did you know you can select a puzzle code block and right click it and save the entire (connected) block to a category that appears in the side bar called “Library”, when you next open or start a new project you can just drop in your saved puzzle blocks or move them into new tabs for cleaning up big puzzles.
PS. Love the easter egg haha.
- You must be logged in to reply to this topic.