three.js dev template - module
HTML
<button id="export">
Export
</button>
CSS
body {
margin: 0px;
}
button {
position: absolute;
}
canvas {
display: block;
}
JavaScript
import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import { GLTFExporter } from "https://threejs.org/examples/jsm/exporters/GLTFExporter.js";
var mesh, renderer, scene, camera, controls;
init();
animate();
async function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.set( 0, 0, 5 );
// controls
controls = new OrbitControls( camera, renderer.domElement );
// geometry
var geometry = new THREE.BoxBufferGeometry();
// material
var loader = new THREE.TextureLoader();
var [ t1, t2, t3, t4, t5, t6 ] = await Promise.all( [
loader.loadAsync( 'https://threejs.org/examples/textures/brick_diffuse.jpg' ),
loader.loadAsync( 'https://threejs.org/examples/textures/colors.png' ),
loader.loadAsync( 'https://threejs.org/examples/textures/crate.gif' ),
loader.loadAsync( 'https://threejs.org/examples/textures/disturb.jpg' ),
loader.loadAsync( 'https://threejs.org/examples/textures/water.jpg' ),
loader.loadAsync( 'https://threejs.org/examples/textures/uv_grid_opengl.jpg' )
] );
var material = [
new THREE.MeshBasicMaterial( { map: t1 } ),
new THREE.MeshBasicMaterial( { map: t2 } ),
new THREE.MeshBasicMaterial( { map: t3 } ),
new THREE.MeshBasicMaterial( { map: t4 } ),
new THREE.MeshBasicMaterial( { map: t5 } ),
new THREE.MeshBasicMaterial( { map: t6 } ),
];
// mesh
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
var button = document.getElementById( 'export' );
button.addEventListener( 'click', function() {
var exporter = new...