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

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

javascript three.js

Javascript div中的Three.js对象w/禁用缩放、滚动/缩放文档,javascript,three.js,Javascript,Three.js,我开始学习three.js，现在需要帮助。我正在尝试在div中设置场景（不在完整文档中），而不进行缩放，可以选择通过鼠标滚轮滚动文档并缩放文档。所以我把它放到我的div中，现在它就在那里了，但鼠标滚轮在整个文档中放大对象，我只能通过箭头或滚动条滚动。例如，我尝试了一个已完成的示例—Youtube。它有点像youtube视频中的立方体。我又添加了两个视频，所以现在是立方体。顺便说一下，还有一个问题。如果文档大小已更改，则对象开始具有绝对位置，并且场景位于整个文档中 <!DOCTYPE htm

我开始学习three.js，现在需要帮助。我正在尝试在div中设置场景（不在完整文档中），而不进行缩放，可以选择通过鼠标滚轮滚动文档并缩放文档。所以我把它放到我的div中，现在它就在那里了，但鼠标滚轮在整个文档中放大对象，我只能通过箭头或滚动条滚动。例如，我尝试了一个已完成的示例—Youtube。它有点像youtube视频中的立方体。我又添加了两个视频，所以现在是立方体。顺便说一下，还有一个问题。如果文档大小已更改，则对象开始具有绝对位置，并且场景位于整个文档中

<!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>

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

总结：移除场景的缩放，添加滚动文档的选项，将选项添加到缩放文档，修复场景的视图窗口，如果可能的话，加速加载

谢谢你的回答

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

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

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