In this code, a Three.js 3D scene is created with a perspective camera positioned above the scene, allowing for an immersive view of the objects. A WebGL renderer is initialized to display the graphics on the webpage, and the renderer’s canvas is appended directly to the body for visibility. A Computer class instance is used to render HTML content, including a button and a paragraph, on a CSS3D screen, which is positioned at the center of the scene. Additionally, a green cube is added to the scene as a 3D object. To enhance user interaction, OrbitControls are implemented, enabling the camera to orbit around the scene based on mouse movements, with damping for smoother transitions. An animation loop continuously updates the controls and renders the scene, providing a dynamic and interactive 3D experience.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Example</title>
<style>
body {
margin: 0;
user-select: none; /* Prevents text selection */
overflow: hidden; /* Prevents scrolling */
}
#container {
position: relative;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="module" src="script.js"></script>
</body>
</html>
script.js :
import * as THREE from 'https://cdn.skypack.dev/[email protected]';
import { OrbitControls } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js';
import Computer from './computer.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 10);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
const container = document.getElementById('container');
container.style.position = 'relative';
container.appendChild(renderer.domElement);
const htmlCode = `
<button> Hello </button>
<p>Hello</p>
`;
const computer = new Computer(container);
const screen = new Computer.Screen(htmlCode, 1);
screen.position.set(0, 0, 0);
scene.add(screen);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Set up OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true; // Allow zooming
controls.enablePan = true; // Allow panning
controls.screenSpacePanning = false;
controls.maxPolarAngle = Math.PI / 2;
function animate() {
requestAnimationFrame(animate);
controls.update(); // Update controls
renderer.render(scene, camera);
computer.render(scene, camera);
}
animate();
// Handle window resizing
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
computer.js :
import { CSS3DRenderer, CSS3DObject } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/renderers/CSS3DRenderer.js';
class Screen extends CSS3DObject {
constructor(htmlContent, scale) {
scale = scale / 50;
const div = document.createElement('div');
div.innerHTML = htmlContent;
div.style.width = '800px';
div.style.height = '450px';
div.style.fontSize = '16px';
div.style.background = 'rgba(255, 255, 255, 0.8)';
div.style.border = '1px solid #000';
div.style.padding = '10px';
div.style.boxSizing = 'border-box';
super(div);
this.scale.set(scale, scale, scale);
}
}
class Computer {
constructor(rendererDomElement) {
this.cssRenderer = new CSS3DRenderer();
this.cssRenderer.setSize(window.innerWidth, window.innerHeight);
this.cssRenderer.domElement.style.position = 'absolute';
this.cssRenderer.domElement.style.top = 0;
rendererDomElement.appendChild(this.cssRenderer.domElement);
}
render(scene, camera) {
this.cssRenderer.render(scene, camera);
}
static Screen = Screen;
}
export default Computer;
Also is the scaling correct. I want the Screen to be smaller. But doing it does not affect its chilldren. So i did the overall scaling by still making it look sense. so I divided it by 50
First i create a root class as COmputer which i used to import Screen. It includes css3render and others to render html content inside threejs. But when i tried to check if both the screen and cube are rendering as I wish using OrbitControls. But it is not working. FIrst I thought it was caused by selection, I solved it and still the cotrols is not working.
I think there is some problem rendering or others.