javascript - Three.js 示例未显示在 Canvas 上

Question

我找到了一个 Three.js 的例子，我正在尝试在 <canvas></canvas> 上实现它。元素。 我得到了对该元素的引用，但没有得到视觉效果。我的 Canvas 元素的 ID 为“mycanvas”。

<canvas id="mycanvas" style="border: 5px solid white" width="600" height="500"></canvas>

我在主体中使用了一个名为 WebGLStart() 的 onload 函数，它调用下面的脚本。

   <script>
        function WebGLStart()
        {
            //Get the canvas and the context
            var canvas = document.getElementById('mycanvas');
            var canvas_context = canvas.getContext("webgl");
            console.log("Canvas: "+canvas.width);
            console.log("Canvas: "+canvas.height);

            var RENDER_DIST = 1000,
                FOV = 75;

            var WIDTH = canvas.width,
                HEIGHT= canvas.height;

            var scene = new THREE.Scene();


            var camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, 0.1, RENDER_DIST);

            camera.position.z = 100;

            scene.add(camera);

            renderer = new THREE.WebGLRenderer();
            renderer.setSize(WIDTH,HEIGHT); 
            console.log("R info: "+renderer.info);

            canvas.appendChild(renderer.domElement);

            init();
            loopRun();

            function init() 
            {
                var geometry = new THREE.SphereGeometry(50); 
                var material = new THREE.MeshBasicMaterial({color: 0xff0000}); 
                var sphere = new THREE.Mesh(geometry, material); 
                scene.add(sphere);
            }

            function loopRun() 
            {
                requestAnimationFrame(loopRun);
                renderer.render(scene, camera);
            }
        }
    </script>

有什么原因导致这个不显示吗？ 我在 chromes 提示上得到输出( Canvas 宽度和高度)，但没有显示。任何想法将不胜感激

Answer 1

canvas 元素的子元素不可见。

为了解决这个问题，将渲染器 DOM 元素附加到其他一些 DOM 元素，例如文档正文。

如果您更改此行:

canvas.appendChild(renderer.domElement);

对此:

document.body.appendChild(renderer.domElement);

您将得到想要的结果。