Currently, I am in the process of developing a 3D terrain using Three.js along with ImprovedNoise.js. Utilizing the examples provided on the Three.js website, I have successfully created what appears to be terrain. However, my issue lies in the fact that it remains confined to two dimensions and does not expand into the z-axis.
During the creation of this scene, I encountered some errors within the example code. In order to rectify these issues, I made slight adjustments such as:
geometry.rotateX(-Math.PI)
I modified it to read:
geometry.rotateX = -Math.PI
One specific error that I struggled with was related to THREE.CanvasTexture not functioning as expected. Despite being present in numerous three.js examples, I discovered no mention or documentation regarding changes to this feature on the official site. Thus, I presume it might have been deprecated or underwent modifications.
My current dilemma revolves around the fact that despite my efforts, I still haven't resolved the initial issue. To gain a better understanding of the code, I attempted to copy and paste the example code verbatim for reverse engineering purposes. Nevertheless, the outcome consistently results in a 2D representation when executed on my machine.
Below, you will find the adjusted example code (excluding previously mentioned problematic sections):
If anyone could confirm whether this works correctly for them or provide insights into what may be missing, I would greatly appreciate it.
Thank you
The libraries I'm utilizing are:
<script src="js/three.min.js"></script>
<script src="js/PointerLockControls.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/ImprovedNoise.js"></script>
<script src="js/FirstPersonControls.js"></script>
<script src="js/Detector.js"></script>
And here is the js: (The only alteration made was excluding the stats library, thus the corresponding code has been commented out below)
var container, stats;
var camera, controls, scene, renderer;
var mesh, texture;
var worldWidth = 256, worldDepth = 256,
worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
var clock = new THREE.Clock();
var helper;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
// Rest of the JavaScript code continues...