JSFiddle - React, Tailwind, and code Playground
HTML
<button id="export">
Export
</button>
JavaScript
import * as THREE from 'https://cdn.skypack.dev/three@0.129.0/build/three.module.js';
import {
GLTFExporter
} from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/exporters/GLTFExporter.js';
// Create a scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth / 1.5 - 10, 653);
renderer.setPixelRatio(window.devicePixelRatio * 1.5);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
document.body.appendChild(renderer.domElement); //document.addEventListener('mousedown', onDocumentMouseDown, false);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
var geo = new THREE.EdgesGeometry(cube.geometry); // or WireframeGeometry
var mat = new THREE.LineBasicMaterial({
color: 0xffffff,
transparent: true
});
var wireframe = new THREE.LineSegments(geo, mat);
cube.add(wireframe);
camera.position.z = 2;
cube.rotation.y = 150;
cube.rotation.x = 100;
renderer.render(scene, camera);
//
const button = document.getElementById('export');
button.addEventListener('click', exportmodel);
function exportmodel() {
const exporter = new GLTFExporter();
// Parse the input and generate the glTF output
exporter.parse(scene, function(gltf) {
const output = JSON.stringify( gltf, null, 2 );
saveString( output, 'scene.gltf' );
}, {});
}
function saveString(text, filename) {
save(new Blob([text], {
type: 'text/plain'
}), filename);
}
const link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link); // Firefox workaround, see #6594
function save(blob, filename) {
link.href = URL.createObjectURL(blob);
link.download...