I am trying to update the near plane value in my camera and have that reflected on the scene. The camera.near value looks to get updated but I see no difference on my browser. What am I doing wrong?
<!doctype html>
<html>
<head>
</head>
<body>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'></script>
<script src='https://threejs.org/examples/js/controls/OrbitControls.js'></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<canvas class="webgl"></canvas>
<script type="text/javascript">
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Renderer
renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
// set some camera attributes
var angle = 45,
near = 0.1,
far = 10000;
camera = new THREE.PerspectiveCamera(angle, window.innerWidth / window.innerHeight, near, far);
camera.position.set(0, 0, 300);
// scene
var scene = new THREE.Scene();
// Controls
controls = new THREE.OrbitControls(camera, canvas);
controls.enableDamping = true;
renderer.setSize(window.innerWidth, window.innerHeight);
// now create the individual particles
var particleCount = 2000;
var positions = new Float32Array(particleCount * 3)
for (var i = 0; i < particleCount * 3; i++) {
positions[i] = Math.random() * 500 - 250
}
// create the particle variables
var particlesGeometry = new THREE.BufferGeometry();
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
var particlesMaterial = new THREE.PointsMaterial({
// color: 0xFF0000,
size: 10,
});
var particles = new THREE.Points(particlesGeometry, particlesMaterial);
// add it to the scene
scene.add(particles);
//Gui
var gui = new dat.GUI();
gui.add(camera.position, 'x', -500, 500).step(5);
gui.add(camera, 'near', 0.1, 5000).step(5);
// animation loop
animate();
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
// console.log('Near value: ' + camera.near)
}
</script>
</html>