Three.js 示例未在画布上显示答案

【问题标题】：Three.js example not displaying on canvasThree.js 示例未在画布上显示
【发布时间】：2015-01-22 17:04:12
【问题描述】：

我找到了 three.js 的示例，我正在尝试在 <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 提示（画布宽度和高度）上得到输出，但没有显示。任何想法将不胜感激

【问题讨论】：

标签： javascript html google-chrome canvas three.js

【解决方案1】：

canvas 元素的子元素不可见。

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

如果你改变这一行：

canvas.appendChild(renderer.domElement);

到这里：

document.body.appendChild(renderer.domElement);

你会得到想要的结果。

【讨论】：

有没有办法可以移动它然后坐在我拥有的画布上？想改变它相对于 html 页面的位置？

【解决方案2】：

Tade0 在上面的答案中是对的！这适用于像我一样拥有<canvas></canvas> 标签但现在必须删除它的人。
我的做法是先：
实现一个样式标签并将你的类称为独特的东西：

<style>

    canvas_for_three { 
          width: 600px; 
          height: 500px;
          border: 1px solid white;
          position: absolute;
          left: 0px;
          top: 0px;
          z-index: -1;
    }
  </style>

接下来删除您的 <canvas></canvas> 标签并将其替换为：

<div id="ctx" class="canvas_for_three">
</div>

从这里开始，在你的 onload 函数中使用
var canvas = document.getElementById('ctx');
因此，当您将渲染附加到 DOM 元素时，它现在是：

canvas.appendChild(renderer.domElement);

canvas 是您新创建的画布。这将替换画布标签。

现在您应该已经用 div 替换了您的画布标签，并且图像视口应该与您的 <canvas></canvas> 标签位置相同

【讨论】：