在本文中，我們將學習如何在Python/ target=_blank class=infotextkey>Python中使用three.js庫，而無需編寫任何一行 JAVAScript。我們將使用PyWeb3D，這是一個額外的層，旨在與Brython的three.js輕松交互。
1、什么是PyWeb3D？
簡單地說，PyWeb3D是一個使用Python語法的three.js庫。這是一個用Brython和three.js構建的開源項目，它旨在擴展three.js，同時使用python語法與庫進行交互。
本文是系列的第一篇，因此我們將保持簡單。以下是我們將在本文中創建的內容的示例 ，一個旋轉的立方體：
2、開發環境安裝
無需安裝任何東西即可使用 PyWeb3D。
將必要的庫和包添加到 html 文件的 標記中：
<script src="https://cdn.jsdelivr.NET/npm/brython@3.10.7/brython.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/brython@3.10.7/brython_stdlib.js"></script>
<script src="https://unpkg.com/three@0.145.0/build/three.js"></script>
<script src="https://www.pyweb3d.org/pyweb3d/v1.0.0/pyweb3d.brython.js"></script>
3、需要的準備工作
創建一個文件夾并將其命名為 spinning_cube。 這將是我們的工作目錄。
在工作目錄中，創建一個 index.html 文件。 這是我們所有代碼的存放位置。
將以下代碼粘貼到index.html 文件中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first pyWeb3D App</title>
<script src="https://cdn.jsdelivr.net/npm/brython@3.10.7/brython.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/brython@3.10.7/brython_stdlib.js"></script>
<script src="https://unpkg.com/three@0.145.0/build/three.js"></script>
<script src="https://www.pyweb3d.org/pyweb3d/v1.0.0/pyweb3d.brython.js"></script>
<style>
body { margin: 0; }
</style>
</head>
<body onload="brython(1)">
<script type="text/python">
from browser import document, window
from pyweb3d.pyweb3d import *
...
</script>
</body>
</html>
讓我們看一下 HTML 文件，特別是 <head></head> 標簽和 <body></body> 標簽。
- head標簽
前兩個 <script> 標簽將加載 Brython — Brython 是用于客戶端 Web 編程的 Python 3 實現，旨在取代 JavaScript 作為 Web 腳本語言。
第三個 <script> 標簽將加載 three.js（Three.js 是一個易于使用、輕量級、跨瀏覽器的通用 JavaScript 3D 庫）。
最后一個 <script> 標簽將加載 pyweb3d — PyWeb3D 是 three.js，使用 python 語法。
- body標簽
請注意開始 <body> 標記中的 onload 屬性。 這就是我們告訴瀏覽器在頁面加載時調用 brython() 函數的方式。
最后是我們的 python 代碼所在的 <script type=”text/python”> </script> 標簽
4、用Python創建旋轉立方體
這就是樂趣的開始。 使用感覺自然的語言。
將以下代碼粘貼到 <body> 內的 <script type="text/python"> </script> 中：
from browser import document, window
from pyweb3d.pyweb3d import *
scene = Scene()
camera = PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
renderer = WebGLRenderer()
renderer.setSize( window.innerWidth, window.innerHeight )
document.body.appendChild( renderer.domElement )
geometry = BoxGeometry( 1, 2, 1 )
material = MeshBasicMaterial( { 'color': 0x0000ff } )
cube = Mesh( geometry, material )
scene.add( cube )
camera.position.z = 5
def animate(time):
window.requestAnimationFrame( animate )
cube.rotation.x += 0.11
# cube.rotation.y += 0.01
renderer.render( scene, camera )
animate(0)
讓我們看一下 Python 代碼。
首先導入必要的模塊和函數：
from browser import document, window
from pyweb3d.pyweb3d import *
第一行從 Brython 導入 window和 document實例。
第二行從 pyWeb3D 模塊導入所有 three.js 類和函數，這消除了額外的輸入和格式化，并使與 three.js 庫的交互變得簡單。
其余內容說明如下：
- 從第 5-7 行開始，我們創建了一個場景、相機和渲染器
- 在第 9 行，我們設置要在其上繪制形狀的窗口或屏幕的大小
- 在第 10 行，我們將渲染器添加到HTML 正文中
- 從第 12–15 行開始，我們創建了一個盒子形狀并將其添加到第 15 行的場景中
- 在第 17 行，我們將相機的位置向后移動，以便我們可以從透視圖中看到形狀
- 從第 19 到 27 行，我們創建了一個動畫循環并在第 27 行調用它。注意傳遞給動畫函數的參數和自變量了嗎？ 這對于動畫工作很重要
5、運行代碼
在瀏覽器中打開 index.html，你應該會看到一個美麗的旋轉立方體 ！
原文鏈接：
http://www.bimant.com/blog/python-web-3d-crash-tutorial/
