JSFiddle - React, Tailwind, and code Playground
by Wolfgang Fahl
HTML
<!-- https://stackoverflow.com/questions/57311356/rotating-an-object-properly-given-axis-and-angle-->
<html>
<head>
<title>Rotation</title>
<style>
body { margin: 0; position: fixed; }
canvas { width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js'></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
// Options (DAT.GUI)
var options = {
x: 30,
z: 40
};
var gui = new dat.GUI();
gui.add(options, 'x', -200, 200).listen();
gui.add(options, 'z', -200, 200).listen();
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.physicallyCorrectLights = true;
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xacacac )
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
camera.position.set( 55, 45, 16 );
controls.target.set( 0, 0, 0 );
var geometry = new THREE.BoxBufferGeometry( 12, 12, 12 );
var material = new THREE.MeshStandardMaterial( { color: 0x32acd7 } );
var cube = new THREE.Mesh( geometry, material );
cube.position.set( 0, 12, 30 ); // offset from center
var pivot = new THREE.Object3D();
pivot.add( cube );
scene.add( pivot );
material = new THREE.MeshPhongMaterial( { color: 0x6c6c6c, side: THREE.FrontSide } );
var floor = new THREE.Mesh( geometry, material );
floor.scale.x = 20;
floor.scale.y = 20;
floor.rotation.x = -Math.PI / 2;
scene.add( floor );
geometry = new...