お世話になります。
質問させてください。
【やりたいこと】
表題にある通りですが、Bubbleでthree.jsを使って３D画像を表示したいです。
表示する拡張子はSTLとPLYになります。
【困っていること】
ライブラリの読み込ませ方がうまくわかっておらず、できておりません。
【試したこと】
流れとして、
①ライブラリの読み込ませ
②jsのコード記入
③アップロードしたファイルの３D画像を表示
みたいな感じでやろうと思っておりまして、
ページロード時にjsを走らせているんですが、
TypeError: THREE.STLLoader is not a constructor
と、エラーが出てしまいます。
こちらのエラーについて調べたところ、ライブラリの読み込みがうまくいっていなそうで、
file managerに保存したもののパスを入れてみたんですが、うまくいかずで…
保存したものはこちらでダウンロードしたものです。
jsのコードは以下の通りで、3行目のscene = new THREE.Scene();の部分で引っかかってるのかなと思います。
var renderer, scene, camera;
// シーンの初期化
function initScene() {
scene = new THREE.Scene();
}
// カメラの初期化
function initCamera() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
}
// レンダラーの初期化
function initRenderer() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("preview").appendChild(renderer.domElement);
}
// モデルの読み込み
function loadModel(modelFile) {
var loader = new THREE.STLLoader(); // STLファイルを読み込む場合
// var loader = new THREE.PLYLoader(); // PLYファイルを読み込む場合
loader.load(modelFile, function (geometry) {
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
}
// レンダリング
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
// 初期化
initScene();
initCamera();
initRenderer();
// モデルファイルのパスを指定して読み込み
loadModel("model.stl"); // STLファイルを読み込む場合
// loadModel("model.ply"); // PLYファイルを読み込む場合
// レンダリング開始
render();
まずはライブラリの読み込みの方法について、ご存知の方がいれば教えていただきたいです。
よろしくお願いします。
以前Twitterでjansnapさんが同じようなものを実装していた気がするのですが、もしお手隙でしたらご教示いただけると幸いです
ページの「Page HTML Header」にCDNのアドレスを書けば読み込まれないでしょうか？
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.152.2/three.min.js" integrity="sha512-R7eFJsc3NlvsTn5hdD/Xvi6FwpFGAoGOa2nBNU89DXAZzXgQQrfhgHVpm5Kh7H9EuCU3Ymexph9z4IiHrq977g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
参考：
「いいね！」 2
ご返信ありがとうございます！
確認して、試させていただきます
お世話になります。
こちら実装してみたんですが、変わらず同じエラーが出てしまいます…
まさにjansnapさんがTwitterにあげているような実装をしたいのですが、
どのように実現されているのでしょうか？
お手数ですが、お手隙の際で結構ですので、ご教示いただけますと幸いです
Twitterの投稿から辿って、インスペクトしてなんとか同じものを出すところまでできました！
ここから自分が投稿したいものに変更していきたいと思います！
「いいね！」 1
すみません、引き続き詰まっているため、質問させてください。
どなたかjsの記述について詳しい方アドバイスいただけますと幸いです。
一旦はjsで用意した箱を表示するところまではいけましたが、
こちらで任意に表示させたいstlファイルを表示することができません。
以下のコードの「箱を作成」となっているコードをコメントアウトし、
「STLファイルを読み込む」となっている部分を追記しました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/three@0.131.3/build/three.min.js"></script>
<script src="STLLoader.js"></script>
<script>
window.onload = function() {
const width = 480;
const height = 400;
// レンダラーを作成
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector("#myCanvas")
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
// シーンを作成
const scene = new THREE.Scene();
// カメラを作成
const camera = new THREE.PerspectiveCamera(
45,
width / height,
1,
10000
);
camera.position.set(0, 0, +1000);
// 箱を作成
// const geometry = new THREE.BoxGeometry(300, 300, 300);
// const material = new THREE.MeshStandardMaterial({
// color: 0x0000ff
// });
// const box = new THREE.Mesh(geometry, material);
// scene.add(box);
// STLファイルを読み込む
const loader = new THREE.STLLoader();
loader.load("model.stl", function (geometry) {
// STLファイルからメッシュを作成
const material = new THREE.MeshPhongMaterial({ color: 0x808080 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
loader.load( model_load );
// 平行光源
const directionalLight = new THREE.DirectionalLight(
0xffffff
);
directionalLight.position.set(1, 1, 1);
// シーンに追加
scene.add(directionalLight);
// 初回実行
//renderer.render(scene, camera);
// 実行
tick();
function tick() {
requestAnimationFrame(tick);
// 箱を回転させる
// box.rotation.x += 0.01;
// box.rotation.y += 0.01;
// レンダリング
renderer.render(scene, camera);
}
}
</script>
<body>
<canvas id = "myCanvas">
</canvas>
</body>
</head>
</html>
私の理解だと、scene.add()の引数に入っているものが表示されるのだと思われるため、
そのように対応したつもりだったのですが、うまくいかず、どこを見るべきか
ご教示いただけますと幸いです。
よろしくお願いします