JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/npm/three@0.145/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.145/examples/js/controls/OrbitControls.js"></script>
JavaScript
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(new THREE.Color(0xAAAAAA));
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 1, 10000);
//const controls = new OrbitControls( camera, renderer.domElement );
const controls = new THREE.OrbitControls( camera, renderer.domElement );
camera.position.z = 100;
//controls.update();
//-------------------------------------------------------------------------------------
const picGeo = new THREE.PlaneGeometry(50, 50, 128, 128);
const texture = new THREE.TextureLoader().load("https://threejs.org/examples/textures/uv_grid_opengl.jpg");
const picMat = new THREE.MeshBasicMaterial({
color: 0xFF0000,
transparent: true,
opacity: 1,
map: texture
});
const pic = new THREE.Mesh(picGeo, picMat);
pic.position.z = 10;
scene.add(pic);
animate();
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}