JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<body>
<div id="scene_container">
<div id="canvasDiv" ></div>
</div>
</body>
CSS
body{
margin: 0px;
overflow: hidden;
background: linear-gradient(0deg, #112748 20%, #0b1627 60%);
background-repeat: no-repeat;
background-attachment: fixed;
}
#canvasDiv {
margin: auto;
position: static;
}
JavaScript
var scene, camera, constrols, renderer;
container = document.getElementById( 'canvasDiv' );
function init() {
//create scene
scene = new THREE.Scene();
//create renderer
createRenderer();
//create Camera
createCamera();
//create grid
createGrid();
//create Light
createLights();
scene.add(obj);
obj.scale.x = 1/15;
obj.scale.y = 1/15;
obj.scale.z = 1/15;
//call the render function
render();
}
function createRenderer() {
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff, 1.0);
renderer.setSize(window.innerWidth / 1.5, window.innerHeight / 1.5);
var rend = container.appendChild( renderer.domElement );
rend.style.position = 'absolute';
rend.style.borderRadius = '5px';
rend.style.margin = 'auto';
rend.style.top = '20%';
rend.style.bottom = '0';
rend.style.left = '0';
rend.style.right = '0';
rend.style.zIndex = '0.5';
}
function createCamera() {
camera = new THREE.PerspectiveCamera(50, (window.innerWidth / 1.5 ) / (window.innerHeight / 1.5), 0.1, 1000 );
camera.position.y = 45;
camera.rotation.x = -90 * Math.PI/180;
controls = new THREE.OrbitControls( camera, renderer.domElement );
}
function createLights() {
var ambientLight;
ambientLight = new THREE.AmbientLight();
scene.add(ambientLight);
}
function createGrid(){
var size = 80;
var divisions = 30;
var gridHelper = new THREE.GridHelper( size, divisions );
scene.add( gridHelper );
}
function loadObject() {
var loadingManager = new THREE.LoadingManager();
var ObjLoader = new THREE.OBJLoader(loadingManager);
var textureLoader = new THREE.TextureLoader(loadingManager);
var material = new...