JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/tween.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<button id="btnMove" style="position: absolute;">
 Move
</button>

CSS

body{
  overflow: hidden;
  margin: 0;
}

Babel + JSX

//collide
var staticCube;
var collidableMeshList = [];
var clock = new THREE.Clock();

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.set(0, 0, 5);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var radius = 1;

var Tree = function(){
	//modèle 3d
	this.mesh = new THREE.Object3D();
	this.mesh.name = "tree";

	// tronc
	var geomTronc = new THREE.CubeGeometry(0.020, 0.02, 0.020);
	var matTronc = new THREE.MeshBasicMaterial({color: "white", wireframe: true});
	var tronc = new THREE.Mesh(geomTronc, matTronc);
	tronc.position.set(0,0,0);
  tronc.rotation.x = -Math.PI * 0.5;
	tronc.castShadow = true;
	tronc.receiveShadow = true;
	this.mesh.add(tronc);

	// arbre
	var geomArbre = new THREE.CubeGeometry(.050,.050,.050);
	var matArbre = new THREE.MeshBasicMaterial({color: "red", wireframe: true});
	var arbre = new THREE.Mesh(geomArbre, matArbre);
	arbre.position.set(0,.030,0);
	tronc.add(arbre);
  collidableMeshList.push(tronc)
}

var sphere = new THREE.Mesh(new THREE.SphereGeometry(radius, 32, 24), new THREE.MeshBasicMaterial({color: "gray", wireframe: true}));
scene.add(sphere);

function createStaticCubeForCollision(){
	//pour la collision
	var cubeGeometry = new THREE.CubeGeometry(.20,.20,.20,1,1,1);
	var wireMaterial = new THREE.MeshBasicMaterial( { color: 0xff2200, wireframe:true } );
	staticCube = new THREE.Mesh( cubeGeometry, wireMaterial );
	staticCube.position.set(0, 1.05, 0);
	scene.add( staticCube );
}

function createTree(){
	tree=[]
	for (var i = 0; i < 100; i++){
		tree[i]=new Tree();
    let rx=Math.random() * Math.PI * 2;
		let ry=Math.random() * Math.PI;
		tree[i].mesh.position.setFromSphericalCoords(1 + .010, ry, rx);
		tree[i].mesh.lookAt(sphere.position);
		//don't works
   ...