我有一个 HTML5 Canvas(在本例中使用 Fabric.js)和一个渲染出来的 three.js 对象。使用 OrbitControls 旋转我的 3D 图像时，会出现两种奇怪的行为。
1) 下拉字段和动态 slider 不下拉或滑动
2) 当我在页面上有另一个 Canvas 并在该 Canvas 上移动图像时，three.js Canvas 中的 3D 图像会与图像的移动同步移动。如果我移动 3D 图像， Canvas 中的图像不会同步移动/不受影响
如果我在“Box Controller - Collada Files” Controller 中注释掉/或删除我的旋转控件，下拉菜单会工作，并且正如预期的那样， Canvas 中的图像和呈现的 3D 图像之间没有“链接移动”通过 three.js(很可能是因为旋转控件被删除)。
我如何才能做到这一点，这样 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 文件(注意有两个 Angular Controller ):
'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);
}
}]);
最佳答案
如果您正在使用 OrbitControls 或 TrackballControls 并且这些控件会干扰其他 HTML 元素，您需要将 domElement 参数添加到控制构造函数:
controls = new THREE.OrbitControls( camera, renderer.domElement );
三.js.r71
关于javascript - three.js OrbitControls 与 HTML5 Canvas 冲突？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32151598/