前提・実現したいこと
three.jsを使ってWEBサイトを開発しています。
FBXのモデルをシーン表示させるために、下記のコードで実行しているのですが、うまく表示されません。
こちらのサイトの記事を参考にしました。
ブラウザーのコンソールには、特にエラーは出ていなく、下記のようなコードが表示されているだけです。
THREE.FBXLoader: FBX binary version: 7400
解決の方法をご存じの方おりましたら、ご教授いただけないでしょうか?
該当のソースコード
・main.js
js
1window.addEventListener('load', init); 2 3function init() { 4 const width = 960; 5 const height = 540; 6 7 const renderer = new THREE.WebGLRenderer({ 8 canvas: document.querySelector('#myCanvas') 9 }); 10 renderer.setSize(width, height); 11 12 const scene = new THREE.Scene(); 13 const light = new THREE.AmbientLight(0x404040); 14 scene.add(light); 15 16 const loader = new THREE.FBXLoader(); 17 loader.load('static/fbx/dennis.fbx', (object) => { 18 scene.add(object); 19 }); 20 21 const camera = new THREE.PerspectiveCamera(45, width / height); 22 camera.position.set(0, 0, 1000); 23 24 const controls = new THREE.OrbitControls(camera, renderer.domElement); 25 26 tick(); 27 28 function tick() { 29 30 renderer.render(scene, camera); 31 requestAnimationFrame(tick); 32 } 33}
html
html
1<html> 2<head> 3 <meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1,"> 5 <meta name="description" content=""> 6 <meta name="author" content=""> 7 <title>threejs Test</title> 8 <!-- my_css --> 9 <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css"> 10</head> 11 12<body> 13<h1>test</h1> 14<div class="canvas_wrapper"> 15 <canvas id="myCanvas"></canvas> 16</div> 17<!-- three.js_js --> 18<script src="static/js/three.min.js"></script> 19<script src="static/js/OrbitControls.js"></script> 20<script src="static/js/FBXLoader.js"></script> 21<script src="static/js/inflate.min.js"></script> 22<!-- my_js --> 23<script src="static/js/main.js"></script> 24</body> 25</html>
補足情報(FW/ツールのバージョンなど)
バージョン等:three.js r116
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。