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

我找到three.js的一个示例，我试图在<canvas></canvas>元素上实现它。我得到一个元素的引用，但我没有得到一个视觉效果。我有我的画布元素与“mycanvas”的Id。Three.js示例不显示在画布上

<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>

是否有任何理由不显示？我得到输出上的色彩提示（画布宽度和高度），但没有显示。任何想法将不胜感激

来源

2014-11-24 Dennington-bear

画布元素的子元素不可见。

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

canvas.appendChild(renderer.domElement);

这个：如果你改变这一行

document.body.appendChild(renderer.domElement);

你会得到期望的结果。

来源

2014-11-24 21:25:45 Tade0

有没有一种方法，我可以将这个然后坐在帆布顶我有？喜欢改变它相对于html页面的位置？ – 2014-11-24 21:40:29

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是您新创建的画布。这将取代画布标签。

现在你应该有申报单取代你的画布标记和图像视应在相同的位置，你有你的<canvas></canvas>标签

来源

2014-11-24 22:39:36

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

回答

相关问题