Browse Source

First commit, sphere with individually painted faces

Tyler Hallada 5 years ago
commit
ec037d219a
6 changed files with 123 additions and 0 deletions
  1. 3 0
      .gitignore
  2. 24 0
      package.json
  3. 13 0
      src/index.html
  4. 51 0
      src/index.js
  5. BIN
      src/world.jpg
  6. 32 0
      webpack.config.js

+ 3 - 0
.gitignore

@@ -0,0 +1,3 @@
1
+node_modules/
2
+dist
3
+package-lock.json

+ 24 - 0
package.json

@@ -0,0 +1,24 @@
1
+{
2
+  "name": "planet",
3
+  "version": "1.0.0",
4
+  "description": "",
5
+  "main": "index.js",
6
+  "scripts": {
7
+    "test": "echo \"Error: no test specified\" && exit 1",
8
+    "start": "webpack-dev-server --mode development --watch-poll --progress --hot",
9
+    "build": "webpack"
10
+  },
11
+  "author": "",
12
+  "license": "ISC",
13
+  "dependencies": {
14
+    "three": "^0.101.1",
15
+    "three-orbit-controls": "^82.1.0"
16
+  },
17
+  "devDependencies": {
18
+    "file-loader": "^3.0.1",
19
+    "html-webpack-plugin": "^3.2.0",
20
+    "webpack": "^4.29.0",
21
+    "webpack-cli": "^3.2.1",
22
+    "webpack-dev-server": "^3.1.14"
23
+  }
24
+}

+ 13 - 0
src/index.html

@@ -0,0 +1,13 @@
1
+<!DOCTYPE html>
2
+<html>
3
+	<head>
4
+    <meta charset=utf-8 />
5
+		<title>My first three.js app</title>
6
+		<style>
7
+      html, body { margin: 0; padding: 0; overflow: hidden; }
8
+      canvas { width: 100%; height: 100%; }
9
+		</style>
10
+	</head>
11
+	<body>
12
+  </body>
13
+</html>

+ 51 - 0
src/index.js

@@ -0,0 +1,51 @@
1
+import * as THREE from "three";
2
+
3
+var OrbitControls = require("three-orbit-controls")(THREE);
4
+
5
+const scene = new THREE.Scene();
6
+var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
7
+
8
+var geometry = new THREE.IcosahedronBufferGeometry(5, 7);
9
+
10
+var position = geometry.getAttribute("position");
11
+var colors = [];
12
+var color = new THREE.Color(Math.random(), Math.random(), Math.random());
13
+for (var i = 0; i < position.count / 3; i += 1) {
14
+  color.setRGB(i / (position.count / 3), i / (position.count / 3), i / (position.count / 3));
15
+  colors.push(color.r, color.g, color.b);
16
+  colors.push(color.r, color.g, color.b);
17
+  colors.push(color.r, color.g, color.b);
18
+}
19
+
20
+function disposeArray() {
21
+  this.array = null;
22
+}
23
+geometry.addAttribute("color", new THREE.Float32BufferAttribute(colors, 3).onUpload(disposeArray));
24
+var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors });
25
+var sphere = new THREE.Mesh(geometry, material);
26
+scene.add(sphere);
27
+
28
+var controls = new OrbitControls(camera);
29
+
30
+camera.position.z = 15;
31
+controls.update()
32
+
33
+var renderer = new THREE.WebGLRenderer();
34
+renderer.setSize( window.innerWidth, window.innerHeight );
35
+document.body.appendChild( renderer.domElement );
36
+
37
+window.addEventListener('resize', onWindowResize, false);
38
+
39
+function onWindowResize() {
40
+  camera.aspect = window.innerWidth / window.innerHeight;
41
+  camera.updateProjectionMatrix();
42
+  controls.update();
43
+  renderer.setSize(window.innerWidth, window.innerHeight);
44
+}
45
+
46
+function animate() {
47
+  renderer.render(scene, camera);
48
+  requestAnimationFrame(animate);
49
+}
50
+
51
+animate();

BIN
src/world.jpg


+ 32 - 0
webpack.config.js

@@ -0,0 +1,32 @@
1
+const path = require("path");
2
+const HtmlWebpackPlugin = require('html-webpack-plugin')
3
+
4
+module.exports = {
5
+  entry: "./src/index.js",
6
+  output: {
7
+    filename: "main.js",
8
+    path: path.resolve(__dirname, "dist")
9
+  },
10
+  module: {
11
+    rules: [
12
+      {
13
+        test: /\.(png|jpg|gif)$/,
14
+        use: [
15
+          {
16
+            loader: 'file-loader',
17
+            options: {},
18
+          },
19
+        ],
20
+      },
21
+    ],
22
+  },
23
+  plugins: [
24
+    new HtmlWebpackPlugin({ template: "src/index.html" })
25
+  ],
26
+  devtool: "source-map",
27
+  devServer: {
28
+    watchOptions: {
29
+      ignored: /node_modules/
30
+    }
31
+  }
32
+};