JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="https://s3.eu-west-2.amazonaws.com/bckld/BasisOrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/MTLLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
CSS
body {
background: #f0f0f0;
margin: 0;
overflow: hidden;
}
JavaScript
var scene, camera, renderer;
var controls;
init();
animate();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
camera = new THREE.PerspectiveCamera(60, 4 / 3, 0.1, 1000.0);
renderer = new THREE.WebGLRenderer({antialias: true});
var width = 1.5;
var height = 1.5;
var depth = 6.0;
var basis = new THREE.Matrix4();
basis.makeScale(2.0, 3.0, 4.0);
controls = new THREE.BasisOrbitControls(camera, basis, renderer.domElement);
controls.minDistance = 0.75;
controls.maxDistance = 1.5;
// Ellipsoid helper
var ellipsoid = new THREE.Mesh(
new THREE.SphereBufferGeometry(1.0, 32, 24),
new THREE.MeshBasicMaterial({
color: 0x909090,
wireframe: true
})
);
ellipsoid.renderOrder = 2;
ellipsoid.applyMatrix(basis);
ellipsoid.scale.multiplyScalar(0.5);
scene.add(ellipsoid);
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setCrossOrigin(true);
mtlLoader.setPath('https://s3.eu-west-2.amazonaws.com/bckld/models/ship/');
mtlLoader.load('ship.mtl', function (materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('https://s3.eu-west-2.amazonaws.com/bckld/models/ship/');
objLoader.load('ship.obj', function (object) {
window.obj = object;
object.position.set(0.0, -1.25, -0.25);
object.children.forEach(function (child) {
if (child.material) {
if (child.material.transparent) {
child.material.alphaTest = 0.5;
}
if (child.name === 'rdmobj00' || child.name === 'rdmobj12') {
child.material.side = THREE.DoubleSide;
}
}
});
object.scale.multiplyScalar(0.05);
scene.add(object);
...