前提・実現したいこと
Three.jsを使い、コードで記述した立方体をSTLで出力させたい。
Three.jsのexsampleに入っているSTLExporterを使用していますが、うまく動きません。
発生している問題・エラーメッセージ
以下のエラーが出て、画面にボタン以外が表示されず真っ白になる。
Uncaught TypeError: THREE.STLExporter is not a constructor at init (test02.html:49)
該当のソースコード
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>test 2</title> <script type="text/javascript" src="./libs/three.js"></script> <script type="text/javascript" src="./libs/stats.min.js"></script> <script type="text/javascript" src="./libs/dat.gui.min.js"></script> <style> body { /* set margin to 0 and overflow to hidden, to go fullscreen */ margin: 0; overflow:visible; } </style> </head> <body> <div id="Stats-output"> </div> <!-- Div which will hold the Output --> <div id="WebGL-output"> </div> <button id="export">STLで出力</button> <!-- Javascript code that runs our Three.js examples --> <script type="module"> import * as THREE from './libs/three.module.js'; import * as STLExporter from './libs/exporters/STLExporter.js'; function init() { var stats = initStats(); //シーン作成 var scene = new THREE.Scene(); var mesh; var exporter; exporter = new THREE.STLExporter(); //カメラ var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); //renderer var webGLRenderer = new THREE.WebGLRenderer(); webGLRenderer.setClearColor(new THREE.Color(0xaaaaff)); webGLRenderer.setSize(window.innerWidth, window.innerHeight); webGLRenderer.shadowMap.enabled = true; //planeの作成 var planeGeometry = new THREE.PlaneGeometry(60, 20); var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc}); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.rotation.x = -0.5 * Math.PI; plane.position.x = 0; plane.position.y = 0; plane.position.z = 0; //planeをシーンに追加 scene.add(plane); //カメラの位置 camera.position.x = 0; camera.position.y = 40; camera.position.z = 50; camera.lookAt(new THREE.Vector3(0, 10, 0)); //ライト var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(0, 40, 30); spotLight.intensity = 2; scene.add(spotLight); //レンダラー document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement); var step = 0; //グリッド線の表示 var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 ); grid.material.opacity = 0.2; grid.material.transparent = true; scene.add( grid ); //control var controls = new function () { // we need the first child, since it's a multimaterial //export STLの部分 var buttonExportASCII = document.getElementById( 'export' ); buttonExportASCII.addEventListener( 'click', exportASCII ); }; var geometry = new THREE.BoxBufferGeometry( 5, 5, 5 ); var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } ); mesh = new THREE.Mesh( geometry, material ); mesh.castShadow = true; mesh.position.y = 10; mesh.position.z = 5; scene.add( mesh ); var gui = new dat.GUI(); //gui.addColor(geometry, 'fillColor');//塗りの色。カラーピッカーを出す, render(); function render() { stats.update(); // render using requestAnimationFrame requestAnimationFrame(render); webGLRenderer.render(scene, camera); } function exportASCII() { var result = exporter.parse( mesh, { binary: true } ); saveString( result, 'box.stl' ); } var 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 saveString( text, filename ) { save( new Blob( [ text ], { type: 'text/plain' } ), filename ); } function saveArrayBuffer( buffer, filename ) { save( new Blob( [ buffer ], { type: 'application/octet-stream' } ), filename ); } function initStats() { var stats = new Stats(); stats.setMode(0); // 0: fps, 1: ms stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.getElementById("Stats-output").appendChild(stats.domElement); return stats; } } window.onload = init; </script> </body> </html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。