JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/loaders/DDSLoader.js"></script>
<script src="http://threejs.org/examples/js/loaders/MTLLoader.js"></script>
<script src="http://threejs.org/examples/js/loaders/OBJMTLLoader.js"></script>
JavaScript
var container, stats;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;
// scene
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x888888 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );
// model
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) {
};
THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
var loader = new THREE.OBJMTLLoader();
loader.load( 'http://threejs.org/examples/obj/male02/male02.obj', 'http://threejs.org/examples/obj/male02/male02_dds.mtl', function ( object ) {
object.position.x = - 50;
object.position.y = - 80;
object.position.z = - 100;
scene.add( object );
//create clone and mirror it
var tClone = object.clone();
tClone.position.x += 100;
tClone.scale.x = -1;
scene.add( tClone );
tClone.traverse( function ( child ) {
if ( child instanceof THREE.Mesh )
{
if (child.material !== null) {
child.material = child.material.clone();
child.material.side = THREE.BackSide;
}
}
});
}, onProgress, onError );
//
renderer = new THREE.WebGLRenderer();
...