My first three.js app

commit de695672b71ee7fa591721ffbcbf54dd1cc7b07f Author: Michael Murtaugh Date: Mon Apr 19 22:33:36 2021 +0200 first commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..82f92b9 --- /dev/null +++ b/README.md @@ -0,0 +1,61 @@ + + npm init -y + +Makes an empty [package.json](package.json) in this directory. When you install with npm install --save, the names of packages get added to "dependencies" in this file, so that later you can just "npm install" to reinstall all the dependencies (it's like pip + requirements.txt if that sounds familiar). + +First install three js with npm, following + + npm install --save three + +**npm** will create an add the files to node_modules/ folder. Check it out: + + ls node_modules + +(nb you may sometimes see: **npm i** instead of npm install, it's the same) + +Install the special orbitcontrols package, following + + npm install lesca-threejs-orbitcontrols --save + + +Use webpack to create a browser friendly "bundle", following [the webpack docs](https://webpack.js.org/). + + + npm install --save webpack webpack-cli + +Note how installing webpack pulls in a bunch of other packages that it relies on (look in node_modules now!). The extra files don't matter though, when you make your "distributable" output it will only have stuff that your final code needs. You don't need to copy the node_modules folder (it's only used for development). Check out the [webpack config file](webpack.config.js). It's very close the example given on the [webpack page](https://webpack.js.org/#bundle-it). + +Check out the [source file](src/hello.js). Then finally, use webpack to translate your src file (and it's dependencies) into an output "dist" (distributable) file: + + npx webpack + +NB: The command is **npx** and it means run the webpack program that's in the node_modules/bin. + +By default webpack uses the webpack.config.js file to figure out what the "entry" point of the code is (src/hello.js), and where to put the output. + +Look at hello.html (which uses dist/bundle.js). + +**Each time you change src/hello.js you need to run npx webpack to rebundle/rebuild the output.** + +Eventually you can set the mode option to "production" to make the output smaller (takes more time though to build it and debugging might be harder when there are bugs). + +`` + entry: './src/hello.js', + mode: 'production', +``` +Also if you want to do it like other projects, you can add your "build command" to the package.json like this: + +``` +... + "main": "webpack.config.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "build": "webpack" + }, +... +} +``` + +Then you can: + + npm run build diff --git a/hello.html b/hello.html new file mode 100644 index 0000000..f150e6e --- /dev/null +++ b/hello.html @@ -0,0 +1,13 @@ + + + + + My first three.js app + + + + + + \ No newline at end of file diff --git a/src/hello.js b/src/hello.js new file mode 100644 index 0000000..4c33d9a --- /dev/null +++ b/src/hello.js @@ -0,0 +1,68 @@ +import * as THREE from 'three'; +// import { Scene, PerspectiveCamera } from 'three'; + +const scene = new THREE.Scene(); +const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); + +const renderer = new THREE.WebGLRenderer(); +renderer.setSize( window.innerWidth, window.innerHeight ); +document.body.appendChild( renderer.domElement ); + +const geometry = new THREE.BoxGeometry(2, 2, 2); +var cubeMaterials = [ + new THREE.MeshLambertMaterial ({color: 0x00ff00}), // right + new THREE.MeshLambertMaterial ({color: 0xff0000}), // left + new THREE.MeshLambertMaterial ({color: 0x0000ff}), // top + new THREE.MeshLambertMaterial ({color: 0xffff00}), // bottom + new THREE.MeshLambertMaterial ({color: 0xff00ff}), // front + new THREE.MeshLambertMaterial ({color: 0x00ffff}) // back +]; + +// const material = new THREE.MeshBasicMaterial( { color: 0x555555 } ); +const material = new THREE.MeshFaceMaterial( cubeMaterials ); +const cube = new THREE.Mesh( geometry, material ); +scene.add( cube ); + +const light = new THREE.AmbientLight( 0xFFFFFF, 0.1 ); // soft white light +scene.add( light ); + +camera.position.z = 5; + +import { OrbitControls } from 'lesca-threejs-orbitcontrols'; + +// create function +const Orb = new OrbitControls(THREE); + +// then create controls object +const controls = new Orb(camera, renderer.domElement); + +function animate() { + requestAnimationFrame( animate ); + renderer.render( scene, camera ); + controls.update(); +} +animate(); + + + +// set angle to fixed polar,azimuthal +const p1 = { polar: 0, azimuth: 0}; +const p2 = { polar: 0, azimuth: Math.PI/4}; +const p3 = { polar: Math.PI/8, azimuth: Math.PI/4}; + +document.addEventListener("keydown", function (e) { + console.log("keydown", e); + if (e.key == "c") { + console.log("calling controls.setPolarAngle + setAzimuthalAngle"); + controls.setPolarAngle(p1.polar); + controls.setAzimuthalAngle(p1.azimuth); + } else if (e.key == "d") { + console.log("calling controls.setPolarAngle + setAzimuthalAngle"); + controls.setPolarAngle(p2.polar); + controls.setAzimuthalAngle(p2.azimuth); + } else if (e.key == "e") { + console.log("calling controls.setPolarAngle + setAzimuthalAngle"); + controls.setPolarAngle(p3.polar); + controls.setAzimuthalAngle(p3.azimuth); + } +}) \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..464b0a6 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,9 @@ +const path = require('path'); + +module.exports = { + entry: './src/hello.js', + output: { + path: path.resolve(__dirname, 'dist'), + filename: 'bundle.js', + }, +}; \ No newline at end of file