ViewHelper Issue - Render order hides the previous renderer

Questions
, ,
1

Hello ThreeJS’ers,

I have an issue with the main renderer being obscured by the viewHelper.
I have followed Interactive view helper. - JSFiddle - Code Playground example and the code that I have used is almost the same.

The scenario is:

  • if I put the viewHelper.render(renderer) below the renderer.render (scene, camera) I can see the viewHelper.
  • If I put it above I can see the holes I import after the scene is setup.

The difference in my code is that I add my custom objects through a file upload. They are added to the scene in their respective creation code.

  1. fileInput buutton pressed
  2. fileUpload called
  3. drawHoles Called
  4. case checked and hole style (drawCrossHole) called
  5. hole group added to Scene
//snippet from inside fileUpload.js
else if (data.split("\n")[0].split(",").length === 7) {
			for (const point of points) {
				if (params.debugComments) {
					console.log("fileUpload/handleFileUploadNoEvent/drawHoles: " + point.pointID + " X: " + point.startXLocation + " Y: " + point.startYLocation + " Z: " + point.startZLocation);
				}
				const tempPoint = {
					pointID: point.pointID,
					startXLocation: point.startXLocation - x,
					startYLocation: point.startYLocation - y,
					startZLocation: point.startZLocation - z,
					endXLocation: point.endXLocation - x,
					endYLocation: point.endYLocation - y,
					endZLocation: point.endZLocation - z
				};
				drawHoles(canvas.scene, colour, tempPoint, 165, 1);
			}
		}

//snippet from inside drawHoles.js
		case "lineCross": {
			const lineWidth = 5;
			const dashArray = false;
			const dashOffset = 0;
			const dashRatio = 0;
			const opacity = 1;
			const sizeAttenuation = false;
			const diameter = 500;
			drawCrossHole(scene, colour, pointID, collarVector, intervalVector, toeVector, diameter, lineWidth, dashArray, dashOffset, dashRatio, opacity, sizeAttenuation);
			if (params.debugComments) {
				console.log("crossHoleID: " + pointID + " X: " + collarVector.x + " Y: " + collarVector.y + " Z: " + collarVector.z);
			}
			break;
		}

//snippet from inside drawCrossHole.js
	const hole = new Group();
	//draw Cross
	hole.add(createLine(vectors.topLeft, vectors.bottomRight, color, lineWidth, dashArray, dashOffset, dashRatio, opacity, sizeAttenuation));
	hole.add(createLine(vectors.bottomLeft, vectors.topRight, color, lineWidth, dashArray, dashOffset, dashRatio, opacity, sizeAttenuation));
	//draw BenchLength of hole
	hole.add(createLine(collarXYZ, intervalXYZ, color, lineWidth, dashArray, dashOffset, dashRatio, opacity, sizeAttenuation));
	//color = getRandomColor();
	color = "red";
	//draw subdrill of hole
	hole.add(createLine(intervalXYZ, toeXYZ, color, lineWidth, dashArray, dashOffset, dashRatio, opacity, sizeAttenuation));
	hole.name = pointID;
	scene.add(hole);
}

The scenario is:

  • if I put the viewHelper.render(renderer) below the renderer.render (scene, camera) I can see the viewHelper.
  • If I put it above I can see the holes I import after the scene is setup.

I don’t get both my holes and the viewHelper

ViewHelper visible but unable to see holes loaded after scene setup

//snippet from inside createScene.js
function animate() {
		requestAnimationFrame(animate);

		const delta = clock.getDelta();

		if (viewHelper.animating) viewHelper.update(delta);
		renderer.render(scene, camera);
		viewHelper.render(renderer);
		//controls.update();
	}

ViewHelper NOT visible however holes loaded after scene setup are visible.

//snippet from inside createScene.js
function animate() {
		requestAnimationFrame(animate);

		const delta = clock.getDelta();

		if (viewHelper.animating) viewHelper.update(delta);
		viewHelper.render(renderer);
		renderer.render(scene, camera);
		//controls.update();
	}

Below is a GIF of the issue. In this, you can see that after the viewHelper is //commented out, the file is consumed and produces output as desired. However, the ViewHelper is not visible (obviously) but the same occurs if I swap the render order.
ViewHelperIssue

What could be wrong with this?*.
Is the renderer opaque and I just can’t see behind it or is there some other issue?

Thanks in advance.

2

Hi, for some reason set renderer.autoClear = false; solve my problem.
Also clear the renderer manually in your animate() function by calling renderer.clear(); after the requestAnimationFrame line; hope that helps

2 Likes
3

Thank you so much!
Worked in a heartbeat. I spent 10 hours trying all sorts of weird things.

Putting this in the conversation so others can have a simple success

//FIX suggestion worked.
	renderer.autoClear = false; //MUST SET TO GET VIEWHELPER TO WORK

//FIX suggestion worked
		renderer.clear(); //MUST MANUALLY CLEAR FOR VIEWHELPER TO WORK

More complete code below with fix incorporated

export function createScene(points) {
	scene = new Scene();
	const canvas = document.querySelector("#canvas");
	//Set up the Renderer
	renderer = new WebGLRenderer({ antialias: true });
	renderer.setSize(canvas.offsetWidth, canvas.offsetHeight);
	renderer.setPixelRatio(window.devicePixelRatio);

	//FIX suggestion worked.
	renderer.autoClear = false; //MUST SET TO GET VIEWHELPER TO WORK

	document.querySelector("#canvas").appendChild(renderer.domElement);

	let aspect = canvas.offsetWidth / canvas.offsetHeight;
	const cameraPerspective = new PerspectiveCamera(56.5, aspect, 0.01, 500);
	const cameraOrthographic = new OrthographicCamera(frustumSize * aspect / -2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / -2, 0.01, 500);
	// Initialize camera with one of the cameras
	camera = params.cameraPerspective ? cameraPerspective : cameraOrthographic;
	controls = new ArcballControls(camera, renderer.domElement);
	camera = cameraOrthographic;
	createLighting(scene);

	const position = new Vector3(0, 0, 0 + 200);
	camera.position.copy(position);
	camera.lookAt(0, 0, 0);
	camera.up.set(0, 1, 0);

	clock = new THREE.Clock();

	viewHelper = new ViewHelper(camera, renderer.domElement);
	viewHelper.controls = controls;
	viewHelper.controls.center = controls.target;

	//match the view helper to the controls
	viewHelper.update();

	const div = document.createElement("div");
	div.id = "viewHelper";
	div.style.position = "absolute";
	div.style.right = 0;
	div.style.bottom = 0;
	div.style.height = "128px";
	div.style.width = "128px";

	document.body.appendChild(div);

	div.addEventListener("pointerup", event => viewHelper.handleClick(event));

	//create Gizmos for the ArcballControls
	const gizmos = new Object3D();
	gizmos.add(new AxesHelper(100)); 
	scene.add(gizmos);

	function setControls() {
		//set controls in here removed to be concise.
	}
	setControls();

	function animate() {
		requestAnimationFrame(animate);

		//FIX suggestion worked
		renderer.clear(); //MUST MANUALLY CLEAR  FOR VIEWHELPER TO WORK
		const delta = clock.getDelta();

		if (viewHelper.animating) viewHelper.update(delta);

		renderer.render(scene, camera);
		viewHelper.render(renderer);
	}
// code removed to be concise

ViewHelperWorking

1 Like