如何将three.js html文件实现为flask模板

Question

我正在使用flask创建一个网站，我需要在我的网站上添加一个3d模型。我有一些代码可以使用three.js来实现这一点，但我还没有想好将这些代码实现到我的flask模板中。

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

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

下面是一些单独工作的三个.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>

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

编辑：我已经检查了文件(three.js等(是否在正确的位置，所以我唯一能想到的可能是flask或jinja或的兼容性问题

编辑：删除了不必要的代码

Answer 1

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

Answer 2

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

<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>

进入您的Heart-Model.html文件。

---

最好创建一个新的script.js文件，并使用将其放入Heart-Model.html

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

但是，如果您真的需要将其直接放入HTML中。您可以将代码的body标记的内容放入一个新的HTML文件中，将其命名为"_script.html"，然后将以下代码放入您想要的HTML所在的jinja模板中：

{% include "_script.html" %}