在本文中，我們將學(xué)習(xí)如何在python中使用three.js庫，而無需編寫任何一行 Javascript。我們將使用PyWeb3D，這是一個(gè)額外的層，旨在與Brython的three.js輕松交互。
1、什么是PyWeb3D？
簡(jiǎn)單地說，PyWeb3D是一個(gè)使用Python語法的three.js庫。這是一個(gè)用Brython和three.js構(gòu)建的開源項(xiàng)目，它旨在擴(kuò)展three.js，同時(shí)使用python語法與庫進(jìn)行交互。
本文是系列的第一篇，因此我們將保持簡(jiǎn)單。以下是我們將在本文中創(chuàng)建的內(nèi)容的示例 ，一個(gè)旋轉(zhuǎn)的立方體：
2、開發(fā)環(huán)境安裝
無需安裝任何東西即可使用 PyWeb3D。
將必要的庫和包添加到 HTML 文件的 標(biāo)記中：
<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、需要的準(zhǔn)備工作
創(chuàng)建一個(gè)文件夾并將其命名為 spinning_cube。 這將是我們的工作目錄。
在工作目錄中，創(chuàng)建一個(gè) 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> 標(biāo)簽和 <body></body> 標(biāo)簽。
- head標(biāo)簽
前兩個(gè) <script> 標(biāo)簽將加載 Brython — Brython 是用于客戶端 Web 編程的 Python 3 實(shí)現(xiàn)，旨在取代 JavaScript 作為 Web 腳本語言。
第三個(gè) <script> 標(biāo)簽將加載 three.js（Three.js 是一個(gè)易于使用、輕量級(jí)、跨瀏覽器的通用 JavaScript 3D 庫）。
最后一個(gè) <script> 標(biāo)簽將加載 pyweb3d — PyWeb3D 是 three.js，使用 python 語法。
- body標(biāo)簽
請(qǐng)注意開始 <body> 標(biāo)記中的 onload 屬性。 這就是我們告訴瀏覽器在頁面加載時(shí)調(diào)用 brython() 函數(shù)的方式。
最后是我們的 python 代碼所在的 <script type=”text/python”> </script> 標(biāo)簽
4、用Python創(chuàng)建旋轉(zhuǎn)立方體
這就是樂趣的開始。 使用感覺自然的語言。
將以下代碼粘貼到 <body> 內(nèi)的 <script type="text/python"> </script> 中：
from browser import document, windowfrom 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 = 5def animate(time): window.requestAnimationFrame( animate ) cube.rotation.x = 0.11 # cube.rotation.y = 0.01 renderer.render( scene, camera )animate(0)
讓我們看一下 Python 代碼。
首先導(dǎo)入必要的模塊和函數(shù)：
from browser import document, windowfrom pyweb3d.pyweb3d import *
第一行從 Brython 導(dǎo)入 window和 document實(shí)例。
第二行從 pyWeb3D 模塊導(dǎo)入所有 three.js 類和函數(shù)，這消除了額外的輸入和格式化，并使與 three.js 庫的交互變得簡(jiǎn)單。
其余內(nèi)容說明如下：
- 從第 5-7 行開始，我們創(chuàng)建了一個(gè)場(chǎng)景、相機(jī)和渲染器
- 在第 9 行，我們?cè)O(shè)置要在其上繪制形狀的窗口或屏幕的大小
- 在第 10 行，我們將渲染器添加到HTML 正文中
- 從第 12–15 行開始，我們創(chuàng)建了一個(gè)盒子形狀并將其添加到第 15 行的場(chǎng)景中
- 在第 17 行，我們將相機(jī)的位置向后移動(dòng)，以便我們可以從透視圖中看到形狀
- 從第 19 到 27 行，我們創(chuàng)建了一個(gè)動(dòng)畫循環(huán)并在第 27 行調(diào)用它。注意傳遞給動(dòng)畫函數(shù)的參數(shù)和自變量了嗎？ 這對(duì)于動(dòng)畫工作很重要
5、運(yùn)行代碼
在瀏覽器中打開 index.html，你應(yīng)該會(huì)看到一個(gè)美麗的旋轉(zhuǎn)立方體 ！
原文鏈接：http://www.bimant.com/blog/python-web-3d-crash-tutorial/
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。
