FPS screen how to launch

Questions
,
1

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

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

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

Screenshot_20230427-180322
Screenshot_20230427-1803221080Γ—2460 116 KB

Working example:

Screenshot_20230427-180427
Screenshot_20230427-1804271080Γ—2460 211 KB

But code the same

4

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?

5

Hot error. Library includes normal.

Screenshot_20230427-214331
Screenshot_20230427-2143311080Γ—2460 150 KB

6

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