3dObjectRotate

ObjLoader2 three js

by Deeps G

HTML

<script src="https://drive.google.com/open?id=11WNPjcp0Mi86VX-cJd0j5afQSkBYKceG"></script>
<script src="https://drive.google.com/open?id=1ceMSReFuyYrqBwL-7L1czRTxbGTcyB2t"></script>
<canvas id="c"></canvas>
  <script src="https://threejsfundamentals.org/threejs/resources/threejs/r105/three.min.js"></script>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r105/js/controls/OrbitControls.js"></script>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r105/js/loaders/LoaderSupport.js"></script>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r105/js/loaders/OBJLoader2.js"></script>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r105/js/loaders/MTLLoader.js"></script>

CSS

html, body {
  margin: 0;
  height: 100%;
}
#c {
  width: 100%;
  height: 100%;
  display: block;
}

JavaScript

// Three.js - Load .OBJ ?
// from https://threejsfundamentals.org/threejs/threejs-load-obj-no-materials.html


  'use strict';

/* global THREE */

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const fov = 5;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(1, 0, 1);

  const controls = new THREE.OrbitControls(camera, canvas);
  controls.target.set(0, 0, 0);
  controls.update();

  const scene = new THREE.Scene();
  scene.background = new THREE.Color('black');
 
  {
    const skyColor = 0xB1E1FF;  // light blue
    const groundColor = 0xB94550;  // brownish orange
    const intensity = 1;
    const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
    scene.add(light);
  }

  {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(0, 0, 0);
    light.target.position.set(0, 0, 0);
    scene.add(light);
    scene.add(light.target);
  }
 

  {
    const objLoader = new THREE.OBJLoader2();
    objLoader.loadMtl('https://drive.google.com/open?id=11WNPjcp0Mi86VX-cJd0j5afQSkBYKceG', null, (materials) => {
    console.log("load json");
      console.log(JSON.stringify(materials));
      objLoader.setMaterials(materials);
      objLoader.load('https://drive.google.com/open?id=1ceMSReFuyYrqBwL-7L1czRTxbGTcyB2t', (event) => {
        console.log("Brain:  "+JSON.stringify(event));
        const root = event.detail.loaderRootNode;
        scene.add(root);
      });
    });
  }

  var raycaster = new THREE.Raycaster();
  var mouse = new THREE.Vector2();

  function onMouseMove( event ) {

    // calculate mouse position in normalized device coordinates
    // (-1 to +1) for both components

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - (...