JSFiddle - React, Tailwind, and code Playground
JavaScript
import * as THREE from "https://cdn.skypack.dev/three@0.133.1";
import { OBJLoader } from 'https://cdn.skypack.dev/three@0.133.1/examples/jsm/loaders/OBJLoader';
import * as BufferGeometryUtils from 'https://cdn.skypack.dev/three@0.133.1/examples/jsm/utils/BufferGeometryUtils.js'
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
let camera, scene, renderer, group;
init();
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 15;
group = new THREE.Group();
scene = new THREE.Scene();
let material = new THREE.MeshNormalMaterial();
scene.add( group );
group.position.y = 5;
const loader = new OBJLoader();
loader.load(
'https://dl.dropbox.com/s/7f3q5s39gbvoedn/loop.obj',
function ( object ) {
object.traverse( function( child ) {
if ( child instanceof THREE.Mesh ) {
child.material = material;
}
if ( child instanceof THREE.Object3D ) {
if(child.geometry !== undefined){
child.geometry.deleteAttribute( 'normal' );
child.geometry = BufferGeometryUtils.mergeVertices(child.geometry);
child.geometry.computeVertexNormals();
}
}
} );
group.add(object);
},
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
function ( error ) {
console.log( 'An error happened' );
}
);
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
...