Проецируя HTML на экран в трех ⇐ Html

[Anonymous]

У меня есть экран, определяемый как < /p>
import React, { useRef, useEffect } from "react";
import * as THREE from 'three';
import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';

interface ScreenProps {
position: [number, number, number];
}

const Screen: React.FC = ({ position }) => {
const screenRef = useRef(null);
const cssRenderer = new CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);

useEffect(() => {
const myElement = document.createElement("div");
myElement.innerHTML = "Hello, World!";
myElement.style.width = "200px";
myElement.style.height = "100px";
myElement.style.background = "black";
myElement.style.color = "black";
myElement.style.textAlign = "center";
myElement.style.lineHeight = "100px";
const object = new CSS3DObject(myElement);
object.position.set(position[0], position[1], position[2]);

if (screenRef.current) {
screenRef.current.add(object);
}

return () => {
if (screenRef.current) {
screenRef.current.remove(object);
}
};
}, [position]);

return ;
};

export default Screen;

< /code>
, который я хочу отобразить плоские на экране, определенном в офисе FC: < /p>
import React, { useRef } from 'react';
import { useGLTF, Html } from '@react-three/drei';
import { a } from '@react-spring/three';
import Hitbox from '../Hitbox';
import Screen from '../Screen';

import officeDraco from '../../assets/3d/office_draco.glb';

// Path to Draco decoder files
const dracoDecoderPath = '/path_to_draco_decoder/';

export const Office: React.FC void }> = ({ onDeskClick }) => {
const { nodes, materials } = useGLTF(officeDraco) as any;

const monitorPosition = nodes.Cube009_2?.position || [0, 0, 0];
console.log(monitorPosition)

return (
{/* ...... */}
{/* Monitor 1 Screen */}










{/* Monitor 2 Screen */}




{/* ...... */}
)
}

useGLTF.preload('/office_draco.glb')

export default Office
< /code>
В настоящее время на экране оба не отображаются сообщение «Hello World» (вместо этого показывают копию того, что видно в окне), но также перпендикулярно сетке, о которой она должна сидеть ? Как я могу это исправить? 0, 0]}, однако он не сидит в нужном месте. Я ожидаю, что экран будет наложен на соответствующую сетку, представляющую экран компьютера.

Подробнее здесь: https://stackoverflow.com/questions/794 ... in-threejs