JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
CSS
body {
background: #282828;
margin: 0;
overflow: hidden;
}
JavaScript
var scene, camera, renderer;
var controls;
var pivot;
var exampleMesh;
var exampleMeshFacingCamera;
var alwaysLookAtCamera = function () {
var worldPos = new THREE.Vector3();
if (+THREE.REVISION > 85) {
return function (object, camera) {
object.onBeforeRender = function() {
worldPos.setFromMatrixPosition(object.matrixWorld);
object.matrixWorld.lookAt(camera.position, worldPos, THREE.Object3D.DefaultUp);
object.modelViewMatrix.multiplyMatrices(camera.matrixWorldInverse, object.matrixWorld);
object.normalMatrix.getNormalMatrix(object.modelViewMatrix);
};
};
} else {
return function (object, camera) {
object.onBeforeRender = function() {
worldPos.setFromMatrixPosition(object.matrixWorld);
object.matrixWorld.lookAt(camera.position, worldPos, THREE.Object3D.DefaultUp);
};
}
}
}();
init();
requestAnimationFrame(animate);
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x282828);
camera = new THREE.PerspectiveCamera(60, 4 / 3, 0.1, 1000.0);
camera.position.set(0.0, -2.0, 8.0);
renderer = new THREE.WebGLRenderer({ antialias: true });
controls = new THREE.OrbitControls(camera, renderer.domElement);
var wireframeSet = new THREE.Mesh(
new THREE.SphereBufferGeometry(10.0, 32, 16),
new THREE.MeshBasicMaterial({ color: 0x606060, wireframe: true })
);
scene.add(wireframeSet);
var texLoader = new THREE.TextureLoader().setCrossOrigin(true);
var exampleTexture = texLoader.load('https://i.imgur.com/qTcLQHs.png');
exampleMesh = new THREE.Mesh(
new THREE.PlaneBufferGeometry(2.0, 2.0),
new THREE.MeshBasicMaterial({ map: exampleTexture, side: THREE.DoubleSide })
);
exampleMeshFacingCamera = exampleMesh.clone();
alwaysLookAtCamera(exampleMeshFacingCamera, camera);
...