Question

我开始学习three.js，现在我需要帮助。我正在尝试在div中设置我的场景（没有在完整文档中）而不进行缩放，可以通过鼠标滚轮和缩放文档滚动文档。所以我将它放入我的div中，现在它就在那里，但是鼠标滚轮在整个文档中缩放对象，我只能通过箭头或滚动条滚动。例如，我尝试了一个完成的例子 - Youtube。有点像Cube和youtube的视频。我在那里添加了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>

容器是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);
}

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

感谢您的回答

Answer 1

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

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

div中的Three.js对象w /禁用缩放，滚动/缩放文档

1 个答案: