Currently, I have a simple cube scene set up in Three.js
Now, my goal is to add camera movement using perlin noise. To achieve this, I found and incorporated the Perlin noise library into my project:
https://github.com/josephg/noisejs
I then included the necessary script tags in the HTML file:
<script src="three.min.js"></script>
<script src="my-three.js"></script>
<script src="perlin.js"></script>
In order to utilize the noise function, I created a variable within the perlin.js file:
var ruido = noise.simplex3(10, 10, 1);
The final step was to apply this variable to the camera. In my "my-three.js" file, I added the following line:
camera.position.z = ruido;
However, upon testing, I encountered an error:
Uncaught ReferenceError: ruido is not defined
It seems like the variable is not being recognized in the "my-three.js" file.
The complete content of "my-three.js" is as follows:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = ruido;
var render = function() {
requestAnimationFrame(render);
cube.rotation.x += 0.001;
cube.rotation.y += 0.001;
renderer.render(scene, camera);
};
render();
Any assistance would be greatly appreciated.