FPS screen how to launch

FPS screen in code :

import Stats from 'three/addons/libs/stats.module.js';
... 
let stats, container;
... 
container = document.getElementById( 'container' );
... 
container.appendChild( renderer.domElement );
... 

stats = new Stats();
container.appendChild( stats.dom );
... 
stats.update();
                 

But this not working ;_;

All code:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - orbit controls</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
		<style>
			body {
				background-color: #ccc;
				color: #000;
			}

			a {
				color: #f00;
			}
		</style>
	</head>

	<body>
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - orbit controls
		</div>

		<!-- Import maps polyfill -->
		<!-- Remove this when import maps will be widely supported -->
		<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

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

		<script type="module">

			import * as THREE from 'three';

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

            import Stats from 'three/addons/libs/stats.module.js';

			let camera, controls, scene, renderer;
			let stats, container;

			init();
			//render(); // remove when using next line for animation loop (requestAnimationFrame)
			animate();

			function init() {
				container = document.getElementById( 'container' );

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x94afb5 );
				scene.fog = new THREE.FogExp2( 0x94afb5, 0.002 );

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );
                //container.appendChild( renderer.domElement );

				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.set( 400, 200, 0 );

				// controls

				controls = new OrbitControls( camera, renderer.domElement );
				controls.listenToKeyEvents( window ); // optional

				//controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)

				controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
				controls.dampingFactor = 0.05;

				controls.screenSpacePanning = false;

				controls.minDistance = 100;
				controls.maxDistance = 500;

				controls.maxPolarAngle = Math.PI / 2;

				// world
				     // рисую квадраты осей 
	
	//--------------Создаем объект-------------------
	const points = [];
    points.push(new THREE.Vector3(-10, 10, 0));
    points.push(new THREE.Vector3(10, 10, 0));
    points.push(new THREE.Vector3(10, -10, 0));
    points.push(new THREE.Vector3(-10, -10, 0));
    points.push(new THREE.Vector3(-10, 10, 0));
    const osxyMaterial = new THREE.LineBasicMaterial({ color: 0x7457bd, linewidth: 1 });
    const osxyGeometry = new THREE.BufferGeometry().setFromPoints(points);
    const osxy = new THREE.Line(osxyGeometry, osxyMaterial);
    scene.add(osxy);

	const points1 = [];
	points1.push(new THREE.Vector3(0, -10, 10));//Указываем вектор первой точки
	points1.push(new THREE.Vector3(0, 10, 10));//Указываем вектор второй точки
	points1.push(new THREE.Vector3(0, 10, -10));
	points1.push(new THREE.Vector3(0, -10, -10));
	points1.push(new THREE.Vector3(0, -10, 10));
    const osxzMaterial = new THREE.LineBasicMaterial({ color: 0x3d803d, linewidth: 1 });
    const osxzGeometry = new THREE.BufferGeometry().setFromPoints(points1);
    const osxz = new THREE.Line(osxzGeometry, osxzMaterial);
    scene.add(osxz);

    const points2 = []
    points2.push(new THREE.Vector3(-10, 0, 10));//Указываем вектор первой точки
	points2.push(new THREE.Vector3(10, 0, 10));//Указываем вектор второй точки
	points2.push(new THREE.Vector3(10, 0, -10));
	points2.push(new THREE.Vector3(-10, 0, -10));
	points2.push(new THREE.Vector3(-10, 0, 10));
    const osyzMaterial = new THREE.LineBasicMaterial({ color: 0xab5641, linewidth: 1 })
    const osyzGeometry = new THREE.BufferGeometry().setFromPoints(points2)
    const osyz = new THREE.Line(osyzGeometry, osyzMaterial)
    scene.add(osyz) 

				// lights

				const dirLight1 = new THREE.DirectionalLight( 0xffffff );
				dirLight1.position.set( 1, 1, 1 );
				scene.add( dirLight1 );

				const dirLight2 = new THREE.DirectionalLight( 0x002288 );
				dirLight2.position.set( - 1, - 1, - 1 );
				scene.add( dirLight2 );

				const ambientLight = new THREE.AmbientLight( 0x222222 );
				scene.add( ambientLight );

               // тут!!! статистика. 

				stats = new Stats();
				//container.appendChild( stats.dom );
                 
				//

				window.addEventListener( 'resize', onWindowResize );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				requestAnimationFrame( animate );

				controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true

				render();
				//stats.update();

			}

			function render() {

				renderer.render( scene, camera );

			}

		</script>

	</body>
</html> 

Is it because stats.update(); has been commented out in your animate-function? :thinking:

container=document.body.appendChild( renderer.domElement );
... 

stats = new Stats();
				container.appendChild( stats.dom );
... 
function animate() {

				requestAnimationFrame( animate );

				controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true

                stats.update();
                
				render();
				
			}

			function render() {
				
				stats.update();

				renderer.render( scene, camera );

			}

Why this not work???

Me:

Working example:

But code the same

What are the full path names of the HTML file of the non working example and of the working example? The importmap indicates they should be relatively at the same level of hierarchy, but this is not obvious in the snapshots.

Also, if you have access to the JS console, maybe there is some error message there?

Hot error. Library includes normal.

appendChild returns the appended child, which in this case is the <canvas/>-element of the WebGLRenderer. You can’t append other elements to a canvas. Try this instead:

document.body.appendChild( renderer.domElement );
document.body.appendChild( stats.dom );
2 Likes