在實現Three.js的軌道控件時如何修復黑色畫布？

Question

我正在學習three.js，到目前為止一切順利。 我設法在JS Fiddle中的畫布上編寫了一個多維數據集，但是當我嘗試使用Orbit Controls旋轉它時，它只是顯示了一個黑色畫布。

我嘗試在three.js網站上進行研究，並查看了Orbit Controls的其他工作示例，但沒有一個對我有用。

<script src='http://threejs.org/build/three.min.js'></script>
    <script src='http://threejs.org/examples/js/controls/OrbitControls.js'></script>

    <script>
    let container, renderer, scene, camera, controls;

        function init() {

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

  scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.z = 4;

        controls = new THREE.OrbitControls(camera, renderer.domElement);

        let geometry = new THREE.BoxGeometry(1, 1, 1);
        let material = new THREE.MeshBasicMaterial({color: 0x000000});
        let cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        window.addEventListener('resize', resizeFunction);
        }

        let resizeFunction = function() {
            let width = window.innerWidth;
            let height = window.innerHeight;
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
            renderer.setSize(width, height);
        }
        let animate = function() {
            controls.update();
            renderer.render(scene, camera);
            requestAnimationFrame(animate);
        }
        init();
        animate();
</script>

我找不到任何錯誤消息。 我希望輸出是在較淺背景下的完全旋轉的黑色立方體，但顯示的是全黑的屏幕。 我還多次檢查了我的代碼，但沒有發現任何問題。 希望你們能提供幫助！

Answer 1

似乎為我工作。

  let container, renderer, scene, camera, controls; function init() { renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xccccff); document.body.appendChild(renderer.domElement); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000); camera.position.z = 4; controls = new THREE.OrbitControls(camera, renderer.domElement); let geometry = new THREE.BoxGeometry(1, 1, 1); let material = new THREE.MeshBasicMaterial({color: 0x000000}); let cube = new THREE.Mesh(geometry, material); scene.add(cube); window.addEventListener('resize', resizeFunction); } let resizeFunction = function() { let width = window.innerWidth; let height = window.innerHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); } let animate = function() { controls.update(); renderer.render(scene, camera); requestAnimationFrame(animate); } init(); animate(); 

 <script src='http://threejs.org/build/three.min.js'></script> <script src='http://threejs.org/examples/js/controls/OrbitControls.js'></script>