javascript - 当 OrbitControls.js 工作正常时，图像 FlyControls.js three.js 不出现

问题描述

我正在尝试使用基于threejs webGL 的FlyControls.js 来移动3D 对象。对于 OrbitControls.js，这可以正常工作，但是当使用 FlyControls.js 时，3D 对象不会出现。我在 FlyControls.js 的左侧按钮中添加了一条控制台日志消息，该消息出现在控制台中。

<!DOCTYPE html>
<html lang="en">
    <head>
    <title>3D test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #000;
            color: #fff;
            margin: 0px;
            overflow: hidden;
        }
        #info {
            color: #fff;
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            z-index: 100;
            display:block;
        }
        #info a {
            color: #75ddc1;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <script src="js/three.min.js"></script>
    <script src="js/controls/OrbitControls.js"></script>
    <script src="js/controls/FlyControls.js"></script>
    <script src="js/loaders/GLTFLoader.js"></script>

    <script src="js/pmrem/PMREMGenerator.js"></script>
    <script src="js/pmrem/PMREMCubeUVPacker.js"></script>

    <script src="js/WebGL.js"></script>
    <script src="js/libs/stats.min.js"></script>
    <script>
        if ( WEBGL.isWebGLAvailable() === false ) {
            document.body.appendChild( WEBGL.getWebGLErrorMessage() );
        }
        var container, stats, controls;
        var camera, scene, renderer;
        init();
        animate();
        
        function init() {
            container = document.createElement( 'div' );
            document.body.appendChild( container );
            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 2000 );
            camera.position.set( - 18, 0.0, 0.0 );
            controls = new THREE.FlyControls( camera );
            //controls = new THREE.OrbitControls( camera ); this works

            //controls.target.set( 0,0, 0 );
            controls.update();
            scene = new THREE.Scene();
            
            //var geometry = new THREE.BoxGeometry( 1, 1, 1 );
            //var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            //var cube = new THREE.Mesh( geometry, material );
            //scene.add( cube );                            
            
            var loader = new THREE.GLTFLoader().setPath( 'glTF/' );
                loader.load( 'Image3D_WP6.glb', function ( gltf ) {
                    gltf.scene.traverse( function ( child ) {
                        if ( child.isMesh ) {
                            console.log("glTF: mesh found");
                        } else {
                            console.log("glTF: non-mesh object found");
                        }
                        scene.add( gltf.scene );
                        console.log("glTF: scene added");
                        gltf.scene; // THREE.Scene
                        gltf.scenes; // Array<THREE.Scene>
                        gltf.cameras; // Array<THREE.Camera>
                        gltf.asset; // Object
                    } );
                    

                } );
            
            var light = new THREE.AmbientLight( 0x404040 ); // soft white light
            scene.add( light );
            
            var directionalLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
            directionalLight.position.set(-10.0, 100.0, 0.0);
            scene.add( directionalLight );
            
            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.gammaOutput = true;
            container.appendChild( renderer.domElement );
            window.addEventListener( 'resize', onWindowResize, false );                             
        }
        
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
            console.log("resize");
        }
        
        function animate() {
            requestAnimationFrame( animate );
            renderer.render( scene, camera );
        }
    </script>
</body>

FlyControls.JS https://www.hoopla.la/webgl/01/examples/js/controls/FlyControls.js

标签： javascriptthree.js

javascript - 当 OrbitControls.js 工作正常时，图像 FlyControls.js three.js 不出现

问题描述

解决方案

推荐阅读