(three.js)

Question

我有一个问题，我搜索了一下，但什么也没找到。

你能解释一下如何在手机上滚动画布吗？我的意思是，我正在制作一个网站，我的一个部分有canvas标签，我用three.js制作了一个动画，但在canvas中滚动在触摸屏上不起作用。

下面是关于我的动画的代码。

​

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
var cameraPosition = camera;

cameraPosition.position.set(100,0, 120);



var renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas: document.getElementById("viewport")
});
renderer.setClearColor(0xffffff);
var canvas = renderer.domElement
render();

function render() {
    if (resize(renderer)) {
        camera.aspect = canvas.clientWidth / canvas.clientHeight;
        camera.updateProjectionMatrix();
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

function resize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
        renderer.setSize(width, height, false);
    }
    return needResize;
}
camera.lookAt(100,0,-120);

window.addEventListener( 'resize', function() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight )
})

var controls = new THREE.OrbitControls(camera, renderer.domElement);
// to disable zoom
controls.enableZoom = false;

// to disable rotation
controls.enableRotate = false;

// to disable pan
controls.enablePan = false;


var spotLight = new THREE.SpotLight( 0xffffbb );
spotLight.position.set( 10, 10, 150 );
scene.add( spotLight );


var loader = new THREE.GLTFLoader();

loader.load( './iphonex/out.glb', function ( gltf ) {

    var object = gltf.scene;
    object.position.set(0,0, 0);


    scene.add( gltf.scene );
    animation();

    function animation() {

        renderer.render(scene,camera);
        requestAnimationFrame(function () {
            animation();
        })
    }
    function updateCamera() {
        object.rotation.y = 0.1 + window.scrollX * Math.PI / 360;

    }

    window.addEventListener("scroll", updateCamera);

    // controls.noRotate = true;
    // controls.noZoom = true;
    // window.addEventListener('scroll', onscroll
    // , false);
    // window.addEventListener('wheel', onscroll, false);    var animate = function () {
    //     requestAnimationFrame(animate);
    //     renderer.render(scene, camera);
    // }

}, undefined, function ( error ) {

    console.error( error );

} );

​

Answer 1

scroll事件的工作方式与您在移动设备上预期的不同。javascript scroll event for iPhone/iPad?