I’m developing a web site with several different modes of display in one dedicated area. My problem is displaying a graphic using threejs functions. The following describes the basic plan and the problem.
Clicking on a tab labeled ‘Welcome’ generates (via the event listener) a drop down list of JPEG image titles. If user clicks on one, the list disappears and the corresponding image is displayed in a newly-generated canvas element using the context.drawImage() method.
If the user clicks on the ‘Tales’ tab, a list of text titles are displayed and a click on one causes an HTML iframe node to be created in the same
Clicking on the ‘Animations’ tab creates a canvas again but with two different results. The 2D figures are drawn using the Canvas functions described, for example, here:
I am trying to install a 3D test case using this example:
The example runs fine as a stand-alone function in a dedicated window. But here’s my problem: I can’t get it to run in the canvas element within the larger program. In my main HTML one
Part of the problem is my confusion over explicit use of the canvas value (see
https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html) and implicit use via this:
document.body.appendChild( renderer.domElement );
However, in my attempt to use the example from threejsfundamentals.org I get exactly the same unresponsive result.
Thanks for reading this far.