three.js OrbitControls與HTML5 Canvas衝突？

我有一個HTML5畫布（在這種情況下使用Fabric.js）和一個three.js對象渲染出來。當使用OrbitControls旋轉我的3D圖像時，會出現兩個奇怪的行爲。three.js OrbitControls與HTML5 Canvas衝突？

1）下拉字段和動態滑塊降不下來或滑動

2）當我在頁面上其他畫布，以及帆布，在three.js所的3D圖像上移動圖像畫布與圖像的移動同步移動。如果我移動3D圖像，畫布中的圖像不會同步移動/不受影響

如果我在「Box Controller - Collada文件」控制器中註釋掉或刪除了我的旋轉控件，則可以使用下拉菜單，並且正如預期的那樣，畫布中的圖像和由three.js渲染的3D圖像（很可能是因爲旋轉控件被移除）之間沒有「鏈接運動」。

我該如何獲得這個，OrbitControls不會停止下拉菜單和其他項目以使用3D對象運行/解除同步圖像的移動？

這裏是我的示例HTML：

<!DOCTYPE html> 
<html lang="en" data-ng-app="appControllersBox"> 
<head> 
<title>three.js webgl - loaders - collada loader</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 

<!-- Core files (jQuery, Angular, etc.) --> 
<script src="js/scripts/jquery-2.1.4.min.js"></script> 
<!-- Switch to AngularUI if appropriate --> 
<script src="js/scripts/bootstrap.min.js"></script> 
<script src="js/scripts/angular.min.js"></script> 

<!-- Three.js: http://threejs.org/ --> 
<script src="js/scripts/three.min.js"></script> 
<script src="js/scripts/ColladaLoader.js"></script> 
<script src="js/scripts/OrbitControls.js"></script> 

<!-- Fabric.js: http://fabricjs.com/ --> 
<script src="js/scripts/fabric.min.js"></script> 

<!-- Color Picker JS: https://github.com/buberdds/angular-bootstrap-colorpicker --> 
<script src="js/scripts/bootstrap-colorpicker-module.min.js"></script> 

<!-- Angular App Specific Files --> 
<script src="js/controllers/controllers2.js"></script> 

<!-- CSS Files --> 
<link href="css/bootstrap.min.css" rel="stylesheet" /> 
<link href="css/colorpicker.min.css" rel="stylesheet" /> 
</head> 

<body> 
<div data-ng-controller="canvasCtrl"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <p> 
       <label>Select list</label> 
       <select id="myList"> 
        <option value="1">one</option> 
        <option value="2">two</option> 
        <option value="3">three</option> 
        <option value="4">four</option> 
       </select> 

      </p> 
      <p> 
       <input type="file" id="imageLoader" name="imageLoader" /> 
       <button id="textCreate" class="primaryButton" data-ng-click="textMe()"> 
        Create Text 
       </button> 
      </p> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <canvas id="c" style="border:5px solid" height="1023px" width="772px"></canvas> 
    </div> 
</div> 
<div class="col-md-12" data-ng-controller="3dboxCtrl"> 
    <div id="webGL-container"> 
    </div> 
</div> 
</body> 
</html>

這裏是我的JS/Controllers2.js文件（請注意，有兩個角控制器）：

'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); 
    } 

}]);

來源

2015-08-22 Kode

嘗試'控制=新THREE.OrbitControls（相機，renderer.domElement）;' – WestLangley

這做到了！有道理我需要瞄準dom元素 – Kode

如果您正在使用OrbitControls或TrackballControls並且這些控件正在干擾其他HTML元素，則需要將domElement參數添加到控件構造函數中：

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

個

three.js所.r71

來源

2015-08-22 04:27:24 WestLangley

three.js OrbitControls與HTML5 Canvas衝突？

回答

相關問題