three.js usdz export test

by orion_prime

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/libs/fflate.min.js"></script>

<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/exporters/USDZExporter.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/loaders/RGBELoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lil-gui.umd.min.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

let mesh, renderer, scene, camera, controls, exportGroup, rTex, mTex, material;


const exporter = new THREE.USDZExporter()
const texLoader = new THREE.TextureLoader()
const hdrLoader = new THREE.RGBELoader()
const gui = new lil.GUI({
  title: 'usdz test'
})
const params = {

  export: exportUSDZ,
  useTextures: true,
}



init();
animate();


function init() {

  // renderer
  renderer = new THREE.WebGLRenderer();
  renderer.outputEncoding = THREE.sRGBEncoding
  renderer.toneMapping = THREE.ACESFilmicToneMapping
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // scene
  scene = new THREE.Scene();
  exportGroup = new THREE.Group()
  scene.add(exportGroup)

  // camera
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 100);
  camera.position.set(-2,1,- 3);

  // controls
  controls = new THREE.OrbitControls(camera, renderer.domElement);



  // axes
  scene.add(new THREE.AxesHelper(20));

  // geometry
  var geometryA = new THREE.SphereGeometry(0.5, 32, 16);
  var geometryB = new THREE.BoxGeometry(1, 1, 1);


  // material
  material = new THREE.MeshStandardMaterial({
    color: 0x00ffff,
    roughness: 0.9,
    metalness: 0.9,

  });

  gui.addColor(material, 'color')
  gui.add(material, 'roughness', 0, 1)
  gui.add(material, 'metalness', 0, 1)

  // mesh
  mesh = new THREE.Mesh(geometryA, material);
  exportGroup.add(mesh);

  const mesh1 = new THREE.Mesh(geometryB, material);
  exportGroup.add(mesh1);
  mesh1.position.set(0, 1, 0)

  gui.add(params, 'export')
  gui.add(params, 'useTextures').onChange((v) => {
    toggleTexture(v)
  })

  texLoader.load('https://cdn3.struffelproductions.com/file/ambientCG/media/maps/MetalPlates012/MetalPlates012_Metalness.jpg?5178', (tex) => {
    rTex = tex
    material.roughnessMap = rTex
    material.needsUpdate = true
  })

 ...