Question

我使用缩放TrackballControls.js测试了Three.js一个简单的场景，它在FireFox中工作得很好

只需轻轻一按滚动滚轮，对象就会在黑屏中消失：

铬
戏
IE-11
Microsoft Edge
Safari - 完全没有工作!!!：＃

Correct code example, the same behavior in all browsers :

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Scene TrackballControls </title>

    <style>
        body {
            margin: 0; 

        }
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

    <script src="js/three.min.js"></script>
    <script src="js/TrackballControls.js"></script>

    <script>

        var camera, controls, scene, renderer;

        init();
        animate();

        function init(){
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000);<!-- set the far property of  camera to a greater value.-->
            camera.position.z = 500;

            controls = new THREE.TrackballControls( camera );
            controls.addEventListener( 'change', render );

            scene = new THREE.Scene();

            var geometry = new THREE.CubeGeometry(100, 100, 100, 5, 5, 5, 5);
            //var material = new THREE.MeshNormalMaterial();
            var material = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});

            var cube = new THREE.Mesh(geometry, material);
            scene.add(cube);

            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
        }

        function animate() {
            requestAnimationFrame( animate );
            controls.update();
        }

        function render() {
            renderer.render(scene, camera);
        }



    </script>
</body>
</html>

尝试更改TrackballControls =功能：

 . this.rotateSpeed = 1.0;
 . this.zoomSpeed = 1.2;
 . this.panSpeed = 0.3;

完全没用。

所以，我的问题是，这个问题的可能原因是什么？如果有人遇到类似的问题，请分享您的想法如何解决这个问题。谢谢！

使用缩放鼠标滚轮在Chrome中无效的Three.js场景

0 个答案: