Created
August 22, 2021 14:44
-
-
Save ttonyh/fcc50259b2764b564d284832ffa75594 to your computer and use it in GitHub Desktop.
ThreeJS Example Simple Export Cube from Blender
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <canvas id="main-scene"></canvas> | |
| <script type="module" src="./index.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { | |
| Scene, | |
| PerspectiveCamera, | |
| WebGLRenderer, | |
| HemisphereLight | |
| } from 'three'; | |
| import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; | |
| import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; | |
| // Canvas Element | |
| const canvas = document.querySelector('#main-scene'); | |
| // Scene | |
| const scene = new Scene(); | |
| const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); | |
| camera.position.set(0, 0, 10); | |
| // Lights | |
| const light = new HemisphereLight( 0xffffff, 0x000000, 2 ); | |
| scene.add( light ); | |
| // Renderer | |
| const renderer = new WebGLRenderer({ | |
| canvas, | |
| antialias: true | |
| }); | |
| renderer.physicallyCorrectLights = true; | |
| renderer.shadowMap.enabled = true; | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| function render() { | |
| renderer.render(scene, camera); | |
| } | |
| // Controls | |
| const controls = new OrbitControls(camera, renderer.domElement); | |
| controls.addEventListener('change', render); | |
| // Loader | |
| const loader = new GLTFLoader(); | |
| const importFile = './cube-1.gltf'; | |
| loader | |
| .load( importFile,(gltf) => { | |
| const model = gltf.scene.children[0]; | |
| // model.scale.set(0.5,0.5,0.5); | |
| // scene.position.set(0, 0, 2.5); | |
| scene.add(model); | |
| render(); | |
| }, () => { | |
| // Progress | |
| }, (err) => { | |
| console.info( "ERROR: ", err ); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "test-1", | |
| "version": "1.0.0", | |
| "type": "module", | |
| "scripts": { | |
| "dev": "vite", | |
| "build": "vite build", | |
| "preview": "vite preview", | |
| "test": "echo \"Error: no test specified\" && exit 1" | |
| }, | |
| "dependencies": { | |
| "three": "^0.131.3", | |
| "vite": "^2.5.0" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, | |
| body, | |
| canvas { | |
| padding: 0; | |
| margin: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| max-width: 100vw; | |
| max-height: 100vh; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment