There are a couple of adjustments needed in your code.
Prior to initializing controls, ensure that you append renderer.domElement to the body:
document.body.appendChild(renderer.domElement);
var controls = new THREE.TrackballControls(camera, renderer.domElement);
Given that you set your camera.position on the y-axis and TrackballControls defaults camera.up to the y-axis, your controls may not function correctly. To rectify this issue, modify the default camera.up behavior:
camera.up = new THREE.Vector3(1, 1, 1);//feel free to adjust the values, just avoid making it parallel to the y-axis
I'm not an expert in ThreeJS, for more details please refer to:https://github.com/mrdoob/three.js/issues/10161
The corrected code snippet is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>FooBarBaz</h1>
<p>LaDeDa</p>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
var objects = [
{
name: "earth",
mesh: new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), new THREE.MeshPhongMaterial()),
init: function (scene) {
this.mesh.position.set(0, 0, 0);
//this.material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
scene.add(this.mesh);
},
animate: function (t) { return }
},
{
name: "satellite",
mesh: new THREE.Mesh(new THREE.SphereGeometry(0.1, 32, 32), new THREE.MeshPhongMaterial()),
init: function (scene) {
this.mesh.position.set(1.5, 0, 0);
//this.material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
scene.add(this.mesh);
},
animate: function (t) { this.mesh.position.set(Math.sin(t) * 1.5, Math.cos(t) * 1.5, 0); }
}];
objects.forEach(object => object.init(scene));
var light = new THREE.HemisphereLight(0xf6e86d, 0x404040, 0.5);
scene.add(light);
camera.position.x = 0;
camera.position.y = -5;
camera.position.z = 0;
camera.up = new THREE.Vector3(1, 1, 1);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var timeStep = 0.01;
var time = 0;
document.body.appendChild(renderer.domElement);
var controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
var render = function () {
time += timeStep;
requestAnimationFrame(render);
objects.forEach(object => object.animate(time));
controls.update();
renderer.render(scene, camera);
}
render();</script>
</body>
</html>