Question

我找到了一个three.js的例子，我试图在<canvas></canvas>元素上实现它。我得到了元素的引用，但我没有得到视觉效果。我的画布元素的ID为＆＃34; mycanvas＆＃34;。

<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提示输出（画布宽度和高度），但没有显示。任何想法将不胜感激

Answer 1

canvas元素的子元素不可见。

要解决此问题，请将渲染器DOM元素附加到其他DOM元素，例如文件正文。

如果你改变这一行：

canvas.appendChild(renderer.domElement);

到此：

document.body.appendChild(renderer.domElement);

您将获得所需的结果。

Answer 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></canvas>标签的位置相同

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

2 个答案: