newdegen/test.html at master · xenotation/newdegen · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Three.js OBJ Example</title>
    <script src="https://cdn.jsdelivr.net/npm/three@0.124.0/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.124.0/examples/js/loaders/OBJLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.124.0/examples/js/loaders/MTLLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.124.0/examples/js/controls/OrbitControls.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script>
      // Create the scene, camera, and renderer
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.getElementById("container").appendChild(renderer.domElement);

      // Load the .obj and .mtl files using OBJLoader and MTLLoader
      var mtlLoader = new THREE.MTLLoader();
      mtlLoader.load("assets/3d/Scaniverse_2023_01_31_152410.mtl", function (materials) {
        materials.preload();
        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.load("assets/3d/Scaniverse_2023_01_31_152410.obj", function (obj) {
          // Add the obj file to the scene
          scene.add(obj);
        });
      });

      // Add camera controls
      var controls = new THREE.OrbitControls(camera, renderer.domElement);

      // Position the camera
      camera.position.z = 5;

      // Add lighting to the scene
      var light = new THREE.PointLight(0xffffff, 1, 1000);
      light.position.set(50, 50, 50);
      scene.add(light);

      // Render the scene
      function render() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
      }
      render();
    </script>
  </body>
</html>