HTML element very slow on smartphones #1280

Zaniyar · 2023-02-10T00:07:46Z

Zaniyar
Feb 10, 2023

Is that normal that the HTML element is slowing down the app that much? I have like 3 HTML elements with iframes on them in my scene and the fps drops under 10. The same is also for other (other than iframe) elements, look at this Marker component:

import * as THREE from "three";
import { useState, useRef } from "react";
import { useFrame } from "@react-three/fiber";
import {Html} from "@react-three/drei";
import { FaMapMarkerAlt } from "react-icons/fa";

// Let's make the marker into a component so that we can abstract some shared logic
function MarkerCore({ children, ...props }) {
	const ref = useRef();
	// This holds the local occluded state
	const [isOccluded, setOccluded] = useState();
	const [isInRange, setInRange] = useState();
	const isVisible = isInRange && !isOccluded;
	// Test distance
	const vec = new THREE.Vector3();
	useFrame((state) => {
		const range =
			state.camera.position.distanceTo(ref.current.getWorldPosition(vec)) <= 10;
		ref.current.lookAt(state.camera.position);
		if (range !== isInRange) setInRange(range);
	});
	return (
		<group ref={ref} onClick={() => alert("here maybe?")}>
			<Html
				onClick={() => alert("no here?")}
				// 3D-transform contents
				transform
				// Hide contents "behind" other meshes
				occlude
				// Tells us when contents are occluded (or not)
				onOcclude={setOccluded}
				// We just interpolate the visible state into css opacity and transforms
				style={{
					transition: "all 0.2s",
					opacity: isVisible ? 1 : 0,
					transform: `scale(${isVisible ? 1 : 0.25})`,
				}}
				{...props}
			>
				{children}
			</Html>
		</group>
	);
}

import React from "react";

const Marker = ({ title, color, ...props }) => {
	return (
		<mesh {...props} onClick={() => alert("hello")}>
			<MarkerCore rotation={[0, 0, 0]} onClick={() => alert("maybe here?")}>
				<div className="techPointer">{title}</div>
				<FaMapMarkerAlt style={{ color: color }} />
			</MarkerCore>
		</mesh>
	);
};

export default Marker;

I have 4 of these Markers in the scene and the fps drops also under 10... Is that normal?

mkuba2006 · 2023-02-23T20:56:05Z

mkuba2006
Feb 23, 2023

This may be due to multiple files. When the page loads, it actually fetches the html elements, but those elements in this situation have "clicks" etc, so the search engine also has to fetch the contents of the .js files. So it's normal. It's best to refer to as few files as possible.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTML element very slow on smartphones #1280

{{title}}

Replies: 1 comment

{{title}}

Select a reply

HTML element very slow on smartphones #1280

Zaniyar Feb 10, 2023

Replies: 1 comment

mkuba2006 Feb 23, 2023

Zaniyar
Feb 10, 2023

mkuba2006
Feb 23, 2023