个人中心
gpt4 book ai didi

javascript - three.js OrbitControls 与 HTML5 Canvas 冲突？

转载 作者：行者123 更新时间：2023-11-30 10:00:03 26 4
gpt4 key购买 nike

我有一个 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/

26 4 0
文章推荐： javascript - 使用 R 和 googleVis 在 TreeMap 中自定义工具提示
文章推荐： machine-learning - 如何在 ML 中保存特征工程模型
文章推荐： python - Python 的批量梯度下降不收敛
文章推荐： javascript - 在 JavaScript 中加载平铺图像并将其绘制到 Canvas
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com