div 中的 Three.js 对象具有禁用缩放、滚动/缩放文档的功能

Question

div 中的 Three.js 对象具有禁用缩放、滚动/缩放文档的功能

我开始学习 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>

Run Code Online (Sandbox Code Playgroud)

容器是 div，我想在其中放置对象（YT Cube）。该div的CSS：

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

Run Code Online (Sandbox Code Playgroud)

最后是 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);
}

Run Code Online (Sandbox Code Playgroud)

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

感谢您的解答

Answer 1

Mar*_*tin 5

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	9 年，6 月前
查看次数：	6044 次
最近记录：	9 年，6 月前