Creating a stunning parallax effect with Three.js: A step-by-step guide

Question

Creating a stunning parallax effect with Three.js: A step-by-step guide

I am working on creating a parallax effect using three.js that responds to mouse movement. My goal is to animate clouds on the x-axis when the mouse is moved.

Initially, I attempted to add images of clouds to the scene. How can I connect the mouse movement event to these cloud images? Or should I consider a different approach for adding clouds to the scene?

This is how I have added clouds:

    var imgCloud = new THREE.MeshBasicMaterial({ 
        map:THREE.ImageUtils.loadTexture('img/cloud.jpg')
    });
    imgCloud.map.needsUpdate = true;

    // Cloud
    var cloud = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), imgCloud);
    cloud.overdraw = true;
    scene.add(cloud);

javascript three.js parallax

Answer 1

Answer №1

To retrieve the current mouse coordinates, an event listener must be attached to the window object. This will allow for precise control over the position of each cloud element or the entire scene.

window.addEventListener('mousemove', trackMousePosition, false);

function trackMousePosition(event) {
    scene.position.x = (event.clientX - window.innerWidth / 2);
}

Answer 2

To retrieve the current mouse coordinates, an event listener must be attached to the window object. This will allow for precise control over the position of each cloud element or the entire scene.

window.addEventListener('mousemove', trackMousePosition, false);

function trackMousePosition(event) {
    scene.position.x = (event.clientX - window.innerWidth / 2);
}

Answer 3

Answer №2

To create a parallax effect, you can track the mouse position and adjust the camera's position along different axes based on the movement of the mouse.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

camera.position.z = 150;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create cloud of spheres
for (let i = 0; i <= 200; i++) {
  const geometry = new THREE.SphereGeometry(5, 32, 32);
  const material = new THREE.MeshBasicMaterial({ color: 0x3399ff, transparent: true, opacity: 0.8});
  const sphere = new THREE.Mesh(geometry, material);
  sphere.position.x += Math.round(Math.random() * 500) - 250;
  sphere.position.y += Math.round(Math.random() * 500) - 250;
  sphere.position.z += Math.round(Math.random() * 200);
  scene.add(sphere);
}

// Control with mouse movement
var mouseTolerance = 0.1;

document.onmousemove = function (e) {
  var centerX = window.innerWidth * 0.5;
  var centerY = window.innerHeight * 0.5;

  camera.position.x = (e.clientX - centerX) * mouseTolerance;
  camera.position.y = (e.clientY - centerY) * mouseTolerance;
};

//Render loop
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

body{
  margin: 0;
  overflow: hidden;
  height: 400px;
  width: 600px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>

The mouse position is tracked using document.onmousemove, allowing for camera repositioning along different axes like camera.position.[axis]. Experimenting with various axes can yield different parallax effects, but make sure objects are placed at varying distances from the camera for optimal results.

Answer 4

To create a parallax effect, you can track the mouse position and adjust the camera's position along different axes based on the movement of the mouse.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

camera.position.z = 150;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create cloud of spheres
for (let i = 0; i <= 200; i++) {
  const geometry = new THREE.SphereGeometry(5, 32, 32);
  const material = new THREE.MeshBasicMaterial({ color: 0x3399ff, transparent: true, opacity: 0.8});
  const sphere = new THREE.Mesh(geometry, material);
  sphere.position.x += Math.round(Math.random() * 500) - 250;
  sphere.position.y += Math.round(Math.random() * 500) - 250;
  sphere.position.z += Math.round(Math.random() * 200);
  scene.add(sphere);
}

// Control with mouse movement
var mouseTolerance = 0.1;

document.onmousemove = function (e) {
  var centerX = window.innerWidth * 0.5;
  var centerY = window.innerHeight * 0.5;

  camera.position.x = (e.clientX - centerX) * mouseTolerance;
  camera.position.y = (e.clientY - centerY) * mouseTolerance;
};

//Render loop
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

body{
  margin: 0;
  overflow: hidden;
  height: 400px;
  width: 600px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>

The mouse position is tracked using document.onmousemove, allowing for camera repositioning along different axes like camera.position.[axis]. Experimenting with various axes can yield different parallax effects, but make sure objects are placed at varying distances from the camera for optimal results.

Creating a stunning parallax effect with Three.js: A step-by-step guide

Answer №1

Answer №2

Similar questions

Custom Sign-in features in NextJS now direct users to the default form for entering login

What could be causing issues with my Ajax and JavaScript functionality?

Alternative for document.ready in AngularJS when outside of AngularJS

React component fails to render after import

To implement the replacement of text with a selected item in AngularJS, simply

Tips for determining if a mobile web browser is active on a mobile device's foreground or background

We encountered an error while trying to locate the 'socket.io' view in the views directory

Tips for adding your artistic touch to photos

Listen for changes in the clientWidth of an element in Vue 3

What is the best way to place a popover above a selected text section?

Incorporating Javascript jQuery functionalities from an external file

What is the best way to prevent an HTMLCollection from automatically updating?

Testing the Mongoose save() method by mocking it in an integration test

JavaScript functions with similar parent names

What is the best way to choose distinct items from a Promise<Array[]> in Angular 2/4?

Progressive zoom effect applied to an image in a JavaScript slideshow

Assign the output of an XQuery query to a variable in JavaScript

How can I transform this dynamic ajax function into Vue.js?

React.Children does not reveal the presence of any offspring

Ionic: Error - Unable to access the 'ready' property of an undefined object