HTML page doesn't have <canvas> tag

Questions
1

The HTML code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            z-index: -1;
        }
    </style>
</head>
<body>

    <script type="module">
        import * as THREE from 'three';

        import { GLTFLoader } from "./examples/jsm/loaders/GLTFLoader";
        import { PerspectiveCamera } from "./src/cameras/PerspectiveCamera";
        // import { OrbitControls } from "./examples/jsm/controls/OrbitControls";

        let container;
        let renderer;

        init();
        animate();

        function init(){
            container = document.createElement( 'div' );
            document.body.appendChild( container );

            const scene = new THREE.Scene();
            scene.background = new THREE.Color( 0x999999 );
            loadmodel("model/","ball",{x:0, y:0, z:0});
            render();
            envLight();
        }

        function Camera(){
            let camera = new PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000);
            camera.position.z = 300;
        }

        function loadmodel(folder, name, position){
            const loader = GLTFLoader;
            loader.setPath(folder);
            loader.load(folder + name + ".obj", function (object){
                object.position.set(position.x, position.y, position.z);
                scene.add(object);
            });
        }

        function envLight(){
            const light = new THREE.AmbientLight( 0x0000ff, 0.5);

            scene.add(light);
        }

        function render(){
            renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );

            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFShadowMap;

            container.appendChild( renderer.domElement );
        }

        function animate() {

            requestAnimationFrame( animate );

            renderer.render(scene, camera);
        }
    </script>
</body>
</html>

The page is white and nothing shows. DevTool shows the page without <canvas> tag.
There’s renderer.setSize( window.innerWidth, window.innerHeight ); in Javascript already. But why does the page without <canvas> tag?
And the model which is loaded must have material? in other words, the model without meterial in 3D MAX or doesn’t set in Javascript can be shown?

2

There are a few errors in your code, after cleaning it loads a model:

when you load your model, the specifics of adding meshes to the scene are up to you ofc.

If you do not provide a material with your model it will be set to MeshStandardMaterial by default.

3

Thanks for your help, the canvas has shown. Now I know where the code goes wrong. There are errors in the loadmodel() function and didn’t call Camera function.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            z-index: -1;
        }
    </style>
</head>
<body>
	<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

	<script type="importmap">
		{
			"imports": {
				"three": "./build/three.module.js"
			}
		}
	</script>

    <script type="module">
        import * as THREE from 'three';

        import { GLTFLoader } from "./examples/jsm/loaders/GLTFLoader.js";
        import { PerspectiveCamera } from "./src/cameras/PerspectiveCamera.js";
     // import { OrbitControls } from "./examples/jsm/controls/OrbitControls";

        let scene, container, camera;
        let renderer, loader;

		init();
        animate();

        function init(){
            container = document.createElement( 'div' );
            document.body.appendChild( container );

            scene = new THREE.Scene();
            scene.background = new THREE.Color( 0x999999 );

           Camera();

           loadmodel("../model/","ball");

           envLight();

           render();
        }

        function Camera(){
            camera = new PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000);
            camera.position.z = 300;
        }
        function loadmodel(folder, name){
            loader = new GLTFLoader();
            loader.setPath(folder);
            loader.load(folder + name + ".glb", function (object){
                scene.add(object.scene);
                renderer.render(scene, camera);
            });
        }

        function envLight(){
            const light = new THREE.AmbientLight( 0x0000ff, 0.5);

            scene.add(light);
        }

        function render(){
            renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );

            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFShadowMap;

            container.appendChild( renderer.domElement );
        }

        function animate() {

            requestAnimationFrame( animate );

            renderer.render(scene, camera);
        }
    </script>
</body>
</html>