I am creating a website using flask and I need to add a 3d model to my website. I have some code that can do this using three.js, however I haven't figured out to implement this code into my flask template.

我正在创建一个使用烧瓶的网站，我需要添加一个3D模型到我的网站。我有一些使用Three.js可以做到这一点的代码，但是我还没有想出如何将这些代码实现到我的烧瓶模板中。

Here is the flask redirect to the page that will show the model:

下面是烧瓶重定向到将显示该模型的页面：

@app.route('/temp')
def temp():
    return render_template("temp.html", title="temp")

And here is some of the three.js code that works on its own:

下面是一些可以独立工作的three.js代码：

    <script src="three.js"></script>
    <script src="GLTFLoader.js"></script>

    <script>

    var loader = new THREE.GLTFLoader();

    loader.load('temp.glb', handle_load);

        renderer.render(scene, camera);

    </script>

The above code is able to display the model, however if I copy that code into Heart-Model.html (the file that the aforementioned flask redirect links to) the code doesn't work. Is there any way to make flask and three.js work together in this way? Or is there another way I could display my model using flask?

上面的代码能够显示模型，但是如果我将该代码复制到Heart-Model.html(前面提到的flask重定向链接到的文件)中，代码就不能工作。有没有办法让FASK和Three.js以这种方式协同工作？或者，有没有其他方法可以用烧瓶来展示我的模型？

Edit: I've checked that the files (three.js etc.) are in the correct place so the only thing I can think it could be is some compatibility issue with flask or jinja or something

编辑：我已经检查了文件(Three.js等)都在正确的位置，所以我唯一能想到的可能是与FASK或JJJA或其他东西的兼容性问题

Edit: Removed unnecessary code

编辑：删除不必要的代码

The problem was that I needed to store my three.js and model files in a static folder in order for them to work with flask

问题是我需要将我的Three.js和模型文件存储在一个静态文件夹中，以便它们可以使用FASK

If I understood correctly, you want to put this code:

如果我理解正确的话，你想把这个代码放在：

<canvas id="myCanvas"></canvas>

<script src="three.js"></script>
<script src="GLTFLoader.js"></script>

<script>

var renderer,
    scene,
    camera,
    myCanvas = document.getElementById('myCanvas');

//RENDERER
renderer = new THREE.WebGLRenderer({
  canvas: myCanvas,
  antialias: true
});
renderer.setClearColor(0x000000);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

//CAMERA
camera = new THREE.PerspectiveCamera(3, window.innerWidth / window.innerHeight, 0.1, 1000 );

//SCENE
scene = new THREE.Scene();

//LIGHTS
var light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

var light2 = new THREE.PointLight(0xffffff, 0.5);
scene.add(light2);

var loader = new THREE.GLTFLoader();

loader.load('heart2.glb', handle_load);

var mesh;

function handle_load(gltf) {

    console.log(gltf);
    mesh = gltf.scene;
    console.log(mesh.children[0]);
    mesh.children[0].material = new THREE.MeshLambertMaterial();
    scene.add( mesh );
    mesh.position.z = -10;
}


//RENDER LOOP
render();

var delta = 0;
var prevTime = Date.now();

function render() {

    delta += 0.1;

    if (mesh) {

        mesh.rotation.y += 0.01;

        //animation mesh
        // mesh.morphTargetInfluences[ 0 ] = Math.sin(delta) * 20.0;
    }

    renderer.render(scene, camera);

    requestAnimationFrame(render);
}

</script>

Into your Heart-Model.html file.

放入您的心脏模型.html文件中。

It would be better to create a new script.js file and put it into your Heart-Model.html by using

最好是创建一个新的script.js文件，并使用以下命令将其放入您的心脏模型.html中

<script src="script.js"></script>

<脚本src=“script.js”>

But if you really need to put it into the HTML directly. You can put the contents of the body tag of your code into a new HTML file, let's name it "_script.html", and then put the following code inside your jinja template where you want the html to be:

但如果您确实需要将其直接放入到HTML中。您可以将代码的Body标记的内容放入一个新的HTML文件中，让我们将其命名为“_script.html”，然后将以下代码放入您希望该html位于的JJJA模板中：

{% include "_script.html" %}