Hello, I have a beginner question regarding a model I am loading within my wordpress site using html similar to the code below. (Not my code, but its the same general idea with a different model.) It’s working great, but the camera is zoomed in way too close to the model and I cant figure out how to make it zoom out. I’ve tried plugging different values into the “camera” and “position” tags but to no avail. Is there anything else I can do to zoom the camera out? Thanks in advance.
Hello and welcome!
If you use ArcRotate camera, you may try to manually adjust camera radius ArcRotateCamera | Babylon.js Documentation
or make it automatic with framing behavior Camera Behaviors | Babylon.js Documentation
A piece of code would help to get more detailed answer 
Hello, thank you. for some reason the code I listed in the original post isn’t showing up, I’ll list it again below. As I said in my post, this isn’t my code but it is virtually identical with a different model (I don’t have access to my work computer right now.) This is html shortcode associated with the Babylon wordpress plugin, it sounds like the things you are suggesting would involve changing the Javascript which I’m not sure how I would even access. Is there nothing I can do to the HTML to zoom out?
//
<babylon extends="minimal">
<!-- Ground that receives shadows -->
<ground receive-shadows="true"></ground>
<!-- Default skybox
<skybox></skybox>
-->
<model url="https://models.babylonjs.com/CornellBox/cornellBox.glb">
</model>
<!-- enable antialiasing -->
<engine antialiasing="true"></engine>
<!-- camera configuration -->
<camera>
<!-- add camera behaviors -->
<behaviors>
<!-- enable default auto-rotate behavior -->
<auto-rotate type="0"></auto-rotate>
<!-- enable and configure the framing behavior -->
<framing type="2" zoom-on-bounding-info="true" zoom-stops-animation="false"></framing>
<!-- enable default bouncing behavior -->
<bouncing type="1"></bouncing>
</behaviors>
<position x="3" y="3" z="3"></position>
</camera>
<scene>
<clear-color r="1" g="1" b="1"></clear-color>
</scene>
</babylon>
//
[From admin] @EStech you simply need to enclose snippets of code with ```. See Mastering Markdown · GitHub Guides
- So you use this plugin for Wordpress - Babylon.js Wordpress Integration | Babylon.js Documentation, am I right?
- You need to find some way to share the code, it is still invisible; maybe code screenshot would help.
Here is the rest of the code
-
It would be easier just to give the link to the example - Cornell Box on White Background – Babylon.js 3D WordPress Plugin
-
Try to change the first line into
<babylon extends="minimal" camera.radius = "50">and tune this value - I hope it could help. You may also try to delete all camera behaviours and see what will happen.
Would be difficult to give more detailed answer without having the look at model itself.
1 Like
Awesome thanks! That sounds like its exactly what I’m looking for, I’ll do that on Monday when I’m back at my work computer.
1 Like
Hello,
I just implemented this this morning. It accomplished exactly what I needed in terms of the zoom, but it removed my transparent background and auto rotate for some reason. Any idea why that could be? Here is my actual code:
- You don’t need any JS files except Babylon Viewer itself.
- Put camera radius into camera tags, like in this example:
<babylon extends="minimal" >
<!-- Ground that receives shadows -->
<ground receive-shadows="true"></ground>
<!-- Default skybox
<skybox></skybox>
-->
<model url="https://models.babylonjs.com/CornellBox/cornellBox.glb">
</model>
<!-- camera configuration -->
<camera radius="100">
<!-- add camera behaviors -->
<behaviors>
<!-- enable default auto-rotate behavior -->
<auto-rotate type="0"></auto-rotate>
</behaviors>
<position x="3" y="3" z="3"></position>
</camera>
<scene>
<clear-color r="0.2" g="0.8" b="1"></clear-color>
</scene>
</babylon>
4 Likes
That worked perfectly, thanks!
1 Like