<html lang="en">

<head>
  <title>three.js webgl - OBJLoader + MTLLoader</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
</head>

<body>
<!-- Three.js r79 -->
<script src="https://cdn.rawgit.com/mrdoob/three.js/r79/build/three.js"></script>
<!-- MTLLoader.js -->
<script src="https://cdn.rawgit.com/mrdoob/three.js/r79/examples/js/loaders/MTLLoader.js"></script>
<!-- OBJLoader.js -->
<script src="https://cdn.rawgit.com/mrdoob/three.js/r79/examples/js/loaders/OBJLoader.js"></script>
<!-- OrbitControls.js -->
<script src="https://cdn.rawgit.com/mrdoob/three.js/r79/examples/js/controls/OrbitControls.js"></script>
</body>

</html>

var camera, scene, renderer,
    width = window.innerWidth,
    height = window.innerHeight;

    var assetsPath = 'https://s3-ap-northeast-1.amazonaws.com/niisan-tokyo-threejs-playground/treee_assets/tuna/';

loadOBJ();
init();
render();

function init() {

    // renderer ------------------------------
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setClearColor( 0x222222 ); // 背景色
    renderer.setSize( width, height );
    document.body.appendChild( renderer.domElement );

    // scene ------------------------------
    scene = new THREE.Scene();

    // camera ------------------------------
    var perscamera = new THREE.PerspectiveCamera( 45, width / height, 1, 10000 ); // fov(視野角),aspect,near,far
    var orthocamera = new THREE.OrthographicCamera( width / -2, width / 2, height / 2, height / -2, 1, 10000 );
    camera = perscamera;
    camera.position.set(100, 100, 100);
    camera.up.set(0, 1, 0);
    camera.lookAt({ x:0, y:0, z:0 });

    // add light ３点光にしてあげる
    var light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 1, 1, 1 );
    scene.add( light );

    var light = new THREE.DirectionalLight( 0x002288 );
    light.position.set( -1, -1, -1 );
    scene.add( light );

    var light = new THREE.AmbientLight( 0x444444 );
    scene.add( light );

    // controls ------------------------------
    controls = new THREE.OrbitControls(camera);

    // axis ------------------------------
    var axis = new THREE.AxisHelper(1000);
    axis.position.set(0,0,0);
    scene.add(axis);

}

function render(){
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}

function loadOBJ() {
    // obj mtl を読み込んでいる時の処理
    var onProgress = function ( xhr ) {
        if ( xhr.lengthComputable ) {
            var percentComplete = xhr.loaded / xhr.total * 100;
            console.log( Math.round(percentComplete, 2) + '% downloaded' );
            }
    };

    // obj mtl が読み込めなかったときのエラー処理
    var onError = function ( xhr ) {    };

    // obj mtlの読み込み
    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.setPath( assetsPath );              // this/is/obj/path/
    mtlLoader.load( 'tuna.mtl', function( materials ) {
      materials.preload();
      var objLoader = new THREE.OBJLoader();
      objLoader.setMaterials( materials );
      objLoader.setPath( assetsPath );            // this/is/obj/path/
      objLoader.load( 'tuna.obj', function ( object ) {
        scene.add(object);                         // sceneに追加
      }, onProgress, onError );
    });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.