JSFiddle - React, Tailwind, and code Playground

by Hesam Yavari

HTML

<script src="https://hafalasht.ir/hesam/wall.glb"></script>

CSS

body{
  overflow: hidden;
  margin:0;
}

JavaScript

import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.js';



var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(3, 5, 8);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new OrbitControls(camera, renderer.domElement);

const geometry0 = new THREE.PlaneGeometry( 10, 10 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide, wireframe: true} );
const plane0 = new THREE.Mesh( geometry0 );
plane0.rotation.set(Math.PI/2,0,0);
/* plane0.position.set(0,5,-5) */
/* scene.add( plane0 ); */

const geometry1 = new THREE.PlaneGeometry( 10, 10 );
/* const material1 = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} */
const plane1 = new THREE.Mesh( geometry1 );
plane1.position.set(0,5,-5);
/* scene.add( plane1 ); */

const geometry2 = new THREE.PlaneGeometry( 10, 10 );
/* const material2 = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} */
const plane2 = new THREE.Mesh( geometry2 );
plane2.rotation.set(0,Math.PI/2,0);
plane2.position.set(-5,5,0);
/* scene.add( plane2 ); */

var geom = new THREE.Geometry();
geom.mergeMesh(plane0);
geom.mergeMesh(plane1);
geom.mergeMesh(plane2);
geom.mergeVertices(); // optional
var room = new THREE.Mesh(geom, material)
scene.add(room);

var roomEdges = new THREE.EdgesGeometry(geom);
var edges2 = new THREE.LineSegments(roomEdges, new THREE.LineBasicMaterial({color: "orange"}));
room.add(edges2);
// tetrahedron
var h = 1.3333333432674408;
var cubeGeom = new...