JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three/build/three.module.js",
"bufUtils": "https://unpkg.com/three/examples/jsm/utils/BufferGeometryUtils.js"
}
}
</script>
JavaScript
import * as THREE from 'three';
import * as UTILS from 'bufUtils'
// init
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
const scene = new THREE.Scene();
const image = new Image();
const texture = new THREE.Texture(image);
const geo1 = new THREE.BoxGeometry(100, 300, 8);
const geo2 = new THREE.BoxGeometry(100, 200, 8);
const angle = Math.PI * 0.5;
const circle = new THREE.CylinderGeometry(100, 100, 8, 64, 1, false, -angle, angle);
image.src =...