JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rotate on World Axis 2</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
</body>
</html>
JavaScript
/**/
var scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
/**/
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.x = -2;
camera.position.y = 2;
camera.position.z = 5;
camera.lookAt(new THREE.Vector3(0,1,0));
/**/
var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);
var light = new THREE.PointLight( 0xffffff);
light.position.set( 5, 5, 5 );
scene.add( light );
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
/* Renderer */
var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context,antialias: true } );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
/**/
var planeGeometry = new THREE.PlaneGeometry(5,5,10,10);
var material = new THREE.MeshLambertMaterial({color: 0x575757});
var plane = new THREE.Mesh(planeGeometry, material);
plane.rotation.x = -90*Math.PI/180;
scene.add(plane);
var b_red = new THREE.Mesh(new THREE.BoxGeometry(1,1),new THREE.MeshBasicMaterial({color: 0xff0000}));
var b_green = new THREE.Mesh(new THREE.BoxGeometry(1,1),new THREE.MeshBasicMaterial({color: 0x00ff00}));
var b_blue = new THREE.Mesh(new THREE.BoxGeometry(1,1),new THREE.MeshBasicMaterial({color: 0x0000ff}));
var parentObj = new THREE.Object3D();
var b_child = new THREE.Mesh(new THREE.BoxGeometry(1,1),new THREE.MeshBasicMaterial({color: 0x00ffff}));
...