个人中心
gpt4 book ai didi

javascript - div 中的 Three.js 对象可禁用缩放、滚动/缩放文档

转载 作者：行者123 更新时间：2023-11-28 18:34:29 29 4
gpt4 key购买 nike

我开始学习 Three.js，现在需要帮助。我正在尝试在 div 中设置场景(在完整文档中没有)，无需缩放，可以选择通过鼠标滚轮滚动文档并缩放文档。所以我将它放入我的 div 中，现在它就在那里，但是鼠标滚轮正在放大整个文档中的对象，我只能通过箭头或滚动条滚动。例如，我尝试了完成的示例之一 - Youtube。它类似于带有 YouTube 视频的 Cube。我又添加了 2 个视频，所以现在它是立方体了。顺便说一句，还有下一个问题。如果文档的大小已更改，则对象开始具有绝对位置，并且场景位于整个文档中。

<!DOCTYPE html>
<html lang="sk-SK">
<head><meta charset="UTF-8"><title>Test</title>
    <script type="text/javascript" src="/kla/script/lib/three.js/build/three.js"></script>
    <script type="text/javascript" src="/kla/script/lib/three.js/controls/TrackballControls.js"></script>
    <script type="text/javascript" src="/kla/script/lib/three.js/renderers/CSS3DRenderer.js"></script>
</head><body>
    ...
    <section>
        <div id="container"></div>
        <div id="blocker"></div>
    </section>
    ...
    <script type="text/javascript" src="js/youtubeCube.js"></script>
</body></html>

Container 是 div，我想在其中放置对象(YT Cube)。该div的CSS:

div#container{
    width: 350px;
    height: 300px;
    background-color: gray;}

最后是 JS 文件:

var camera, scene, renderer;

var Element = function(id, x, y, z, ry, rx)
{
    var div = document.createElement('div');
    div.style.width = '480px';
    div.style.height = '480px';
    div.style.backgroundColor = '#000';

    var iframe = document.createElement('iframe');
    iframe.style.width = '480px';
    iframe.style.height = '480px';
    iframe.style.border = '0px';
    iframe.src = ['http://www.youtube.com/embed/', id, '?rel=0'].join('');
    div.appendChild(iframe);

    var object = new THREE.CSS3DObject(div);
    object.position.set(x,y,z);
    object.rotation.y = ry;
    object.rotation.x = rx;

    return object;
};

init();
animate();

function init()
{
    var container = document.getElementById('container');

    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 5000);
    camera.position.set(500,350,750);

    scene = new THREE.Scene();

    renderer = new THREE.CSS3DRenderer();
    renderer.setSize(document.getElementById('container').offsetWidth, document.getElementById('container').offsetHeight);
    renderer.domElement.style.position = 'relative';
    renderer.domElement.style.top = 0;

    container.appendChild(renderer.domElement);

    var group = new THREE.Group();
    group.add(new Element('', 0, 0, 240, 0, 0));
    group.add(new Element('', 240, 0, 0, Math.PI/2, 0));
    group.add(new Element('', 0, 0, -240, Math.PI, 0));
    group.add(new Element('', -240, 0, 0, -Math.PI/2, 0));
    group.add(new Element('', 0, 240, 0, 0, -Math.PI/2));
    group.add(new Element('', 0, -240, 0, 0, Math.PI/2));
    scene.add(group);

    controls = new THREE.TrackballControls(camera);

    window.addEventListener('resize', onWindowResize, false);

    var blocker = document.getElementById('blocker');
    blocker.style.display = 'none';

    document.addEventListener('mousedown', function(){blocker.style.display = '';});
    document.addEventListener('mouseup', function(){blocker.style.display = 'none';});
}

function onWindowResize()
{
    camera.aspect = window.innerWidth/window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

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

摘要:删除场景的缩放，添加滚动文档的选项，添加缩放文档的选项，修复场景的 View 窗口，如果可能的话 - 加速加载

谢谢各位的解答

最佳答案 

controls.noPan = true;
controls.maxDistance = controls.minDistance = yourfixeddistnace;  
controls.noKeys = true;
controls.noRotate = true;
controls.noZoom = true;

要在鼠标位于 3D 场景 Canvas 中时启用滚动文档，请从 Canvas 中删除事件监听器，或添加滚动到事件监听器的功能。

关于javascript - div 中的 Three.js 对象可禁用缩放、滚动/缩放文档，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37378584/

29 4 0
文章推荐： javascript - 使用ajax加载xml内容
文章推荐： javascript - 如何用javascript捕获url字符串的一部分
文章推荐： python - Django Postgres 导入错误 : is the server running locally and accepting connections on Unix domain socket?
文章推荐： javascript - 无法使用 jQuery 访问 HTML 元素的后代
行者123
个人简介

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

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