JSFiddle - React, Tailwind, and code Playground
JavaScript
var _loaders = {},
color = {
material: 0xDC143C
},
defaults = {
path: {
uploads: '/files/uploads/objects/'
},
camera: {
position: {
x: 5,
y: 5,
z: 5
},
fov: 45,
aspect: window.innerWidth / window.innerHeight,
near: 0.1,
far: 50000
},
step: 0,
mesh: null,
material: new THREE.MeshLambertMaterial({color: 0xDC143C})
};
/**
* objectData {
* url: '/path/to/object/1.mtl',
* extension: 'mtl',
* image_uri: '/path/t/image.png'
* }
*
* @param a
*/
_loaders.loadCurrentObject = function (a) {
_loaders.object = a;
console.log(a);
_loaders.scene = new THREE.Scene();
_loaders.camera = new THREE.PerspectiveCamera(
defaults.camera.fov,
defaults.camera.aspect,
defaults.camera.near,
defaults.camera.far
);
_loaders.scene.add(_loaders.camera);
_loaders.webGLRenderer = new THREE.WebGLRenderer();
_loaders.webGLRenderer.setClearColor(new THREE.Color(0xffffff, 1.0));
_loaders.webGLRenderer.setSize(window.innerWidth, window.innerHeight);
_loaders.webGLRenderer.shadowMapEnabled = true;
_loaders.camera.position = defaults.camera.position;
_loaders.camera.lookAt(_loaders.scene.position);
_loaders.scene.add(_loaders.camera);
_loaders.orbitControls = new THREE.OrbitControls(_loaders.camera);
_loaders.orbitControls.autoRotate = true;
_loaders.clock = new THREE.Clock();
_loaders.directionalLight = new THREE.DirectionalLight(0xffeedd);
_loaders.directionalLight.position.set(100, 100, 150);
_loaders.camera.add(_loaders.directionalLight);
_loaders.step = defaults.step;
document.getElementById("WebGL-output").appendChild(_loaders.webGLRenderer.domElement);
switch (a.extension) {
case 'obj':
if (a.texture !=...