commit ec037d219ac2638fa6d2392af5e1bdecbd828a87 Author: Tyler Hallada Date: Sun Feb 3 04:02:39 2019 -0500 First commit, sphere with individually painted faces diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..81bae6a --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules/ +dist +package-lock.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..5ed6708 --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "planet", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "webpack-dev-server --mode development --watch-poll --progress --hot", + "build": "webpack" + }, + "author": "", + "license": "ISC", + "dependencies": { + "three": "^0.101.1", + "three-orbit-controls": "^82.1.0" + }, + "devDependencies": { + "file-loader": "^3.0.1", + "html-webpack-plugin": "^3.2.0", + "webpack": "^4.29.0", + "webpack-cli": "^3.2.1", + "webpack-dev-server": "^3.1.14" + } +} diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..518a05f --- /dev/null +++ b/src/index.html @@ -0,0 +1,13 @@ + + + + + My first three.js app + + + + + diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..89b61fb --- /dev/null +++ b/src/index.js @@ -0,0 +1,51 @@ +import * as THREE from "three"; + +var OrbitControls = require("three-orbit-controls")(THREE); + +const scene = new THREE.Scene(); +var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000); + +var geometry = new THREE.IcosahedronBufferGeometry(5, 7); + +var position = geometry.getAttribute("position"); +var colors = []; +var color = new THREE.Color(Math.random(), Math.random(), Math.random()); +for (var i = 0; i < position.count / 3; i += 1) { + color.setRGB(i / (position.count / 3), i / (position.count / 3), i / (position.count / 3)); + colors.push(color.r, color.g, color.b); + colors.push(color.r, color.g, color.b); + colors.push(color.r, color.g, color.b); +} + +function disposeArray() { + this.array = null; +} +geometry.addAttribute("color", new THREE.Float32BufferAttribute(colors, 3).onUpload(disposeArray)); +var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors }); +var sphere = new THREE.Mesh(geometry, material); +scene.add(sphere); + +var controls = new OrbitControls(camera); + +camera.position.z = 15; +controls.update() + +var renderer = new THREE.WebGLRenderer(); +renderer.setSize( window.innerWidth, window.innerHeight ); +document.body.appendChild( renderer.domElement ); + +window.addEventListener('resize', onWindowResize, false); + +function onWindowResize() { + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + controls.update(); + renderer.setSize(window.innerWidth, window.innerHeight); +} + +function animate() { + renderer.render(scene, camera); + requestAnimationFrame(animate); +} + +animate(); diff --git a/src/world.jpg b/src/world.jpg new file mode 100644 index 0000000..36f6220 Binary files /dev/null and b/src/world.jpg differ diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..62214b1 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,32 @@ +const path = require("path"); +const HtmlWebpackPlugin = require('html-webpack-plugin') + +module.exports = { + entry: "./src/index.js", + output: { + filename: "main.js", + path: path.resolve(__dirname, "dist") + }, + module: { + rules: [ + { + test: /\.(png|jpg|gif)$/, + use: [ + { + loader: 'file-loader', + options: {}, + }, + ], + }, + ], + }, + plugins: [ + new HtmlWebpackPlugin({ template: "src/index.html" }) + ], + devtool: "source-map", + devServer: { + watchOptions: { + ignored: /node_modules/ + } + } +};