持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

在本文中，我将向您展示如何在不编写任何 JavaScript 代码的情况下使用 three.js 库。我们将使用 PyWeb3D，这是一个3d的框架，它是为使用 Brython 与three.js 轻松交互而构建的。

PyWeb3D是一个使用Brython和three.js构建的开源项目，它旨在扩展three.js 库，同时使用python 语法与库进行交互。

代码准备工作

创建一个项目文件夹rotating_cube
创建这两个文件index.html和rotating_cube.py
下载pyweb3d.py并将其添加到您的项目中。

目录结构如下：

1_o7-Zccs3aXnDiDYB25vTIQ (1).png

打开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/brython.min.js">
            </script>
            <script src="https://cdn.jsdelivr.net/npm/brython@3/brython_stdlib.js">
            </script>
            <script type="text/javascript"
                    src="https://unpkg.com/three@0.144.0/build/three.js"></script>
            <style>
                body { margin: 0; }
            </style>
        </head>
        <body onload="brython(1)">
            <script type="text/python" src="rotating_cube.py"></script>
        </body>
    </html>

让我们来看一下index.html的<head>部分的代码：

前两个<script>标签加载Brython（Brython 是用于客户端 Web 编程的 Python 3 实现，旨在取代 Javascript 作为 Web 的脚本语言）
第三个<script>标签加载three.js（Three.js 是一个易于使用、轻量级、跨浏览器的通用JavaScript 3D 库）

让我们来看一下index.html的<body>部分的代码：

注意<body>标签中的属性onload，这是我们告诉浏览器在页面加载时去加载 Brython。
最后的<script>标签是加载我们的python代码。

创建旋转立方体

打开rotating_cube.py并粘贴以下代码段：

from browser import document, window
from pyweb3d import *

# 5-7
scene = Scene()
camera = PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
renderer = WebGLRenderer()

#9-10
renderer.setSize( window.innerWidth, window.innerHeight )
document.body.appendChild( renderer.domElement )

#12-15
geometry = BoxGeometry( 1, 2, 1 )
material = MeshBasicMaterial( { 'color': 0x0000ff } )
cube = Mesh( geometry, material )
scene.add( cube )

# 17
camera.position.z = 5

#19-27
def animate(time):
    window.requestAnimationFrame( animate )
    
    cube.rotation.x += 0.11
    # cube.rotation.y += 0.01
    
    renderer.render( scene, camera )
    
animate(0)

让我们来逐行解析一下rotating_cube.py的代码：

导入必要的模块和功能：

from browser import document, window
from pyweb3d import *

第一行从brython导入document和window
第二行将pyWeb3D模块导入到我们的代码中。（这消除了额外的输入和格式，并使得与three.js库的交互变得简单）

其余内容：

从第 5-7 行我们创建了一个scene, camera, 和renderer
在第 9 行，我们设置了渲染器为窗口或屏幕的大小
在第 10 行，我们将renderer添加到文档元素中
从第 12 到 15 行，我们创建了一个盒子形状并将其添加到第 15 行的场景中
然后在第 17 行，我们将相机的位置向后移动，以便我们可以从透视图中看到形状
最后，从第 19-27 行开始，我们创建了一个动画循环并在第 27 行调用它。注意传递给animate函数的参数了吗？这对于渲染动画很重要.

运行代码

在您的浏览器中打开index.html，您应该会看到一个旋转的美丽立方体!

总结

在本文中，我们介绍了如何快速入手使用three.js创建一个3D动画。

3d动画-Three.js 与 Python 的结合 (PyWeb3D)

代码准备工作

创建旋转立方体

运行代码

总结