Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <title>three.js webgl - exporter - draco</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> | |
| <link type="text/css" rel="stylesheet" href="main.css"> | |
| </head> | |
| <body> | |
| <div id="info"> | |
| <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - draco | |
| </div> | |
| <script src="jsm/libs/draco/draco_encoder.js"></script> | |
| <!-- Import maps polyfill --> | |
| <!-- Remove this when import maps will be widely supported --> | |
| <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "../build/three.module.js", | |
| "three/addons/": "./jsm/" | |
| } | |
| } | |
| </script> | |
| <script type="module"> | |
| import * as THREE from 'three'; | |
| import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; | |
| import { DRACOExporter } from 'three/addons/exporters/DRACOExporter.js'; | |
| import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; | |
| let scene, camera, renderer, exporter, mesh; | |
| const params = { | |
| export: exportFile | |
| }; | |
| init(); | |
| animate(); | |
| function init() { | |
| camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 ); | |
| camera.position.set( 200, 100, 200 ); | |
| scene = new THREE.Scene(); | |
| scene.background = new THREE.Color( 0xa0a0a0 ); | |
| scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 ); | |
| exporter = new DRACOExporter(); | |
| // | |
| const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 ); | |
| hemiLight.position.set( 0, 200, 0 ); | |
| scene.add( hemiLight ); | |
| const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 ); | |
| directionalLight.position.set( 0, 200, 100 ); | |
| directionalLight.castShadow = true; | |
| directionalLight.shadow.camera.top = 180; | |
| directionalLight.shadow.camera.bottom = - 100; | |
| directionalLight.shadow.camera.left = - 120; | |
| directionalLight.shadow.camera.right = 120; | |
| scene.add( directionalLight ); | |
| // ground | |
| const ground = new THREE.Mesh( | |
| new THREE.PlaneGeometry( 2000, 2000 ), | |
| new THREE.MeshPhongMaterial( { color: 0xbbbbbb, depthWrite: false } ) | |
| ); | |
| ground.rotation.x = - Math.PI / 2; | |
| ground.position.y = - 75; | |
| ground.receiveShadow = true; | |
| scene.add( ground ); | |
| const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 ); | |
| grid.material.opacity = 0.2; | |
| grid.material.transparent = true; | |
| grid.position.y = - 75; | |
| scene.add( grid ); | |
| // export mesh | |
| const geometry = new THREE.TorusKnotGeometry( 50, 15, 200, 30 ); | |
| const material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } ); | |
| mesh = new THREE.Mesh( geometry, material ); | |
| mesh.castShadow = true; | |
| mesh.position.y = 25; | |
| scene.add( mesh ); | |
| // | |
| renderer = new THREE.WebGLRenderer( { antialias: true } ); | |
| renderer.setPixelRatio( window.devicePixelRatio ); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| renderer.shadowMap.enabled = true; | |
| document.body.appendChild( renderer.domElement ); | |
| // | |
| const controls = new OrbitControls( camera, renderer.domElement ); | |
| controls.target.set( 0, 25, 0 ); | |
| controls.update(); | |
| // | |
| window.addEventListener( 'resize', onWindowResize ); | |
| const gui = new GUI(); | |
| gui.add( params, 'export' ).name( 'Export DRC' ); | |
| gui.open(); | |
| } | |
| function onWindowResize() { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| } | |
| function animate() { | |
| requestAnimationFrame( animate ); | |
| renderer.render( scene, camera ); | |
| } | |
| function exportFile() { | |
| const result = exporter.parse( mesh ); | |
| saveArrayBuffer( result, 'file.drc' ); | |
| } | |
| const link = document.createElement( 'a' ); | |
| link.style.display = 'none'; | |
| document.body.appendChild( link ); | |
| function save( blob, filename ) { | |
| link.href = URL.createObjectURL( blob ); | |
| link.download = filename; | |
| link.click(); | |
| } | |
| function saveArrayBuffer( buffer, filename ) { | |
| save( new Blob( [ buffer ], { type: 'application/octet-stream' } ), filename ); | |
| } | |
| </script> | |
| </body> | |
| </html> | |