Use three.js to achieve cool acid style 3D page effects

This article mainly introduces how to use the React+three.js technology stack to load 3D models, add 3D text, increase animation, click interaction, etc., and cooperate with style design to achieve a design-filled 🤢`acid-style page.

background

I have recently learned some basic knowledge of WebGL and Three.js , so I want to combine the recently popular acid design style to decorate my personal homepage and summarize some of the knowledge I have learned. This article mainly introduces how to use React + three.js technology stack to load 3D模型, add 3D文字, increase animation, click interaction, etc., and cooperate with style design to achieve a design-filled 🤢 -style page.

Basics

Three.js

Three.js is a 3D引擎that runs in the browser based on the native WebGL package. It can be used to create various three-dimensional scenes, including cameras, lights, shadows, materials and other objects. It is a very widely used 3D engine. You can learn more in-depth in the official Chinese documentation of three.js.

Acid Design

The term酸性設計, translated from Acid Graphics , originated from the acid house music, electronic dance music and hippie culture of上世紀90年代. In the field of design, this acid aesthetic carries a自由的主張, grotesque graphics, bold and bright colors, special material textures, and a variety of fonts, forming a unique acid design style.

In short, the combination of鮮艷高飽和度colors;五彩斑斕的黑with black and gray as the base and highly saturated熒光色to embellish the picture; the futuristic, cool, and technological materials such as液態金屬,玻璃,鋁箔塑料, etc.; the layout of隨機elements and graphics; the constant重復, cutting, and combination of幾何圖形are all acidic design styles. The acid style has also gradually become popular in music album covers, visual posters, book and movie covers, and web design.

Achieve results

Online preview: https://tricell.fun

accomplish

3D Model

Scene initialization

🌏 Create a scene

scene = new THREE.Scene();

📷 the camera

4個parameters of透視相機PerspectiveCamera are: field of view, aspect ratio, near plane, and far plane.

camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
// Set the camera position camera.position.set(600, 20, -200);
// The camera focuses on the center of the screen camera.lookAt(new THREE.Vector3(0, 0, 0));

💡 light source

Add半球光源HemisphereLight : Create a more natural light source for outdoor effects

light = new THREE.HemisphereLight(0xffffff, 0x444444);
light.position.set(0, 20, 0);
scene.add(light);
light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 20, 10);
light.castShadow = true;
scene.add(light);

Add環境光AmbientLight :

var ambiColor = '#0C0C0C';
var ambientLight = new THREE.AmbientLight(ambiColor);
scene.add(ambientLight);

Add accessibility tools (optional)

📦 auxiliary grid

GridHelper can be used to add grid auxiliary lines and can also be used for decoration, which is implemented through GridHelper(size, divisions, colorCenterLine, colorGrid) .

• size : grid width, default value is 10 . divisions : equal divisions, the default value is 10 .
• colorCenterLine : Center line color, the default value is 0x444444 .
• colorGrid : Grid line color, the default value is 0x888888 .

var grid = new THREE.GridHelper(1000, 100, 0x000000, 0x000000);
grid.material.opacity = 0.1;
grid.material.transparent = true;
grid.position.set(0, -240, 0);
scene.add(grid);

📦 camera controls

The camera control OrbitControls can be used to scale, translate, and rotate the three-dimensional scene. What is essentially changed is not the scene, but the parameters of the camera. OrbitControls.js needs to be introduced separately during development.

controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();

📦 performance viewing plug-in

stats is an auxiliary library developed by Three.js , which is mainly used to detect the number of frames when the animation is running. stats.js also needs to be imported separately.

stats = new Stats();
container.appendChild(stats.dom);

Loading the model

The 3D model of the扔鐵餅的人statue used in this article is from threedscans.com and can be downloaded and used免費😄 . At the end of this article, multiple free model download websites are provided, with 200多頁of free models. If you are interested, you can choose your favorite model to download and use. Of course, students with modeling skills can also use professional modeling software such as blender and 3dmax to generate their favorite models.

Load obj or fbx model

You need to import FBXLoader.js or OBJLoader.js separately. The model loading methods of .fbx and .obj formats are the same.

// var loader = new THREE.FBXLoader();
var loader = new THREE.OBJLoader();
loader.load(model, function (object) {
  object.traverse(function (child) {
    if (child.isMesh) {
      child.castShadow = true;
      child.receiveShadow = true;
    }
  });
  object.rotation.y = Math.PI / 2;
  object.position.set(0, -200, 0);
  object.scale.set(0.32, 0.32, 0.32);
  model = object;
  scene.add(object);
});

Loading gltf model

GLTFLoader.js needs to be introduced separately. The method of loading .gltf format models is slightly different. It should be noted that the traversal object of the model and the final addition to the scene is object.scene instead of object .

var loader = new THREE.GLTFLoader();
loader.load(model, function (object) {
  object.scene.traverse(function (child) {
    if (child.isMesh) {
      child.castShadow = true;
      child.receiveShadow = true;
    }
  });
  object.scene.rotation.y = Math.PI / 2;
  object.scene.position.set(0, -240, 0);
  object.scene.scale.set(0.33, 0.33, 0.33);
  model = object.scene;
  scene.add(object.scene);
});

The effect after adding the mesh and loading the model is shown in the figure below.

Add turntable animation

Add the turntable animation effect by refreshing the page using requestAnimationFrame method. window.requestAnimationFrame() tells the browser that you want to perform an animation and asks the browser to call the specified callback function to update the animation before the next repaint. This method requires a callback function to be passed as a parameter, which will be executed before the next repaint of the browser.

function animate () {
  requestAnimationFrame(animate);
  // As the page is redrawn, the scene's rotation.y is continuously changed to achieve rotation scene.rotation.y -= 0.015;
  renderer.render(scene, camera);
}

Adding click interactions

In the Three.js scene, if we want to click on a model to get its information or do some other operations, we need to use Raycaster（光線投射） . The principle is to emit a beam of rays at the location where you click the mouse, and all objects in the ray are recorded. The basic syntax is Raycaster(origin, direction, near, far) where:

• origin : The starting point vector of the ray.
• direction : The direction vector of the ray.
• near : All returned results should be farther than near . The value cannot be negative and the default value is 0 .
• far : All returned results should be closer than far . Cannot be less than near , the default value無窮大.

The basic steps of code implementation are: get the coordinates of the mouse on the screen → convert screen coordinates to standard device coordinates → convert standard device coordinates to world coordinates → get the world coordinates of the mouse in the scene → generate a ray casting direction unit vector based on the world coordinates and the camera → create a ray caster object based on the ray casting direction unit vector.

//Declare raycaster and mouse variables var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
onMouseClick = event => {
  // Convert the screen coordinates of the mouse click position into standard coordinates in threejs, with the center of the screen as the origin, and the value range is -1 to 1.
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
  // Calculate the raycaster based on the position of the mouse point and the current camera matrix
  raycaster.setFromCamera(mouse, camera);
  // Get the array collection of intersections between the raycaster line and all models let intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
    alert('HELLO WORLD')
    // You can click on different meshes to trigger different interactions by traversing, such as:
    let selectedObj = intersects[0].object;
    if (selectedObj.name === 'car') {
      alert('Car 🚗')
    }
  }
}
window.addEventListener('click', onMouseClick, false);

Add 3D Text

Use TextGeometry(text : String, parameters : Object) to add 3D文字. The following are descriptions of the properties that can be set:

• size : font size, usually the height of uppercase letters.
• height : The thickness of the text. weight : The value is normal or bold , indicating whether to bold.
• font : font, the default is helvetiker , which needs to correspond to the referenced font file.
• style : the value is normal or italics , indicating whether it is italic
• bevelThickness : chamfer thickness.
• bevelSize : Bevel width.
• curveSegments : The number of arc segments, which makes the curve of the text smoother.
• bevelEnabled : Boolean value, whether to use chamfer, which means bevel at the edges.

var loader = new THREE.FontLoader();
loader.load('gentilis_regular.typeface.json', function (font) {
  var textGeo = new THREE.TextGeometry('HELLO WORLD', {
    font: font,
    size: .8,
    height: .8,
    curveSegments: .05,
    bevelThickness: .05,
    bevelSize: .05,
    bevelEnabled: true
  });
  var textMaterial = new THREE.MeshPhongMaterial({ color: 0x03c03c });
  var mesh = new THREE.Mesh(textGeo, textMaterial);
  mesh.position.set(0, 3.8, 0);
  scene.add(mesh);
}); 

optimization

Now the model loading has been basically completed, but the volume of 3D models is generally large. After deployment, I found that the web page loading is very slow, which affects the user experience. It is very necessary to reduce the model size. I searched for compression tools on the Internet for a long time and found that without installing large-scale 3D建模軟件, using obj2gltf can convert larger OBJ format models into gltf models, effectively optimizing the model volume and improving web page loading speed.

Install

npm install obj2gltf --save

Copy the obj model into the following directory

node_modules\obj2gltf\bin

Execute transcoding instructions

node obj2gltf.js -i demo.obj -o demo.gltf

As shown in the figure, the above content appears and the transcoding is completed. Comparing the file sizes before and after the conversion, in this example, the initial file size of kas.obj is 9.7M , and the converted file kas.gltf is only 4.6M , which is half the size. At this time, the converted model is loaded onto the page, and the naked eye can hardly see the change in the model effect. At the same time, the page loading speed is significantly improved.

obj2gltf can also be used as a library to convert models in real time through node服務. Interested students can learn more through the link at the end of the article.
You can also use 3D modeling software such as blender to manually compress and optimize the model by reducing面數and縮小體積. This optimization effect is more obvious.

Complete code

var model = require('@/assets/models/kas.gltf');
var container, stats, controls;
var camera, scene, renderer, light, model;
class Kas extends React.Component {
  render () {
    return (
      <div id="kas"></div>
    )
  }
  componentDidMount() {
    this.initThree();
  }
  initThree () {
    init();
    animate();
    function init () {
      container = document.getElementById('kas');
      scene = new THREE.Scene();
      scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000);
      // Perspective camera: field of view, aspect ratio, near plane, far plane camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set(600, 20, -200);
      camera.lookAt(new THREE.Vector3(0, 0, 0));
      // Hemisphere light source: Create a more natural light source for outdoor effects light = new THREE.HemisphereLight(0xffffff, 0x444444);
      light.position.set(0, 20, 0);
      scene.add(light);
      light = new THREE.DirectionalLight(0xffffff);
      light.position.set(0, 20, 10);
      light.castShadow = true;
      scene.add(light);
      // Ambient light var ambiColor = '#0C0C0C';
      var ambientLight = new THREE.AmbientLight(ambiColor);
      scene.add(ambientLight);
      // Grid var grid = new THREE.GridHelper(1000, 100, 0x000000, 0x000000);
      grid.material.opacity = 0.1;
      grid.material.transparent = true;
      grid.position.set(0, -240, 0);
      scene.add(grid);
      // Load gltf model var loader = new THREE.GLTFLoader();
      loader.load(model, function (object) {
        object.scene.traverse(function (child) {
          if (child.isMesh) {
            child.castShadow = true;
            child.receiveShadow = true;
          }
        });
        object.scene.rotation.y = Math.PI / 2;
        object.scene.position.set(0, -240, 0);
        object.scene.scale.set(0.33, 0.33, 0.33);
        model = object.scene;
        scene.add(object.scene);
      });
      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearAlpha(0);
      renderer.shadowMap.enabled = true;
      container.appendChild(renderer.domElement);
      window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      }, false);
      stats = new Stats();
      container.appendChild(stats.dom);
    }
    function animate () {
      var clock = new THREE.Clock()
      requestAnimationFrame(animate);
      var delta = clock.getDelta();
      scene.rotation.y -= 0.015;
      renderer.render(scene, camera);
      stats.update();
    }
    // Add click event //Declare raycaster and mouse variables var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();
    function onMouseClick(event) {
      // Calculate the position of the point required by the raycaster through the mouse click position, with the center of the screen as the origin, and the value range is -1 to 1.
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
      // Calculate the raycaster based on the position of the mouse point and the current camera matrix
      raycaster.setFromCamera(mouse, camera);
      // Get the array collection of intersections between the raycaster line and all models var intersects = raycaster.intersectObjects(scene.children);
      if (intersects.length > 0) {
        alert('HELLO WORLD')
      }
    }
    window.addEventListener('click', onMouseClick, false);
  }
}

Other design elements

This article mainly introduces the loading of 3D元素. Due to the limited length of the article and time (博主太懶😂 maybe , the implementation of other elements will not be explained in detail (maybe I will summarize it later). Interested students can read the following excellent articles by other great masters.

Fluid Background

靜態liquid backgrounds can be created with SVG filters. You can read Creating Patterns With SVG filter . To create動態fluid backgrounds, you can use Three.js combined with native GLSL. You can refer to the CodePen Shader Template example to implement it.

For acid effect fonts such as metal, neon, and glitch effects, you can read my other article "Achieve Cyberpunk 2077 style visual effects with only a few steps of CSS", or you can use design generation. Due to time constraints, the metal effect text in this project and the text in the banner header of this article are all generated using an online art font generation website. Interested students can try to design it by themselves.

Further optimization in the future

• #todo style liquid background implementation.
• #todo 3D模型liquid metal effect.

three.js excellent case recommendation

Finally, I would like to recommend several amazing three.js projects for you to experience and learn together. Whether it is page interaction, visual design or performance optimization, they have achieved the ultimate, and you can learn a lot from them.

github homepage: 3D地球displays the world's popular repositories in real time.

kodeclubs: A low-polygon 3D城市third-person game.

Sneaker display: 720度dynamic display of sneakers.

Sand sculpture dance: sand sculpture animal dancers.

Zenly software: Zenly App Chinese homepage.

References

three.js: https://threejs.org

obj2gltf: https://github.com/CesiumGS/obj2gltf

200+ pages of free 3d models https://www.turbosquid.com

Free 3D statues: https://threedscans.com

Free 3D Models: https://free3d.com

Artistic font online generation: https://cooltext.com

What is Acid Design: https://www.shejipi.com/361258.html

Author: dragonir Article URL: https://www.cnblogs.com/dragonir/p/15350537.html

This is the end of this article about using three.js to implement a cool acid-style 3D page. For more related three.js acid-style 3D page content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!