ZimJS and Three

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

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;

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


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


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

I did find it. Try this:


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

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).