Animate more than one container

Questions
1

Hello,
I’m new to three.js and I try to create my own html page. On this page I have more than one renderer. Between the renderer it is a normal text.
So my question is, how can i animate more than one renderer? At the moment I can only animate the last renderer I have displayed.
Please can someone help me?

<!DOCTYPE html>
<html lang="en">

<head>
<title>three.js orbit controls test</title>
<style>
	body {
		color: #000;
		font-size: 13px;
		text-align: center;
		margin: 0px;
	}
</style>
</head>

<body>

<h1>Header</h1>
<p>Container 1</p>

<div id="container"></div>

<script src="js/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>

<script>
	if (!Detector.webgl) Detector.addGetWebGLMessage();

	var stats;
	var camera, controls, scene, renderer;

	init('container');
	render();

	function init(_container1) {
		scene = new THREE.Scene();

		renderer = new THREE.WebGLRenderer();
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setSize(400, 400);

		var container = document.getElementById(_container1);
		container.appendChild(renderer.domElement);


		camera = new THREE.PerspectiveCamera(75, 400 / 400, 1, 1000);
		camera.position.set(-200, -200, 400);

		controls = new THREE.OrbitControls(camera, renderer.domElement);
		controls.addEventListener('change', render);
		controls.enableZoom = true;

		var coordinateSystem = new THREE.AxisHelper(30);
		coordinateSystem.position.set(0, 0, 0);
		scene.add(coordinateSystem)

		// Sphere 1
		var radSphere = 3
		var startPoint = new THREE.Vector3(30.707, 30.707, 20);
		var touchPoint = new THREE.Vector3(20, 20, 20);
		var geometry = new THREE.SphereGeometry(radSphere, 50, 50);
		var material = new THREE.MeshPhongMaterial({ color: 0xff0000, shading: THREE.FlatShading });
		var mesh = new THREE.Mesh(geometry, material);
		var vector = new THREE.Vector3();
		vector.subVectors(touchPoint, startPoint);
		var vectorLength = vector.length() - radSphere;
		mesh.position.x = touchPoint.x;
		mesh.position.y = touchPoint.y;
		mesh.position.z = touchPoint.z;
		mesh.updateMatrix();
		mesh.matrixAutoUpdate = false;
		scene.add(mesh);

		// Sphere 2
		var radSphere = 3
		var startPoint = new THREE.Vector3(-30.707, -30.707, -20);
		var touchPoint = new THREE.Vector3(-20, -20, -20);
		var geometry = new THREE.SphereGeometry(radSphere, 50, 50);
		var material = new THREE.MeshPhongMaterial({ color: 0xff0000, shading: THREE.FlatShading });
		var mesh = new THREE.Mesh(geometry, material);
		var vector = new THREE.Vector3();
		vector.subVectors(touchPoint, startPoint);
		var vectorLength = vector.length() - radSphere;
		mesh.position.x = touchPoint.x;
		mesh.position.y = touchPoint.y;
		mesh.position.z = touchPoint.z;
		mesh.updateMatrix();
		mesh.matrixAutoUpdate = false;
		scene.add(mesh);

		//lights
		var light = new THREE.DirectionalLight(0xffffff);
		light.position.set(50, 50, 50);
		scene.add(light);
		var light = new THREE.DirectionalLight(0xffffff);
		light.position.set(-50, -50, -50);
		scene.add(light);
		var light = new THREE.AmbientLight(0x404040);
		scene.add(light);

		//
		window.addEventListener('resize', onWindowResize, false);
	}

	function onWindowResize() {
		camera.aspect = 400 / 400;
		camera.updateProjectionMatrix();
		renderer.setSize(400 / 400);
	}

	function animate() {
		requestAnimationFrame(animate);
		controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true 
		stats.update();
		render();
	}

	function render() {
		renderer.render(scene, camera);
	}
</script>

<p>
	<br>
	<p>Container 2</p>
	<br>
</p>

<div id="container1"></div>
<script>
	if (!Detector.webgl) Detector.addGetWebGLMessage();

	var stats;
	var camera, controls, scene, renderer;

	init('container1');
	render();

	function init(_container1) {
		scene = new THREE.Scene();

		renderer = new THREE.WebGLRenderer();
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setSize(300, 300);

		var container = document.getElementById(_container1);
		container.appendChild(renderer.domElement);


		camera = new THREE.PerspectiveCamera(75, 300 / 300, 1, 1000);
		camera.position.set(-200, -200, 400);

		controls = new THREE.OrbitControls(camera, renderer.domElement);
		controls.addEventListener('change', render);
		controls.enableZoom = true;

		var coordinateSystem = new THREE.AxisHelper(30);
		coordinateSystem.position.set(0, 0, 0);
		scene.add(coordinateSystem)

		// Sphere 1
		var radSphere = 3
		var startPoint = new THREE.Vector3(30.707, 30.707, 20);
		var touchPoint = new THREE.Vector3(20, 20, 20);
		var geometry = new THREE.SphereGeometry(radSphere, 50, 50);
		var material = new THREE.MeshPhongMaterial({ color: 0xff0000, shading: THREE.FlatShading });
		var mesh = new THREE.Mesh(geometry, material);
		var vector = new THREE.Vector3();
		vector.subVectors(touchPoint, startPoint);
		var vectorLength = vector.length() - radSphere;
		mesh.position.x = touchPoint.x;
		mesh.position.y = touchPoint.y;
		mesh.position.z = touchPoint.z;
		mesh.updateMatrix();
		mesh.matrixAutoUpdate = false;
		scene.add(mesh);

		// Sphere 2
		var radSphere = 3
		var startPoint = new THREE.Vector3(-30.707, -30.707, -20);
		var touchPoint = new THREE.Vector3(-20, -20, -20);
		var geometry = new THREE.SphereGeometry(radSphere, 50, 50);
		var material = new THREE.MeshPhongMaterial({ color: 0xff0000, shading: THREE.FlatShading });
		var mesh = new THREE.Mesh(geometry, material);
		var vector = new THREE.Vector3();
		vector.subVectors(touchPoint, startPoint);
		var vectorLength = vector.length() - radSphere;
		mesh.position.x = touchPoint.x;
		mesh.position.y = touchPoint.y;
		mesh.position.z = touchPoint.z;
		mesh.updateMatrix();
		mesh.matrixAutoUpdate = false;
		scene.add(mesh);

		//lights

		var light = new THREE.DirectionalLight(0xffffff);
		light.position.set(50, 50, 50);
		scene.add(light);
		var light = new THREE.DirectionalLight(0xffffff);
		light.position.set(-50, -50, -50);
		scene.add(light);
		var light = new THREE.AmbientLight(0x404040);
		scene.add(light);

		//
		window.addEventListener('resize', onWindowResize, false);
	}


	function onWindowResize() {
		camera.aspect = 300 / 300;
		camera.updateProjectionMatrix();
		renderer.setSize(300, 300);
	}

	function animate() {
		requestAnimationFrame(animate);
		controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true 
		stats.update();
		render();
	}

	function render() {
		renderer.render(scene, camera);
	}
</script>

</body>

</html>
2

If you do

<script>

    var renderer;

</script>

Then what you are actually doing is creating attaching a variable to the global window object - i.e. you are creating window.renderer. If you create another window.renderer later then you are overwriting it.

The simplest solution here is always to make sure you name things uniquely. So if you have more than one renderer, always call them renderer1, renderer2, ... etc.

You should read up on scope and closures in JavaScript as well for a better understanding of this.

3

Hi

thank you. It works great.