JSFiddle - React, Tailwind, and code Playground
HTML
<htmL>
<head>
<link rel="stylesheet" href="https://bmsvieira.github.io/BVSelect-VanillaJS/css/bvselect.css" />
<script src="https://bmsvieira.github.io/BVSelect-VanillaJS/js/bvselect.js"></script>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
</head>
<body>
<div id="coolSelectWrapper">
<select id="coolSelect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div id="uncoolSelectWrapper">
<select id="uncoolSelect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</body>
</htmL>
CSS
body {
margin: 0;
}
#coolSelectWrapper {
top: 100px;
position: absolute;
left: 0;
}
#uncoolSelectWrapper {
left: 200px;
top: 100px;
position: absolute;
}
JavaScript
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.y = 100;
camera.position.x = 100;
camera.position.z = 300;
const renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// turn the default select element into a styled one
const coolSelectElement = document.querySelector('#coolSelect');
const styledSelect = new BVSelect({
selector: '#coolSelect'
});
// we target the wrapper because the wrapper will contain the styled select as well
const coolSelectWrapperElement = document.querySelector('#coolSelectWrapper');
const coolSelectWrapper3DObject = new THREE.CSS3DObject(coolSelectWrapperElement);
scene.add(coolSelectWrapper3DObject);
// add the uncool default select
const uncoolSelectWrapperElement = document.querySelector('#uncoolSelectWrapper');
const uncoolSelectWrapper3DObject = new THREE.CSS3DObject(uncoolSelectWrapperElement);
scene.add(uncoolSelectWrapper3DObject);
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
coolSelectWrapper3DObject.rotation.x = coolSelectWrapper3DObject.rotation.x + 0.005;
coolSelectWrapper3DObject.rotation.y = coolSelectWrapper3DObject.rotation.y + 0.005;
uncoolSelectWrapper3DObject.rotation.x = uncoolSelectWrapper3DObject.rotation.x + 0.005;
uncoolSelectWrapper3DObject.rotation.y = uncoolSelectWrapper3DObject.rotation.y + 0.005;
}
render();