<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>THREE Example</title>
  <link rel="stylesheet" href="src/main.css">
</head>

<body>
  <p><a href="https://sketchfab.com/3d-models/low-poly-medieval-island-361f02265937462a8969d78c5be1fc6c">"Low Poly Medieval Island"</a> by <a href="https://sketchfab.com/boooop">Boooooop</a> is licensed under Creative Commons Attribution. To view a copy of this license, visit <a href="http://creativecommons.org/licenses/by/4.0/">creativecommons.org</a>.</p>

  <div id="container"></div>
  <script type="module" src="src/main.js"></script>
</body>

</html>
html,
body {
  margin: 0;
  padding: 0;
  background: #3b3b3b;
}
html {
  overflow: hidden;
}
p {
  color: white;
  position: absolute;
  bottom: 0;  
  margin: 10px auto;
  width: 100%;
  left: 0;
  right: 0;
  text-align: center;
}
a{
  color: white;
}
import * as THREE from "https://cdn.skypack.dev/three";
import { GLTFLoader } from "https://cdn.skypack.dev/three/examples/jsm/loaders/GLTFLoader.js";
import { OrbitControls } from "https://cdn.skypack.dev/three/examples/jsm/controls/OrbitControls.js";

/*
Scene and Camera Setup
----------------------*/
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    25, // FOV (field of view) in Grad
    window.innerWidth / window.innerHeight, // Verhältnis des render context
    0.1, // near - Objekte mit einer kleineren Distanz als dieser Wert werden nicht angezeigt
    1000 // far - Objekte mit einer größeren Distanz als dieser Wert werden nicht angezeigt
);

/*
Renderer setup
----------------------*/
const renderer = new THREE.WebGLRenderer(); // ein von THREE.js erzeugtes <canvas> Element
renderer.setSize(window.innerWidth, window.innerHeight); // Größe des Canvas
document.body.appendChild(renderer.domElement);
scene.background = new THREE.Color(0x20252f); //Setting the canvas background-color
camera.position.z = 70; // Die Position der Kamera muss angepasst werden, damit die Objekte zu sehen sind

/*
Loader setup
----------------------*/
const loader = new GLTFLoader();
loader.load(    "https://www.eyeworkers.de/fileadmin/user_upload/Blog/3DWeb/scene.gltf",
    function (gltf) {
        scene.add(gltf.scene);
    },
    // called while loading is progressing
    function (xhr) {
        console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
    },
    // called when loading has errors
    function (error) {
        console.log("An error happened!");
    }
);

/*
Light setup
----------------------*/
const ambientLight = new THREE.AmbientLight(0xcccccc, 0.6);
scene.add(ambientLight);

const pointLight = new THREE.PointLight(0xffffcc, 2, 100);
pointLight.position.set(0, 10, 0);
pointLight.castShadow = true;
pointLight.shadow.camera.near = 1;
pointLight.shadow.camera.far = 60;
pointLight.shadow.bias = -0.005;

scene.add(pointLight);

const sphereSize = 1;
const pointLightHelper = new THREE.PointLightHelper(pointLight, sphereSize);
scene.add(pointLightHelper);

/*
Control Setup
----------------------*/
const controls = new OrbitControls(camera, renderer.domElement);
controls.minDistance = 50;
controls.maxDistance = 150;
controls.enableDamping = true;


/*
Render Loop
----------------------*/
function draw() {
    requestAnimationFrame(draw);

    renderer.render(scene, camera);
    controls.update();
}
draw();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.