1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Three.jsを用いてBlenderデータ(.obj,.mtl)をHTMLに組み込んで表示する方法がわからない

Last updated at Posted at 2019-12-08

Blenderで作ったデータを
Three.jsを用いて表示されたい

参考ページURL
https://reffect.co.jp/html/3d-model-mouse-operate#Example

コードが本文に入れれないんでURLで見てください

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Load a 3D model</title>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
<script src="js/loaders/MTLLoader.js"></script>
<script>
    /* scene(シーン)の作成 */
    var scene = new THREE.Scene();

    /* camera(カメラ)の作成 */
    var camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 1000 );
     
    /* renderer(レンダラー)の作成 */
    var renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
     
    /* Light(ライト)の設定 */
    var ambientLight = new THREE.AmbientLight( 0xcccccc, 2 );
    scene.add( ambientLight );
     
    /* camera(カメラ)の位置設定 */
    camera.position.z = 250;
     
    /* camera(カメラ)をマウス操作する設定 */   
    var controls = new THREE.OrbitControls(camera);
     
    /* MTLファイルとObjファイルの読み込み */           
    new THREE.MTLLoader().setPath('three/')
                         .load('try.mtl',function(materials){
        
        materials.preload();
        
        new THREE.OBJLoader().setPath('three/')
                             .setMaterials(materials)
                             .load('try.obj',function (object){
            
            object.position.y = - 95;
            scene.add(object);
            
        }); 
    });
     
    /* 繰り返しの処理 */
            
    var animate = function () {
        
        requestAnimationFrame( animate );

        renderer.render( scene, camera );
        
    };

    animate();
                        
</script>  
</body>
</html>

-->

変更した部分

    /* MTLファイルとObjファイルの読み込み */           
    new THREE.MTLLoader().setPath('models/male02/')
                         .load('male02.mtl',function(materials){
        
        materials.preload();
        
        new THREE.OBJLoader().setPath('models/male02/')
                             .setMaterials(materials)
                             .load('male02.obj',function (object){

以上、コードを理解していない部分も多々ありますが
setPathの部分とloadの部分を変更して、
jsのデータもフォルダ内に格納しているんで
これをすれば何かは出力されるはずだが
なにもされないです。

原因を教えてください

1
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?