How to achieve interactive web graphic

Web Design
#1

Hi,

I need some advice please on how to achieve an interactive web graphic. I need something like a sphere or plane that a user can drag and rotate. I have creative cloud and started looking at animate or illustrator 3d, and I can save a rotating sphere as an animated gif, but I don’t see any way to make it interactive or at the very least put hyperlinks on it.

Also, I don’t really know what to google to find out, if I google ‘interactive web graphic’ then I just get advice on hovers or css.

Pointers welcome,
many thanks.

1 Like
#2

Try searching for “360 degree spin web graphic.”

#3

I’d search for “interactive 3d web graphics”

#4

You won’t get that interaction in just one file on the web. I used to look at this website called Codrops because it was filled with experiments like what you’ve described.

I’m more than a bit out of my depth but, I’d guess you’ll need a Lottie animation tied to user interaction with some flavor of JavaScript.

#5

As @dgolas mentioned, it’s doable with JavaScript, but it requires some advanced coding ability. Here’s an example along with the code (using a D3 JavaScript library), which you’ll see isn’t something most people can jump right into.

#6

Wow thank you.

So I can use D3, and now I know what to search for there will probably be some libraries available too, for instance, I just found an ajax assets/js/jquery.threesixty.js.

I guess with all the CC suite and generative AI plugins I assumed this would be easier! I was thinking I might be able to drag an .obj file into a graphics tool and save it as an interactive animated gif. But okay then back to javascript, I’ll work through the options.

Many thanks!

#7

To create an interactive web graphic that a user can drag and rotate, you can use JavaScript. There are a number of JavaScript libraries that can help you do this, such as Three.js, A-Frame, and Babylon.js.

Here is a simple example of how to create an interactive sphere using Three.js:

HTML

<canvas id="canvas"></canvas>

JavaScript

// Create a scene
var scene = new THREE.Scene();

// Create a sphere
var geometry = new THREE.SphereGeometry(100, 32, 32);
var material = new THREE.MeshPhongMaterial({ color: 0x00ffff });
var sphere = new THREE.Mesh(geometry, material);

// Add the sphere to the scene
scene.add(sphere);

// Create a camera
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);

// Create a renderer
var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });

// Render the scene
renderer.render(scene, camera);

// Make the sphere draggable
sphere.addEventListener('mousedown', function(event) {
  event.preventDefault();

  // Get the mouse position
  var mouseX = event.clientX;
  var mouseY = event.clientY;

  // Set the sphere's position
  sphere.position.x = mouseX;
  sphere.position.y = mouseY;
});

// Make the sphere rotatable
sphere.addEventListener('mousemove', function(event) {
  event.preventDefault();

  // Get the mouse position
  var mouseX = event.clientX;
  var mouseY = event.clientY;

  // Calculate the rotation
  var rotationX = (mouseX - sphere.position.x) / 100;
  var rotationY = (mouseY - sphere.position.y) / 100;

  // Rotate the sphere
  sphere.rotation.x += rotationX;
  sphere.rotation.y += rotationY;
});

This code will create a simple interactive sphere that the user can drag and rotate. You can customize the code to change the appearance of the sphere, add additional objects to the scene, and add hyperlinks.

Here are some tips for creating interactive web graphics:

  • Use a JavaScript library to make it easier to create and manipulate 3D objects.
  • Use a canvas element to render your graphics. This will give you more control over the appearance of your graphics and allow you to interact with them using JavaScript.
  • Use events to detect user interaction, such as mouse clicks and drags.
  • Use hyperlinks to navigate between different parts of your graphic or to link to other web pages.
    :+1: