Python Pyon和Django还有三个js_Python_Django_Three.js

Python Pyon和Django还有三个js

python django three.js

Python Pyon和Django还有三个js,python,django,three.js,Python,Django,Three.js,我想用Three.js在我的网站上插入一个3d模型，但是我做不到，除了这段代码没有做任何事情，没有安装任何东西，可能我错过了什么，或者错误地规定了什么，或者没有安装什么 <!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta n

我想用Three.js在我的网站上插入一个3d模型，但是我做不到，除了这段代码没有做任何事情，没有安装任何东西，可能我错过了什么，或者错误地规定了什么，或者没有安装什么

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
          crossorigin="anonymous">

    <title>{{ title }}</title>
  </head>
  <body>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>
  <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>

  <script>
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 10;

      render = new THREE.WebGLRenderer({alpha: true, antialias: true});
      renderer.setClearColor(0x000000, 0);
      renderer.setSize(1280, 720);

      renderer.domElement.setAttribute("id", "scene3DObj");
      document.body.insertBefore(renderer.domElement, document.body.firstChild);

      const aLight = new THREE.AmbientLight(0x404040, 1.2);
      scene.add(aLight);

      const pLight = new THREE.PointLight(0xFFFFFF, 1.2);
      pLight.position.set(0, -3, 7);
      scene.add(pLight);

      const helper = new THREE.PointLightHelper(pLight);
      scene.add(helper);

      let loader = new THREE.GLTFLoader();
      let obj = null;

      loader.load('../news/scene.gltf', function(gltf) {
          obj = gltf;
          obj.scene.scale.set(1.3, 1.3, 1.3);

          scene.add(obj.scene);
      });

      function animate() {
          requestAnimationFrame(animate);

          if(obj)
              obj.scene.rotation.y += 0.03;

          renderer.render(scene, camera);
      }
      animate();
  </script>

  <style>
      #scene3DObj {
          position: absolute;
          right: 0;
          top: 0;
          z-index: 999;
      }
  </style>

  </body>
</html>


{{title}}
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置z=10；
render=new THREE.WebGLRenderer（{alpha:true，antialas:true}）；
renderer.setClearColor（0x000000，0）；
设置大小（1280720）；
renderer.domeElement.setAttribute（“id”、“scene3DObj”）；
document.body.insertBefore（renderer.doelement，document.body.firstChild）；
const-aLight=新的三个环境光（0x404040，1.2）；
场景。添加（点燃）；
常数=新的三点光源（0xFFFFFF，1.2）；
位置设置（0，-3,7）；
场景。添加（困境）；
const helper=new THREE.PointLightHelper（困境）；
场景.添加（助手）；
让loader=new THREE.GLTFLoader（）；
设obj=null；
loader.load（'../news/scene.gltf'，函数（gltf）{
obj=gltf；
对象场景比例设置（1.3,1.3,1.3）；
场景。添加（对象场景）；
});
函数animate（）{
请求动画帧（动画）；
如果（obj）
对象场景旋转y+=0.03；
渲染器。渲染（场景、摄影机）；
}
制作动画（）；
#场景3{
位置：绝对位置；
右：0；
排名：0；
z指数：999；
}

我在脚本本身中找到了一条线索，单词RENDERER在绿色下划线中