Three.js is a 3D graphics library based on WebGL encapsulation, suitable for quickly building interactive 3D scenes. 1. To create a basic scene, you need to introduce Three.js and initialize Scene, Camera and Renderer; 2. Add geometric objects such as cubes and set the camera position; 3. Use OrbitControls to achieve interactive operations; 4. Use requestAnimationFrame to achieve animation effects; 5. Use loaders such as GLTFLoader to load external models and pay attention to adaptation and optimization; 6. When deploying, cross-domain, responsive design and mobile adaptation issues must be handled. Mastering these core steps further explore advanced features.

WebGL and Three.js are common tools for implementing 3D graphics display in modern front-end development. Three.js is based on WebGL encapsulation, reducing the complexity of using WebGL directly, and is suitable for quickly building interactive 3D scenarios. Three.js is a useful choice if you plan to include 3D models, animations, or visualizations in your web page.

Create a basic scenario: Start with "visible"

The first step in developing with Three.js is to build a basic scenario where you can see the content. You need to introduce the Three.js library (can be installed via CDN or npm), and then create the scene (Scene), the camera (Camera), and the renderer (Renderer).

 const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

This code creates a blank scene and inserts the renderer into the page. Then you can add geometry, materials, light sources and other elements to enrich the picture. For example, add a simple cube:

 const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;

Finally, remember to call renderer.render(scene, camera) in the loop to continuously render the picture.

Add interaction and animation: Make the screen move

The static 3D scene is intuitive, but lacks appeal. You can increase interactivity by listening to user input (such as mouse drag, scroll wheel zoom) or automatic rotation.

A common practice is to use the OrbitControls plugin, which allows you to easily rotate, zoom, and pan around objects:

• Introducing OrbitControls:

   import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

• Initialize and bind the DOM elements of the camera and renderer:

   const controls = new OrbitControls(camera, renderer.domElement);

In terms of animation, you can use requestAnimationFrame to loop to update the object state, such as making the cube rotate continuously:

 function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x = 0.01;
  cube.rotation.y = 0.01;
  renderer.render(scene, camera);
}
animate();

This way you can see a green cube that rotates continuously.

Loading model and optimization performance: closer to real projects

In actual projects, we often do not manually create complex geometry, but load external model files, such as GLTF, OBJ, FBX and other formats. Three.js provides multiple loaders to support these formats:

 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('path/to/model.gltf', (gltf) => {
  scene.add(gltf.scene);
});

The following points should be paid attention to when loading the model:

• Model size adaptation : After importing, you may need to adjust the position and scaling.
• Texture path problem : Ensure that the map resources that the model depends on are loaded correctly.
• Performance optimization : Large models may cause page stuttering, and it is recommended to compress the model or use Draco compression format.

In addition, in order to improve the user experience, you can also add a loading progress bar or placeholder animation to let the user know that it is loading.

Deployment compatibility with cross-platform: Don't ignore details

After completing development, some common issues should be paid attention to when deploying to an online environment:

• Cross-domain restrictions : Loading local model files may experience CORS errors, and it is best to deploy on the server.
• Responsive design : When the window size changes, update the camera scale and renderer size:

   window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  });

• Mobile adaptation : Touch control is more complex than mouse. OrbitControls already supports basic gestures, but it still needs to test performance on different devices.

Basically that's it. After mastering these core points, you can try more advanced functions, such as post-processing, physics engine integration, particle systems, etc. The whole process is not complicated, but some details are easy to ignore. Planning the structure and resource management in advance will make you achieve twice the result with half the effort.

The above is the detailed content of Frontend Development with WebGL and Three.js. For more information, please follow other related articles on the PHP Chinese website!