Home Explore Help
Sign In
javascript
/
simondev.ThreeJS_Tutorial_BasicWorld
mirror of https://github.com/simondevyoutube/ThreeJS_Tutorial_BasicWorld
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Forgot to upload this.

Simon 4 years ago
parent
080d76aa09
commit
1e6943dc58
10 changed files with 173 additions and 0 deletions
Unified View Show Diff Stats
  1. 9 0
      base.css
  2. 12 0
      index.html
  3. 139 0
      main.js
  4. BIN
      resources/negx.jpg
  5. BIN
      resources/negy.jpg
  6. BIN
      resources/negz.jpg
  7. BIN
      resources/posx.jpg
  8. BIN
      resources/posy.jpg
  9. BIN
      resources/posz.jpg
  10. 13 0
      resources/readme.txt

+ 9 - 0
base.css
View File 

@@ -0,0 +1,9 @@
 
+body {
 
+  width: 100%;
 
+  height: 100%;
 
+  position: absolute;
 
+  background: #000000;
 
+  margin: 0;
 
+  padding: 0;
 
+  overscroll-behavior: none;
 
+}

+ 12 - 0
index.html
View File 

@@ -0,0 +1,12 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+  <title>Basic 3D World</title>
 
+  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+  <link rel="stylesheet" type="text/css" href="base.css">
 
+</head>
 
+<body>
 
+  <script src="./main.js" type="module">
 
+  </script>
 
+</body>
 
+</html>

+ 139 - 0
main.js
View File 

@@ -0,0 +1,139 @@
 
+import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
 
+
 
+import {OrbitControls} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
 
+
 
+
 
+class BasicWorldDemo {
 
+  constructor() {
 
+    this._Initialize();
 
+  }
 
+
 
+  _Initialize() {
 
+    this._threejs = new THREE.WebGLRenderer({
 
+      antialias: true,
 
+    });
 
+    this._threejs.shadowMap.enabled = true;
 
+    this._threejs.shadowMap.type = THREE.PCFSoftShadowMap;
 
+    this._threejs.setPixelRatio(window.devicePixelRatio);
 
+    this._threejs.setSize(window.innerWidth, window.innerHeight);
 
+
 
+    document.body.appendChild(this._threejs.domElement);
 
+
 
+    window.addEventListener('resize', () => {
 
+      this._OnWindowResize();
 
+    }, false);
 
+
 
+    const fov = 60;
 
+    const aspect = 1920 / 1080;
 
+    const near = 1.0;
 
+    const far = 1000.0;
 
+    this._camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
+    this._camera.position.set(75, 20, 0);
 
+
 
+    this._scene = new THREE.Scene();
 
+
 
+    let light = new THREE.DirectionalLight(0xFFFFFF, 1.0);
 
+    light.position.set(20, 100, 10);
 
+    light.target.position.set(0, 0, 0);
 
+    light.castShadow = true;
 
+    light.shadow.bias = -0.001;
 
+    light.shadow.mapSize.width = 2048;
 
+    light.shadow.mapSize.height = 2048;
 
+    light.shadow.camera.near = 0.1;
 
+    light.shadow.camera.far = 500.0;
 
+    light.shadow.camera.near = 0.5;
 
+    light.shadow.camera.far = 500.0;
 
+    light.shadow.camera.left = 100;
 
+    light.shadow.camera.right = -100;
 
+    light.shadow.camera.top = 100;
 
+    light.shadow.camera.bottom = -100;
 
+    this._scene.add(light);
 
+
 
+    light = new THREE.AmbientLight(0x101010);
 
+    this._scene.add(light);
 
+
 
+    const controls = new OrbitControls(
 
+      this._camera, this._threejs.domElement);
 
+    controls.target.set(0, 20, 0);
 
+    controls.update();
 
+
 
+    const loader = new THREE.CubeTextureLoader();
 
+    const texture = loader.load([
 
+        './resources/posx.jpg',
 
+        './resources/negx.jpg',
 
+        './resources/posy.jpg',
 
+        './resources/negy.jpg',
 
+        './resources/posz.jpg',
 
+        './resources/negz.jpg',
 
+    ]);
 
+    this._scene.background = texture;
 
+
 
+    const plane = new THREE.Mesh(
 
+        new THREE.PlaneGeometry(100, 100, 10, 10),
 
+        new THREE.MeshStandardMaterial({
 
+            color: 0xFFFFFF,
 
+          }));
 
+    plane.castShadow = false;
 
+    plane.receiveShadow = true;
 
+    plane.rotation.x = -Math.PI / 2;
 
+    this._scene.add(plane);
 
+
 
+    const box = new THREE.Mesh(
 
+      new THREE.BoxGeometry(2, 2, 2),
 
+      new THREE.MeshStandardMaterial({
 
+          color: 0xFFFFFF,
 
+      }));
 
+    box.position.set(0, 1, 0);
 
+    box.castShadow = true;
 
+    box.receiveShadow = true;
 
+    this._scene.add(box);
 
+
 
+    for (let x = -8; x < 8; x++) {
 
+      for (let y = -8; y < 8; y++) {
 
+        const box = new THREE.Mesh(
 
+          new THREE.BoxGeometry(2, 2, 2),
 
+          new THREE.MeshStandardMaterial({
 
+              color: 0x808080,
 
+          }));
 
+        box.position.set(Math.random() + x * 5, Math.random() * 4.0 + 2.0, Math.random() + y * 5);
 
+        box.castShadow = true;
 
+        box.receiveShadow = true;
 
+        this._scene.add(box);
 
+      }
 
+    }
 
+
 
+    // const box = new THREE.Mesh(
 
+    //   new THREE.SphereGeometry(2, 32, 32),
 
+    //   new THREE.MeshStandardMaterial({
 
+    //       color: 0xFFFFFF,
 
+    //       wireframe: true,
 
+    //       wireframeLinewidth: 4,
 
+    //   }));
 
+    // box.position.set(0, 0, 0);
 
+    // box.castShadow = true;
 
+    // box.receiveShadow = true;
 
+    // this._scene.add(box);
 
+
 
+    this._RAF();
 
+  }
 
+
 
+  _OnWindowResize() {
 
+    this._camera.aspect = window.innerWidth / window.innerHeight;
 
+    this._camera.updateProjectionMatrix();
 
+    this._threejs.setSize(window.innerWidth, window.innerHeight);
 
+  }
 
+
 
+  _RAF() {
 
+    requestAnimationFrame(() => {
 
+      this._threejs.render(this._scene, this._camera);
 
+      this._RAF();
 
+    });
 
+  }
 
+}
 
+
 
+
 
+let _APP = null;
 
+
 
+window.addEventListener('DOMContentLoaded', () => {
 
+  _APP = new BasicWorldDemo();
 
+});

BIN
resources/negx.jpg
View File


BIN
resources/negy.jpg
View File


BIN
resources/negz.jpg
View File


BIN
resources/posx.jpg
View File


BIN
resources/posy.jpg
View File


BIN
resources/posz.jpg
View File


+ 13 - 0
resources/readme.txt
View File 

@@ -0,0 +1,13 @@
 
+Author

+======

+

+This is the work of Emil Persson, aka Humus.

+http://www.humus.name

+

+

+

+License

+=======

+

+This work is licensed under a Creative Commons Attribution 3.0 Unported License.

+http://creativecommons.org/licenses/by/3.0/