I've been working on a small "engine" project using three.js to easily create and position objects. So far, I have set up the scene, renderer, and camera successfully. However, when attempting to render and attach a cube to my scene, I encounter an issue.
Creating and adding the cube to the scene works fine, but I face difficulties when utilizing the render() function in three.js. The error message I receive states:
THREE.WebGLRenderer.render: camera is not an instance of THREE.Camera.
This error has left me puzzled as I couldn't find much information online. I'm hoping someone here might be able to provide guidance.
During troubleshooting, I attempted to output the cube object to the console for insights. It appears that the cube attaches to the scene properly, with both the scene and camera serving as parent objects to the cube.
Below is the relevant code snippet:
function spnScene(alias, fov, x, y, z) {
window.spnCreateScene = new THREE.Scene();
var WIDTH = window.innerWidth, HEIGHT = window.innerHeight;
if (alias == false) {
console.warn('spnRenderer scene antialias set to ' + alias + ". Please check your code to make sure it's correct.");
}
spnRenderer = new THREE.WebGLRenderer({
antialias: alias
});
spnRenderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(spnRenderer.domElement);
// create camera
spnCamera = new THREE.PerspectiveCamera(fov, WIDTH / HEIGHT, 2000);
spnCamera.position.set(x, y, z);
spnCreateScene.add(spnCamera);
}
function spnBasicCube(material, clr, l, w, depth, x, y, z) { // draw a basic cube and render it
if (material == "basic") {
var spnBasicCube = new THREE.Mesh(new THREE.CubeGeometry(l, w, depth), new THREE.MeshBasicMaterial({color: clr}));
spnBasicCube.position.x = x;
spnBasicCube.position.y = y;
spnBasicCube.position.z = z;
spnCreateScene.add(spnBasicCube);
spnRenderer.render(spnBasicCube);
console.log(spnBasicCube);
// this should end up making a cube but throws an error rn
}
}
I am looking for assistance in resolving this issue! Thank you in advance! :)