I'm looking to create a wave effect on the content overlaid on a wave background using three.js.https://i.sstatic.net/eEN6U.png
While I've successfully implemented the wave effect, I now want the content to move up and down along with the background effect. Similar to boats riding sea waves
To create a wave effect in your scene, adding wave effects to the background can be an effective technique. For guidance and inspiration, you can check out this link: https://codepen.io/mweslander/pen/JreWPa
const SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;
let container, stats;
let camera, scene, renderer;
let particles, particle, count = 0;
let mouseX = 0, mouseY = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
function initialize() {
container = document.createElement( 'div' );
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000; // Ideal variable for adjustment
scene = new THREE.Scene();
particles = new Array();
var PI2 = Math.PI * 2;
var geometry = new THREE.Geometry();
var material = new THREE.SpriteCanvasMaterial({
color: 0xffffff,
program: function ( context ) {
context.beginPath();
context.arc( 0, 0, 0.4, 0, PI2, true );
context.fill();
}
});
var i = 0;
for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
particle = particles[ i ++ ] = new THREE.Sprite( material );
particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
scene.add(particle);
if (i > 0) {
geometry.vertices.push( particle.position );
}
}
}
renderer = new THREE.CanvasRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
container.appendChild( stats.dom );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function resizeWindow() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function handleMouseMove(event) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function handleTouchStart(event) {
if (event.touches.length === 1) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function handleTouchMove( event ) {
if (event.touches.length === 1) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function startAnimation() {
requestAnimationFrame( animate );
playAnimation();
stats.update();
}
function playAnimation() {
renderer.setClearColor( 0x07074e, 1);
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
var i = 0;
for (var ix = 0; ix < AMOUNTX; ix++) {
for (var iy = 0; iy < AMOUNTY; iy++) {
particle = particles[i++];
particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);
particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 4 + (Math.sin((iy + count) * 0.5) + 1) * 4;
}
}
renderer.render(scene, camera);
count += 0.1;
}
initialize();
startAnimation();
I noticed that in this example the hyperlink is aligned at the bottom compared to the text. Can anyone help me identify the issue and provide a solution? Thank you! ...
Currently, I am in the process of developing a multiplayer game using three.js. The basic framework is all set up and my next step is to implement the multiplayer aspect. After some research, I came across RTC as a solution that doesn't require comple ...
I have been experimenting with the Three.js example located in the directory: three.js/examples/webgl_loader_ply.html By replacing their .ply file with my own (created in Blender). In Blender, I used Vertex Paint to paint vertices. Before exporting to . ...
I am in the process of creating a custom user input control that includes a TextField, a Dropdown, and a Button. To ensure that the TextField and Dropdown appear as a cohesive unit rather than two separate elements, I attempted to use two specific styles ...
I recently deployed my React JS app on Heroku and encountered some issues with the routing. While everything worked smoothly on my local host, I faced errors after fixing the routing problem that I couldn't resolve. Despite extensive research, I haven ...
Despite reading numerous blogs and conducting extensive searches on Google, I am still unable to resolve the CSS issue related to Angular material below. Your assistance in fixing this problem would be greatly appreciated. Desktop view: https://i.stack.im ...
My goal is to automatically populate HTML form fields based on user selection. I have obtained code for related functions, such as fetching JSON data and creating dropdown lists, from a friend. Here is the link to that code: https://jsfiddle.net/r4zuy7tn/1 ...
How can I style the page within the same div to display the data in the following format with multiple sub-parts? abcde a production productions ...
I am attempting to create the following directory structure -- src |__ app |__ x.ts |__ test |__ y.ts -- build |__ app |__ js |__ test |__ js My goal is to have my generated js files inside buil ...
<TBODY> <TR> <TD colSpan=4>Details of your Travel</TD></TR> <TR></TR> <TR> <TD colSpan=4>Booking Reference : XXX</TD></TR> <TR></TR> <TR> <TD>Passenger& ...
In my current project, I am utilizing nextJS with NodeJS and looking to implement child processes or workers. The code provided by NextJS itself is functioning perfectly. The relevant code snippets: NextJS with NodeJS Another resource I referred to: Nex ...
Check out this example to see the issue I'm facing. I've implemented an intersection observer for lazy loading images, here's the code: const pictures = document.querySelectorAll("[data-src]"); function loadPicture(pic){ const src = p ...
When attempting to pass a component as a prop of another component, it functions correctly. However, when I try to pass a Component and manage its CSS classes within the children, I find myself stuck. I am envisioning something like this: import Navbar fr ...
Currently, I am working on creating a set of thumbnails that enlarge when hovered over. The initial setup achieves the zoom effect using CSS3 transform:scale and ease-in-out. However, the issue is that the enlarged images overlap each other due to sharing ...
Let me explain the issue here in a simple way. I have a parent component where I execute a method that changes a property value of an object called products. This is working fine. However, when I pass this object as a prop to a child component and watch i ...
I'm having trouble getting my website to print with its CSS and bootstrap styles. When I try to print using ctrl + p or the window.print() function, only the div, controls, and buttons appear without their corresponding colors. I've attempted to ...
For my Bootstrap page, I'm trying to create 4 columns with a space of 5px between each one. I found a tutorial ( ) but it's not working as expected because the clickable area extends beyond the column due to the margin. Here is the link to my j ...
Hey there, I could really use some help with getting @font-face to work properly. Despite trying numerous solutions, I still seem to be missing something. If anyone can spot what I'm doing wrong, please let me know! @font-face { font-family: " ...
I encountered an issue when attempting to make a POST login request. The frontend is deployed on Netlify here, and the backend is deployed on Heroku here. Here are my backend logs . I am receiving `users.findOne()` buffering timed out after 10000ms in ...
I am in need of assistance with deleting the clicked id number from an input value using jQuery. I am unsure of how to proceed with this task and would appreciate some guidance. To simplify my request, let me explain what I am trying to accomplish. Take ...