Realize a picture-covered sphere with the help of three.js

Introduction

When doing display projects, it is usually necessary to achieve some circular selection effects. This can be achieved with the help of css of rotate How to implement a rotating sphere with pictures of 3D let's start.

preview address🔗

tool

three.js
OrbitControls

draw

Create a scene

To display the scene with the help of three.js, we need the following objects: scene, camera and renderer, so that we can render the scene through the camera.

let camera, scene, renderer;
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera(
    10,
    window.innerWidth / window.innerHeight,
    0.1,
    200
);
camera.position.set(30, 5, 20);
//renderer
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Let's take a moment to explain what happened here. We have now set up the scene, camera, and renderer.

There are several different cameras in three.js. Here, we are using PerspectiveCamera (perspective camera).

The first parameter is the angle of view (FOV). The angle of view is the range of the scene you can see on the monitor at any time. The larger the value, the farther.

The second parameter is the aspect ratio. That is, you divide the width of an object by its height. For example, when you play an old movie on a widescreen TV, you can see that the image seems to be squashed.

The next two parameters are near and far. When some parts of the object are farther than the far section of the camera or closer than the near section of the camera, these parts will not be rendered into the scene. Maybe you don't need to worry about the impact of this value now, but in the future, in order to get better rendering performance, you will be able to set it in your application.

Next is the renderer. This is where the magic is performed. In addition to the WebGLRenderer renderer Three.js also provides several other renderers. When the user's browser is too old or does not support WebGL for other reasons, these renderers can be used Downgrade.

In addition to creating an instance of the renderer, we also need to set the size of a renderer in our application. For example, we can use the width and height of the required rendering area to fill our application with the scene rendered by the renderer. Therefore, we can set the width and height of the renderer to the width and height of the browser window. For performance-sensitive applications, you can use setSize pass in a smaller value, such as window.innerWidth/2 and window.innerHeight/2 , which will make the application render the scene at half the length and width when rendering.

If you want to keep the size of your application, but at a lower resolution to render, you can call setSize , it will updateStyle (third parameter) is set to false . For example, assuming your <canvas> label now has 100% width and height, calling setSize(window.innerWidth/2, window.innerHeight/2, false) will make your application render at half the resolution.

The last step is very important, we will renderer (renderer) of dom element (renderer.domElement) added to our HTML document. <canvas> element that the renderer uses to show the scene to us.

"Well, it looks great, where is the sphere you mentioned?" Next, we will add the sphere.

Create a sphere

let earth;
const earthGeometry = new THREE.SphereGeometry(2, 16, 16);
const earthMaterial = new THREE.MeshBasicMaterial({
    specular: 0x333333,
    shininess: 5,
    map: textureLoader.load("./img/earth_atmos_2048.jpg"),
    specularMap: textureLoader.load("./img/earth_specular_2048.jpg"),
    normalMap: textureLoader.load("./img/earth_normal_2048.jpg"),
    normalScale: new THREE.Vector2(0.85, 0.85),
});
earth = new THREE.Mesh(earthGeometry, earthMaterial);
scene.add(earth);
// controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minDistance = 5;
controls.maxDistance = 100;
controls.enablePan = false;

To create a sphere, we need a SphereGeometry (ball buffer geometry) object. This object is created by scanning and calculating the vertices around the Y axis (horizontal scan) and X axis (vertical scan)

Next, for this sphere, we need to give it a material and add pictures. Three.js comes with several materials, here we use MeshBasicMaterial . If you need some lighting and physical materials, you can use MeshPhysicalMaterial

In the third step, we need a Mesh. The mesh contains a geometry and the material acting on this geometry. We can directly put the mesh object into our scene and let it move freely in the scene.
The fourth step is to add a controller so that we can drag to select the sphere

Render the scene

Now, if you copy the previously written code into an HTML file, you won't see anything on the page. This is because we have not really rendered it yet. For this, we need to use something called "render loop" or "animate loop"

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

Make the sphere move

Before starting, if you have written the above code into the file you created, you can see a globe. Let's do something more interesting-make it spin.

Add the following code renderer.render call in the animate() function:

  earth.rotation.x += 0.001;
  earth.rotation.y += 0.001;

This code is executed every frame (normally 60 times per second), which gives the sphere a nice-looking rotation animation. Basically, when the application is running, if you want to move or change anything in the scene, you must go through this animation loop. Of course, you can call other functions in this animation loop, so you won't write an animate function with hundreds of lines of code.

Add a background image

//加载背景纹理
var texture = textureLoader.load("./img/eQ9y7xBeY4.jpg");
scene.background = texture;

In this way, we have implemented a rotating sphere based on image coverage

end

Like it if you like it

complete code codesandbox
complete code gitee🔗
preview address🔗
Alternate preview address🔗