I am currently experimenting with Three.js and jQuery to develop a small visual application. My main objective is to display all the meshes I have on the screen.
The Issue: Unfortunately, none of the meshes are visible on the screen at all.
Observations: Despite the meshes not appearing, the renderer's clear color (0x00bfff) is visible, and upon checking console.log(scene), it confirms that all the meshes exist within the scene.
Efforts to Rectify: I have tried various solutions including using THREE.Projector, THREE.Raycaster, adjusting camera positioning, and several other attempts.
Being new to Three.js and programming in general, I welcome any feedback or criticism regarding my work. Any help would be greatly appreciated! Thank you!
WORLD.JS
$(document).ready(function() {
initialize();
animate();
});
var initialize = function() {
clock = new THREE.Clock();
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, .1, 10000);
camera.position.set(25, 25, 125);
camera.lookAt(scene.position);
setupEnvironment();
setupAI();
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x00bfff, 1);
document.body.appendChild(renderer.domElement);
};
var animate = function() {
requestAnimationFrame(animate);
render();
}
var render = function() {
var delta = clock.getDelta();
renderer.render(scene, camera);
}
var setupEnvironment = function() {
// Environment setup code here
};
var setupAI = function() {
// AI setup code here
};
function BoxMesh(width, height, depth, hexColor, amount) {
// BoxMesh constructor definition
}
var positionThenAdd = function(varMesh, posArrXByZ) {
// Positioning function definition
};
HTML FILE
<!DOCTYPE html>
<html>
<head>
<title>Custom World Title</title>
<style>
body {
margin: 0;
padding: 0;
border: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="mrdoob-three.js-d6384d2/build/Three.js"></script>
<script src="mrdoob-three.js-d6384d2/examples/js/renderers/Projector.js"></script>
<script src="world.js"></script>
</head>
<body></body>
</html>