【34】three.js实战—纹理加载进度

The article discusses the process of setting up a 3D scene using Three.js, Vue.js, and additional libraries such as gsap for animation, and dat.gui for a GUI controller. The code snippet provided outlines the steps taken in the Vue component lifecycle to initialize and render 3D content.

Initially, a new THREE.Scene is created, followed by a perspective camera setup with its position set to allow a good view of the scene. The camera is then added to the scene. A div element is created to display the progress of image loading, utilizing event handlers for load progress and errors. A THREE.LoadingManager instance is used to manage these events.

The code then demonstrates the process of loading textures using THREE.TextureLoader and applying them to materials. A cube and a plane are created with detailed geometry and the loaded textures applied, including settings for alpha transparency, ambient occlusion, displacement, roughness, metalness, and normal mapping. These objects are then added to the scene.

To properly illuminate the materials, an ambient light and a directional light are added to the scene. A WebGLRenderer is initialized for rendering the scene, and its canvas is appended to a container in the DOM. The renderer is set to the size of the window and used to render the scene through the camera.

An OrbitControls instance is created to allow interactive control of the camera around the scene, and its damping feature is enabled for more natural movement. An AxesHelper is added to visualize the scene's axes. Event listeners are set up to handle double-click actions for toggling fullscreen mode and window resize events to adjust the camera and renderer settings accordingly.

Finally, the render method is defined to continuously update the controls and render the scene. It uses requestAnimationFrame to create a render loop, with the correct context binding to avoid call stack issues.