Hi there, just a simple question.
I’ve created a simple scene where raindrops fall down toward a plane, it works perfectly when opening up the page. However, raindrops disappear when you pull the camera closer at some certain angles, which make me really confused.
Above is the normal effect, while below is the abnormal case.
Below is my snippet,
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../libs/three/three.js"></script>
<script type="text/javascript" charset="UTF-8" src="../libs/three/controls/TrackballControls.js"></script>
</head>
<body>
<div id="three-container"></div>
<script>
const PLANE_WIDTH = 60;
const PLANE_HEIGHT = 40;
function initRenderer() {
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
document.getElementById('three-container').appendChild(renderer.domElement);
return renderer;
}
function initCamera() {
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, .5, 10000);
scene.add(camera);
camera.position.set(-40, 70, 30);
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
function initPlane() {
var meshBasicMaterial = new THREE.MeshPhongMaterial({
color: '#00ff00',
});
var planeGeometry = new THREE.PlaneGeometry(PLANE_WIDTH, PLANE_HEIGHT);
var plane = new THREE.Mesh(planeGeometry, meshBasicMaterial);
plane.rotation.x = -Math.PI / 2;
plane.position.x = 15;
plane.receiveShadow = true;
scene.add(plane);
return plane;
}
function initTrackballControls(camera, renderer) {
var trackballControls = new THREE.TrackballControls(camera, renderer.domElement);
trackballControls.rotateSpeed = 1.0;
trackballControls.zoomSpeed = 1.2;
trackballControls.panSpeed = 0.8;
trackballControls.noZoom = false;
trackballControls.noPan = false;
trackballControls.staticMoving = true;
trackballControls.dynamicDampingFactor = 0.3;
trackballControls.keys = [65, 83, 68];
return trackballControls;
}
function initDirectionalLight(scene) {
var directionalLight = new THREE.DirectionalLight('#ffffff', .5);
scene.add(directionalLight);
return directionalLight;
}
// for the convenience of debugging
function addCoordinateSystem(scene) {
const axesHelper = new THREE.AxesHelper(40);
scene.add(axesHelper);
}
function addCameraHelper(scene, camera) {
const helper = new THREE.CameraHelper(camera);
scene.add(helper);
return helper;
}
function initRainDrops(scene) {
const rainMaterial = new THREE.PointsMaterial({
color: 0xff00ff,
transparent: true,
size: 1,
opacity: .5,
vertexColors: THREE.NoColors,
blending: THREE.AdditiveBlending,
depthWrite: false,
});
const rainDropGeometry = new THREE.Geometry();
const rainDropsVertices = rainDropGeometry.vertices;
const xRange = PLANE_WIDTH;
const yRange = 120;
const zRange = PLANE_HEIGHT;
for (let i = 0; i < 20000; i++) {
const x = Math.random() * xRange - xRange / 2 + 15;
const y = Math.random() * yRange + 30;
const z = Math.random() * zRange - zRange / 2;
const dropPosition = new THREE.Vector3(x, y, z);
rainDropsVertices.push(dropPosition);
}
const rainDrops = new THREE.Points(rainDropGeometry, rainMaterial);
scene.add(rainDrops);
return rainDrops;
}
const renderer = initRenderer();
var scene = new THREE.Scene();
const camera = initCamera();
addCoordinateSystem(scene);
const directionalLight = initDirectionalLight(scene);
// act as a table
const plane = initPlane();
// rain drops initialization
const rainDrops = initRainDrops(scene);
// in order that the camera can move around
var trackballController = initTrackballControls(camera, renderer);
var clock = new THREE.Clock();
var step = 0;
function loop() {
trackballController.update(clock.getDelta());
renderer.render(scene, camera);
rainDrops.geometry.vertices.forEach((v) => {
v.y -= Math.random() * .5;
if (v.y < -3) {
v.y = Math.random() * 120 + 30;
}
});
rainDrops.geometry.verticesNeedUpdate = true;
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>
Thanks in advance