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示例不顯示在畫布上

回答

相關問題