Having an issue with the appearance of a superposed wave using threejs. When displayed, the wave made from plane material only shows the upper half, but when turned upside down using mouse dragging, it appears correctly.
// Turn the wave plane upside down by dragging
console.clear()
var scene = new THREE.Scene();
var W = window.innerWidth;
var H = window.innerHeight;
console.log("W "+W + "H"+ H)
var renderer = new THREE.WebGLRenderer();
//renderer.setClearColor(0xc482c4);
renderer.setSize(W, H);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
var camera = new THREE.PerspectiveCamera(10, W / H, 1, 500);
var planeGeometry = new THREE.PlaneGeometry(200, 100, 200,100 );//planeの横、たて、横分割数、たて分割数
var planeMaterial = new THREE.MeshPhongMaterial({
color: 0x6699FF,
side: THREE.BackSide
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.castShadow = true;
plane.receiveShadow = true;
plane.rotation.x = -0.4 * Math.PI;
plane.position.set(0, 0, 10);
scene.add(plane);
var dlight = new THREE.DirectionalLight( 0xC0C0C0,1 );
dlight.position.set(0,0,1);
dlight.castShadow = true;
scene.add(dlight);
var lights = [];
lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 3 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 0 ].position.set( 0, 0, 20 );
lights[ 1 ].position.set( 10, 20, 10 );
lights[ 2 ].position.set( - 10, - 20, -10 );
lights[ 3 ].position.set( - 0, - 0, -20 );
scene.add( lights[ 0 ] );
scene.add( lights[ 1 ] );
scene.add( lights[ 2 ] );
scene.add( lights[ 3 ] );
camera.position.set( 20, 0, 350 );
var controls = new THREE.OrbitControls( camera );
controls.enableZoom=true;
controls.update();
document.body.appendChild(renderer.domElement);
(function drawFrame(ts){
var centerLeft = new THREE.Vector2(-21,0);
var centerRight = new THREE.Vector2(21,0);
window.requestAnimationFrame(drawFrame);
var vLength = plane.geometry.vertices.length;
for (var i = 0; i < vLength; i++) {
var v = plane.geometry.vertices[i];
var dist1 = new THREE.Vector2(v.x, v.y).sub(centerLeft);
var dist2 = new THREE.Vector2(v.x, v.y).sub(centerRight);
var size = 10.0;
var magnitude = 7;
v.z = 2*Math.sin(-2*Math.PI*dist1.length()/size + 2*Math.PI*(ts/2000)) +2*Math.sin(-2*Math.PI*dist2.length()/size+ 2*Math.PI*(ts/2000));
}
plane.geometry.verticesNeedUpdate = true;
renderer.render(scene, camera);
}());
https://codepen.io/math_mountain_f/pen/Mdjvwx
Tried changing the "plane.position" but the plane did not move as expected.
Currently attempting to adjust the camera position without success.
Looking to display the entire wave from a top view perspective without the need for dragging.