three.js OrbitControls conflicting with HTML5 Canvas?

Question

I have an HTML5 Canvas (using Fabric.js in this case) and a three.js object rendered out. When using OrbitControls to rotate my 3D image, two odd behaviors occur.

1) Drop down fields and dynamic sliders don't drop down or slide

2) When I have another canvas on the page, and move an image on that canvas, the 3D image in the three.js canvas moves in sync with the movement of the image. If I move the 3D image, the image in the canvas does not move in sync/is unaffected

If I comment out/ or remove my rotation controls in the "Box Controller - Collada Files" controller, the dropdowns work, and as expected, there is no "linked movement" between the image in a canvas and the 3D image rendered by three.js (most likely because the rotation controls are removed).

How do I get this so OrbitControls aren't stopping dropdowns and other items to function/de-sync the movement of an image with the 3D object?

Here is my sample HTML:




three.js webgl - loaders - collada loader






























    
        
            
                Select list

Here is my JS/Controllers2.js file (Note that there are two Angular controllers):

    'use strict';

var appControllersBox = angular.module('appControllersBox', ['colorpicker.module']);

// Box Controller - Canvas
appControllersBox.controller('canvasCtrl', ['$scope', '$timeout', function ($scope, $timeout) {

    // Canvas
    var canvas = new fabric.Canvas('c');

    // Add Text
    $scope.textMe = function () {
        var text = new fabric.IText('hello world', { left: 100, top: 100 });
        canvas.add(text);
    }

    // Load Image
    var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
    var ctx = canvas.getContext('2d');


    function handleImage(e) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var imgAdd = new Image();
            imgAdd.onload = function () {
                var img = new fabric.Image(imgAdd);
                canvas.add(img);
            }
            imgAdd.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);
    }
}]);


// Box Controller - Collada File
appControllersBox.controller('3dboxCtrl', ['$scope', '$timeout', function ($scope, $timeout) {

    // 3D Object
    var scene;
    var camera;
    var renderer;
    var box;
    var controls;

    // instantiate a loader
    var loader = new THREE.ColladaLoader();
    loader.options.convertUpAxis = true;
    loader.load('models/box.dae', function (collada) {

        box = collada.scene;

        box.traverse(function (child) {

            if (child instanceof THREE.SkinnedMesh) {

                var animation = new THREE.Animation(child, child.geometry.animation);
                animation.play();

            }
        });

        box.scale.x = box.scale.y = box.scale.z = .2;
        box.updateMatrix();

        init();
        animate();
    });


    function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(0xdddddd);
        renderer.setSize(window.innerWidth, window.innerHeight);

        // Load the box file
        scene.add(box);

        // Lighting
        var light = new THREE.AmbientLight();
        scene.add(light);

        // Camera
        camera.position.x = 40;
        camera.position.y = 40;
        camera.position.z = 40;

        camera.lookAt(scene.position);

        // Rotation Controls
        controls = new THREE.OrbitControls(camera);

        controls.rotateSpeed = 5.0;
        controls.zoomSpeed = 5;

        controls.noZoom = false;
        controls.noPan = false;

        $("#webGL-container").append(renderer.domElement);
    }

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }

}]);

WestLangley · Accepted Answer

If you are using OrbitControls or TrackballControls and the controls are interfering with other HTML elements, you need to add the domElement argument to the controls constructor:

controls = new THREE.OrbitControls( camera, renderer.domElement );

three.js .r71

three.js OrbitControls conflicting with HTML5 Canvas?

Answers (1)

Related Questions