ZimJS and Three

Questions
1

Hi all, I've been following along with Dan's excellent videos on ZIM and three.js So I've got a 3D model that I want to be able to rotate continuously in all directions by dragging on the screen. The problem with OrbitControls is that they stop after Pi radians in a vertical direction. Any ideas on how to do this?

1 Like
2

The premise of this issue is threejs doesn't want the camera to ever be "upside down" as it renders the scene.

Check this out for a possible solution: Trackball control like rotation · Issue #385 · yomotsu/camera-controls · GitHub

Another possible solution which I used myself in a project was a plugin that someone made to rotate objects instead of the camera. GitHub - albertopiras/threeJS-object-controls: ThreeJS module that allows you to rotate an Object (mesh) independently from the rest of the scene, and to zoom in/out moving the camera.

<script type="module">

import zim from "https://zimjs.org/cdn/016/zim_three"; // also imports three.js R155
import * as threejsObjectControls from 'https://cdn.jsdelivr.net/npm/threejs-object-controls@1.2.8/+esm';
const ObjectControls = threejsObjectControls.ObjectControls;
...
2 Likes
3

As of ZIM 016, ObjectControls are part of ZIM_three now... (thanks Pettis for the request). So you can use it directly without import:

https://zimjs.com/016/objectcontrols.html

But at first try... I could not rotate them around vertically either - but maybe there is a setting...

2 Likes
4

There might be a setting. I am pretty sure I was able to do full rotation. Will need to look at my notes / projects.

1 Like
5

I did find it. Try this:

controls.disableMaxVerticalAngleRotation()
2 Likes
6

Brilliant. Thank you Pettis and Abstract. The information is very much appreciated.

7

Hi all, found this solution on JSFiddle. The result is very responsive and very intuitive (and it doen't suffer with right and left drags being reversed at certain orientations).

3 Likes