<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, mouse2D, controls,
    radius = 150,
    theta = 45,
    phi = 0,
    width = window.innerWidth,
    height = window.innerHeight,
    lastAnimTime = window.performance.now(),
    RENDER_INTERVAL = 30,
    TICK_INTERVAL = 500;

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

loadOBJ();
init();
// start();
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, 50, 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( 10, 10, 10 );
    scene.add( light );

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

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

    // controls ------------------------------
    controls = new THREE.OrbitControls(camera);
    // controls.userPan = false;
    // controls.userPanSpeed = 0.0;
    controls.maxDistance = 500.0;
    // controls.maxPolarAngle = Math.PI * 0.495;
    controls.autoRotate = false;     //true:自動回転する,false:自動回転しない
    controls.autoRotateSpeed = 2.0;    //自動回転する時の速度
  
    // // axis ------------------------------
    var axis = new THREE.AxisHelper(0);
    axis.position.set(0,0,0);
    scene.add(axis);

}

function render(){
    requestAnimationFrame( render );

    renderer.render( scene, camera );
    controls.update();
}

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( 'spot.mtl', function( materials ) {
      materials.preload();
      var objLoader = new THREE.OBJLoader();
      objLoader.setMaterials( materials );
      objLoader.setPath( assetsPath );            // this/is/obj/path/
      objLoader.load( 'spot.obj', function ( object ) {
        objmodel = object.clone();
        objmodel.scale.set(50, 50, 50);      // 縮尺の初期化
        objmodel.rotation.set(0, 0, 0);         // 角度の初期化
        objmodel.position.set(0, 0, -15);         // 位置の初期化

    // objをObject3Dで包む
        obj = new THREE.Object3D();
        obj.add(objmodel);

        scene.add(obj);                         // sceneに追加
      }, onProgress, onError );
    });
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.