I am facing some unusual behavior with my HTML5 Canvas (using Fabric.js) and a three.js object. When I use OrbitControls to rotate the 3D image, two strange things happen.
1) Drop down fields and dynamic sliders do not function properly while rotating
2) Moving an image on another canvas affects the movement of the 3D image in the three.js canvas. However, moving the 3D image does not have any impact on the image in the canvas.
If I disable or remove the rotation controls in the "Box Controller - Collada Files" controller, the dropdowns work correctly and there is no synchronization between the two images.
How can I prevent OrbitControls from interfering with dropdowns and other elements, as well as desynchronizing the movement between the image and the 3D object?
Below is a sample of my HTML:
<!DOCTYPE html>
<html lang="en" data-ng-app="appControllersBox">
... (HTML code continues)
Here is the content of my JS/Controllers2.js file which contains two Angular controllers:
'use strict';
var appControllersBox = angular.module('appControllersBox', ['colorpicker.module']);
// Box Controller - Canvas
appControllersBox.controller('canvasCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
... (Canvas controller code)
}]);
// Box Controller - Collada File
appControllersBox.controller('3dboxCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
... (Collada file controller code)
}]);