CODEWITHSUNDEEP
javascripthtmlgoogle-chromecanvasthree.js
Dennington-bear
Dennington-bear

Reputation: 1782

Three.js example not displaying on canvas

i found an example of three.js and I am trying to implement it on a <canvas></canvas> element. I get a reference to the element but I dont get a visual. I have my canvas element with the Id of "mycanvas".

<canvas id="mycanvas" style="border: 5px solid white" width="600" height="500"></canvas>

an I use an onload function in the body called WebGLStart() which calls the script below.

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

Is there any reason why this would not display? I get outputs on chromes prompt(canvas width and height) but no display. any ideas would be appreciated

Upvotes: 0

Views: 2945

Answers (3)

Caminolover
Caminolover

Reputation: 1

I did struggle with similar issues.

Things did not work as expected, Canvas was totally ignored, and CSS for the canvas was also ignored.

My solution:

// get data from Canvas
const canvas = document.querySelector('#id3DCanvas');


// Create a basic perspective camera
// var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var camera = new THREE.PerspectiveCamera( 75, canvas.clientWidth/canvas.clientHeight, 0.1, 1000 );
camera.position.z = 4;

// Create a renderer with Antialiasing
  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});

// Configure renderer clear color
renderer.setClearColor("#000000");

// Configure renderer size
// renderer.setSize( window.innerWidth/2, window.innerHeight/2);
renderer.setSize( canvas.clientWidth, canvas.clientHeight);
// Append Renderer to DOM


document.getElementById("id_canvasdiv").appendChild( renderer.domElement );
// document.body.appendChild( renderer.domElement );
#id3DCanvas { width: 500px; height: 1000px }
  <div id="id_canvasdiv">
      <canvas id="id3DCanvas"></canvas>
    </div>

This works as I did expect: the three.js graphics are inside the canvas. the size of the canvas can be adjusted by CSS.

Upvotes: 0

Dennington-bear
Dennington-bear

Reputation: 1782

Tade0 was right in the above answer! This is for people who like me had a <canvas></canvas> tags and now have to remove it.
The way I did it was first:
Implement a style tag and call your class something unique:

<style>

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

Next remove your <canvas></canvas> tags and replace them with:

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

From here then on in your onload function use the
var canvas = document.getElementById('ctx');
So when your attaching the render to a DOM element it is now:

canvas.appendChild(renderer.domElement);

Where canvas is your newly created canvas. This will replace the canvas tags.

Now you should have replaced your canvas tags with divs and the image viewport should be in the same position as where you had your <canvas></canvas> tags

Upvotes: 0

Tade0
Tade0

Reputation: 141

Child elements of the canvas element are not visible.

To solve this attach the renderer DOM element to some other DOM element, e.g. document body.

if you change this line:

canvas.appendChild(renderer.domElement);

to this:

document.body.appendChild(renderer.domElement);

You'll get the desired result.

Upvotes: 4

Related Questions