您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > Python

Python Web 3D开发入门

时间:2023-01-11 15:28:18  来源:今日头条  作者:新缸中之脑

在本文中,我们将学习如何在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/



Tags:Python   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
在本文中,我们将学习如何在Python中使用three.js库,而无需编写任何一行 JavaScript。我们将使用PyWeb3D,这是一个额外的层,旨在与Brython的three.js轻松交互。 1、什么是PyWeb3D...【详细内容】
2023-01-11  Tags: Python  点击:(0)  评论:(0)  加入收藏
前言许多小伙伴已经可以使用 Python 解决小问题。定义几个变量,洋洋洒洒写几段 if 和 for 都不喘气。但是,面对一个稍微复杂的问题,总感觉哪里不对劲,好像代码怎么样都写不出来...【详细内容】
2023-01-06  Tags: Python  点击:(9)  评论:(0)  加入收藏
介绍首先我不是量化工程师,我只是个后端工程师;其次我对量化也不感兴趣,自己有几把刷子还是了解的,自己不适合做量化交易: 自己没有优秀的模型设计能力 自己是个长线投资,一般一个...【详细内容】
2023-01-05  Tags: Python  点击:(11)  评论:(0)  加入收藏
eval()函数是Python的内置函数,功能非常强大,但是存在不小的安全隐患。有些企业或项目出于安全考虑,禁止使用eval()函数,会在一些安全相关的扫描校验中进行识别和拦截,杜绝使用。...【详细内容】
2023-01-05  Tags: Python  点击:(10)  评论:(0)  加入收藏
整理 | 屠敏出品 | CSDN(ID:CSDNnews)过去一年,在开源驱动的下,科技的发展迎来了巨大的变化,而当论及其所影响的具体领域、技术时,近日,TiDB 通过全面的开源软件洞察工具 OSS Insigh...【详细内容】
2023-01-04  Tags: Python  点击:(17)  评论:(0)  加入收藏
时间序列数据是一种在一段时间内收集的数据类型,它通常用于金融、经济学和气象学等领域,经常通过分析来了解随着时间的推移的趋势和模式Pandas是Python中一个强大且流行的数据...【详细内容】
2023-01-04  Tags: Python  点击:(9)  评论:(0)  加入收藏
导读:使用 C 扩展为 Python 提供特定功能。本文字数:7993,阅读时长大约: 9分钟 使用 C 扩展为 Python 提供特定功能。 在前一篇文章中,我介绍了 opensource.com。在大多数系统上,C...【详细内容】
2023-01-03  Tags: Python  点击:(19)  评论:(0)  加入收藏
TikTokDownload 是由国人开源的抖音去水印视频下载工具。开源地址是:https://github.com/Johnserf-Seed/TikTokDownload对于某些做视频分析和研究的同学来说,这个工具非常有用...【详细内容】
2023-01-03  Tags: Python  点击:(27)  评论:(0)  加入收藏
问题描述:给定四个整数,任意使用加、减、乘、除和小括号,构造出一个表达式,使得其最终结果为24,并输出这四个数字所组成的所有表达式。例如:34-15/3-5=24代码&#39;&#39;&#39;...【详细内容】
2023-01-03  Tags: Python  点击:(15)  评论:(0)  加入收藏
本文分享自华为云社区《[Python图像处理] 三十.图像预处理之图像去雾详解(ACE算法和暗通道先验去雾算法)丨【拜托了,物联网!】-云社区-华为云》,作者:eastmount 。一.图像去雾随着...【详细内容】
2022-12-30  Tags: Python  点击:(19)  评论:(0)  加入收藏
▌简易百科推荐
在本文中,我们将学习如何在Python中使用three.js库,而无需编写任何一行 JavaScript。我们将使用PyWeb3D,这是一个额外的层,旨在与Brython的three.js轻松交互。 1、什么是PyWeb3D...【详细内容】
2023-01-11  新缸中之脑  今日头条  Tags:Python   点击:(0)  评论:(0)  加入收藏
前言许多小伙伴已经可以使用 Python 解决小问题。定义几个变量,洋洋洒洒写几段 if 和 for 都不喘气。但是,面对一个稍微复杂的问题,总感觉哪里不对劲,好像代码怎么样都写不出来...【详细内容】
2023-01-06    网易号  Tags:python   点击:(9)  评论:(0)  加入收藏
介绍首先我不是量化工程师,我只是个后端工程师;其次我对量化也不感兴趣,自己有几把刷子还是了解的,自己不适合做量化交易: 自己没有优秀的模型设计能力 自己是个长线投资,一般一个...【详细内容】
2023-01-05  睡在床板下  今日头条  Tags:python   点击:(11)  评论:(0)  加入收藏
eval()函数是Python的内置函数,功能非常强大,但是存在不小的安全隐患。有些企业或项目出于安全考虑,禁止使用eval()函数,会在一些安全相关的扫描校验中进行识别和拦截,杜绝使用。...【详细内容】
2023-01-05  互联共商    Tags:python   点击:(10)  评论:(0)  加入收藏
时间序列数据是一种在一段时间内收集的数据类型,它通常用于金融、经济学和气象学等领域,经常通过分析来了解随着时间的推移的趋势和模式Pandas是Python中一个强大且流行的数据...【详细内容】
2023-01-04  互联网资讯看板    Tags:Python   点击:(9)  评论:(0)  加入收藏
导读:使用 C 扩展为 Python 提供特定功能。本文字数:7993,阅读时长大约: 9分钟 使用 C 扩展为 Python 提供特定功能。 在前一篇文章中,我介绍了 opensource.com。在大多数系统上,C...【详细内容】
2023-01-03  Linux 中国    Tags:Python   点击:(19)  评论:(0)  加入收藏
TikTokDownload 是由国人开源的抖音去水印视频下载工具。开源地址是:https://github.com/Johnserf-Seed/TikTokDownload对于某些做视频分析和研究的同学来说,这个工具非常有用...【详细内容】
2023-01-03  Python实用宝典    Tags:Python   点击:(27)  评论:(0)  加入收藏
问题描述:给定四个整数,任意使用加、减、乘、除和小括号,构造出一个表达式,使得其最终结果为24,并输出这四个数字所组成的所有表达式。例如:34-15/3-5=24代码&#39;&#39;&#39;...【详细内容】
2023-01-03  汪同学Python  今日头条  Tags:Python   点击:(15)  评论:(0)  加入收藏
本文分享自华为云社区《[Python图像处理] 三十.图像预处理之图像去雾详解(ACE算法和暗通道先验去雾算法)丨【拜托了,物联网!】-云社区-华为云》,作者:eastmount 。一.图像去雾随着...【详细内容】
2022-12-30    华为云社区  Tags:Python   点击:(19)  评论:(0)  加入收藏
下面从这几个方面来详细详解python面向对象: 初识对象 成员方法 类和对象 构造方法 其它内置方法 封装 继承 类型注解 多态 综合案例一、初识对象生活中数据的组织 学校开学...【详细内容】
2022-12-29  传智教育官方账号  今日头条  Tags:Python   点击:(29)  评论:(0)  加入收藏
站内最新
站内热门
站内头条