要實現(xiàn)JavaScript中的3d旋轉(zhuǎn)效果，應(yīng)使用three.JS庫進行開發(fā)。具體步驟如下：1. 引入three.js庫；2. 創(chuàng)建場景（scene）作為舞臺；3. 創(chuàng)建相機（camera）設(shè)置視角；4. 創(chuàng)建渲染器（renderer）負責(zé)繪制；5. 創(chuàng)建3d對象并添加到場景中；6. 使用requestanimationframe創(chuàng)建動畫循環(huán)，并在循環(huán)中更新對象的rotation屬性以實現(xiàn)旋轉(zhuǎn)。此外，為優(yōu)化性能，需減少多邊形數(shù)量、優(yōu)化紋理、減少draw calls、使用webgl2等策略。加載外部模型時可使用gltf/glb格式并通過three.gltfloader導(dǎo)入。處理鼠標點擊交互則通過three.raycaster檢測射線與物體的相交。這些方法共同構(gòu)成了three.js開發(fā)中實現(xiàn)3d旋轉(zhuǎn)、性能優(yōu)化、模型加載和用戶交互的核心流程。
要實現(xiàn)JavaScript中的3D旋轉(zhuǎn)效果，Three.js是一個非常棒的選擇。它簡化了WebGL的復(fù)雜性，讓你能更專注于創(chuàng)造視覺效果。
使用Three.js創(chuàng)建3D旋轉(zhuǎn)動畫
首先，你需要設(shè)置Three.js環(huán)境。這包括引入Three.js庫，創(chuàng)建一個場景（Scene）、一個相機（Camera）和一個渲染器（Renderer）。場景就像一個舞臺，相機是你的視角，渲染器則負責(zé)將場景繪制到屏幕上。
<!DOCTYPE html> <html> <head> <title>Three.js 3D Rotation</title> <style> body { margin: 0; } canvas { display: block; } </style> </head> <body> <script src="https://threejs.org/build/three.js"></script> <script> // 1. 創(chuàng)建場景 const scene = new THREE.Scene(); // 2. 創(chuàng)建相機 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 5; // 將相機向后移動 // 3. 創(chuàng)建渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); // 4. 創(chuàng)建一個立方體（或其他3D對象） const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } ); // 綠色線框 const cube = new THREE.Mesh( geometry, material ); scene.add( cube ); // 5. 創(chuàng)建動畫循環(huán) function animate() { requestAnimationFrame( animate ); // 旋轉(zhuǎn)立方體 cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); } animate(); </script> </body> </html>
這段代碼創(chuàng)建了一個綠色的線框立方體，并使其繞X軸和Y軸旋轉(zhuǎn)。requestAnimationFrame函數(shù)用于創(chuàng)建一個動畫循環(huán)，它會告訴瀏覽器在下次重繪之前調(diào)用animate函數(shù)，從而實現(xiàn)流暢的動畫效果。
Three.js性能優(yōu)化：如何避免卡頓？
優(yōu)化Three.js性能是一個持續(xù)的過程，特別是當場景變得復(fù)雜時。以下是一些可以嘗試的策略：
-
減少多邊形數(shù)量： 3D模型的多邊形越多，渲染的負擔(dān)就越重。盡量使用低多邊形模型，或者使用LOD（Level of Detail）技術(shù)，根據(jù)物體與相機的距離動態(tài)調(diào)整模型的復(fù)雜度。
-
紋理優(yōu)化： 紋理是影響性能的另一個關(guān)鍵因素。使用壓縮紋理格式（如.dds或.ktx），并確保紋理的分辨率與實際需求相匹配。避免使用過大的紋理。
-
減少Draw Calls： Draw Calls是指CPU向GPU發(fā)出的渲染指令。每個Draw Call都有一定的開銷，所以盡量減少Draw Calls的數(shù)量。可以使用THREE.InstancedMesh來渲染大量相同的物體，或者使用THREE.BufferGeometry來合并多個幾何體。
-
陰影優(yōu)化： 陰影會顯著增加渲染負擔(dān)。如果不需要高質(zhì)量的陰影，可以降低陰影貼圖的分辨率，或者使用烘焙陰影貼圖。
-
使用WebGL2： WebGL2提供了許多性能優(yōu)化特性，如實例化渲染、變換反饋等。如果你的目標用戶支持WebGL2，可以考慮使用它。
-
避免頻繁的場景更新： 盡量減少每幀需要更新的物體數(shù)量。如果某些物體不需要動畫，可以將它們設(shè)置為靜態(tài)的。
-
使用性能分析工具： Three.js提供了性能分析工具，可以幫助你找出性能瓶頸。使用THREE.WebGLRenderer.info可以查看渲染器的統(tǒng)計信息，如Draw Calls數(shù)量、三角形數(shù)量等。
Three.js加載外部模型：如何導(dǎo)入GLTF/GLB模型？
Three.js可以加載多種3D模型格式，其中GLTF/GLB格式是推薦的選擇。GLTF（GL Transmission format）是一種開放標準的3D模型格式，它旨在高效地傳輸和加載3D場景。GLB是GLTF的二進制版本，它將所有資源（如幾何體、紋理等）打包到一個文件中，方便傳輸。
要加載GLTF/GLB模型，你需要使用THREE.GLTFLoader。
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; const loader = new GLTFLoader(); loader.load( 'path/to/your/model.glb', function ( gltf ) { scene.add( gltf.scene ); }, undefined, function ( error ) { console.error( error ); } );
這段代碼首先創(chuàng)建一個GLTFLoader實例，然后調(diào)用load方法加載模型。load方法接受三個參數(shù)：
- 模型的URL。
- 加載成功后的回調(diào)函數(shù)。該函數(shù)接受一個gltf對象作為參數(shù)，該對象包含了模型的場景、相機、動畫等信息。你可以將gltf.scene添加到場景中，從而顯示模型。
- 加載失敗后的回調(diào)函數(shù)。
GLTF/GLB模型的優(yōu)勢在于：
- 高效： GLTF/GLB格式針對實時渲染進行了優(yōu)化，具有高效的壓縮和傳輸特性。
- 開放標準： GLTF是一種開放標準，受到廣泛的支持。
- 易于使用： Three.js提供了GLTFLoader，可以方便地加載GLTF/GLB模型。
Three.js如何處理用戶交互：鼠標點擊事件？
在3D場景中添加用戶交互是提升用戶體驗的關(guān)鍵。Three.js提供了多種方式來處理用戶交互，其中鼠標點擊事件是最常見的交互方式之一。
要處理鼠標點擊事件，你需要使用THREE.Raycaster。Raycaster用于從相機發(fā)射一條射線，檢測該射線與場景中的物體是否相交。
const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); function onMouseClick( event ) { // 將鼠標位置歸一化為-1到+1之間的值 mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; // 通過相機和鼠標位置更新射線 raycaster.setFromCamera( mouse, camera ); // 計算射線與物體的相交 const intersects = raycaster.intersectObjects( scene.children ); if ( intersects.length > 0 ) { // intersects[0].object 是被點擊的物體 console.log( '點擊了物體：', intersects[0].object ); // 可以對被點擊的物體進行操作 intersects[0].object.material.color.set( 0xff0000 ); // 將顏色設(shè)置為紅色 } } window.addEventListener( 'click', onMouseClick, false );
這段代碼首先創(chuàng)建一個Raycaster實例和一個Vector2實例，用于存儲鼠標位置。onMouseClick函數(shù)在鼠標點擊時被調(diào)用。該函數(shù)首先將鼠標位置歸一化為-1到+1之間的值，然后使用raycaster.setFromCamera方法更新射線。最后，使用raycaster.intersectObjects方法計算射線與場景中物體的相交。如果射線與物體相交，則intersects數(shù)組將包含相交的物體。你可以通過intersects[0].object訪問被點擊的物體。
需要注意的是，raycaster.intersectObjects方法會檢測射線與場景中所有物體的相交。如果場景中的物體數(shù)量很多，這可能會影響性能。為了提高性能，你可以將需要檢測的物體添加到單獨的組中，然后使用raycaster.intersectObjects方法只檢測該組中的物體。
const clickableObjects = []; // 存儲可點擊的物體 // 將可點擊的物體添加到clickableObjects數(shù)組中 clickableObjects.push( cube ); // 在onMouseClick函數(shù)中，只檢測clickableObjects數(shù)組中的物體 const intersects = raycaster.intersectObjects( clickableObjects );
通過使用Raycaster，你可以方便地在Three.js場景中處理鼠標點擊事件，實現(xiàn)豐富的用戶交互。
