Dieser Artikel stellt hauptsächlich den von three.js erzielten 3D-Sichtfeldskalierungseffekt im Detail vor. Ich hoffe, dass er jedem helfen kann.
Zuerst einmal kein Unsinn mehr, was ist Three.js und was es tut. Wenn Sie es nicht wissen, gehen Sie zu Baidu.
Der Herausgeber empfiehlt jedem einen Artikel: Three.js Quick Start Tutorial
Gestern habe ich entdeckt, dass die Verkleinerung und Vergrößerung des 3D-Sichtfelds in three.js durch die Verwendung von erreicht werden kann Fern- und Nahfokus der Kamera.
Nach dem Herauszoomen:
Hier kommt eine Perspektivkamera zum Einsatz:
//照相机配置 var fov = 40;//拍摄距离 var near = 1;//最小范围 var far = 1000;//最大范围 var camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);
Hier können Sie den Wert von fov ändern und die Kamera aktualisieren.
camera.fov = fov;//fov是变量哦 camera.updateProjectionMatrix(); renderer.render(scene, camera);
Außerdem: Wir sind es alle gewohnt, das Mausrad nach oben und unten zu bewegen, um den Zoomeffekt zu erzielen, also schauen Sie sich den Code an
canvas.addEventListener('mousewheel', mousewheel, false);
//鼠标滑轮
function mousewheel(e) {
e.preventDefault();
//e.stopPropagation();
if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
fov -= (near < fov ? 1 : 0);
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
fov += (fov < far ? 1 : 0);
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail > 0) { //当滑轮向上滚动时
fov -= 1;
}
if (e.detail < 0) { //当滑轮向下滚动时
fov += 1;
}
}
camera.fov = fov;
camera.updateProjectionMatrix();
renderer.render(scene, camera);
//updateinfo();
}Verwandte Empfehlungen:
Three.js-Tutorial zum Zeichnen eines 3D-Würfels
Three.js-Implementierung von Teilen von 3D-Kartenbeispielen
Detaillierte Beispiele für HTML5 und CSS3 zur Erzielung eines 3D-Konvertierungseffekts
Das obige ist der detaillierte Inhalt vonThree.js3D-Sichtfeld-Skalierungseffekt-Implementierungsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
