Javascript Three.js示例未显示在画布上

我找到了three.js的一个示例，并试图在

元素上实现它。 我得到了对元素的引用，但我没有得到视觉效果。我的canvas元素的Id为“mycanvas”

我在主体中使用了一个名为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>

函数WebGLStart（）
{
//获取画布和上下文
var canvas=document.getElementById（'mycanvas'）；
var canvas_context=canvas.getContext（“webgl”）；
console.log（“Canvas:+Canvas.width”）；
console.log（“Canvas:+Canvas.height”）；
变量RENDER_DIST=1000，
FOV=75；
var WIDTH=canvas.WIDTH，
高度=画布高度；
var scene=new THREE.scene（）；
var摄像机=新的三视角摄像机（视野，宽度/高度，0.1，渲染距离）；
摄像机位置z=100；
场景。添加（摄影机）；
renderer=new THREE.WebGLRenderer（）；
设置大小（宽度、高度）；
log（“R info:+renderer.info”）；
canvas.appendChild（renderer.domeElement）；
init（）；
loopRun（）；
函数init（）
{
var几何=新的三个。球墨法（50）；
var material=new THREE.MeshBasicMaterial（{color:0xff0000}）；
var sphere=新的三个网格（几何体、材质）；
场景。添加（球体）；
}
函数loopRun（）
{
requestAnimationFrame（loopRun）；
渲染器。渲染（场景、摄影机）；
}
}

有什么理由不显示这个吗？

---

我在chromes提示符（画布宽度和高度）上获得输出，但没有显示。任何想法都值得欣赏

canvas元素的子元素不可见

要解决此问题，请将renderer DOM元素附加到其他一些DOM元素，例如文档体

如果更改此行：

canvas.appendChild(renderer.domElement);

为此：

document.body.appendChild(renderer.domElement);

---

您将获得所需的结果。

canvas元素的子元素不可见

要解决此问题，请将renderer DOM元素附加到其他一些DOM元素，例如文档体

如果更改此行：

canvas.appendChild(renderer.domElement);

为此：

document.body.appendChild(renderer.domElement);

---

您将获得所需的结果。

Tade0在上述答案中是正确的！这是为像我这样的人准备的，他们有一个

标签，现在必须删除它。
我是第一个这样做的：
实现一个样式标记，并将您的类称为独一无二的：

<style>

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

其中canvas是您新创建的画布。 这将替换画布标记

---

现在，您应该已经用div替换了画布标记，并且图像视口应该位于与您使用

标记的位置相同的位置，Tade0在上面的答案中是正确的！这是为像我这样的人准备的，他们有一个

标签，现在必须删除它。
我是第一个这样做的：
实现一个样式标记，并将您的类称为独一无二的：

<style>

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

其中canvas是您新创建的画布。 这将替换画布标记

---

现在，您应该已经用div替换了画布标记，并且图像视口应该与您使用

标记的位置相同，是否有办法将其移动到画布顶部？想改变它相对于html页面的位置吗？有没有办法把它移动到画布上？是否要更改其相对于html页面的位置？