JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
MODEL = {
"metadata" :
{
"formatVersion" : 3.1,
"sourceFile" : "i.obj",
"generatedBy" : "OBJConverter",
"vertices" : 529,
"faces" : 1024,
"normals" : 0,
"colors" : 0,
"uvs" : 287,
"materials" : 0
},
"scale" : 1.000000,
"materials": [ {
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "default"
}],
"vertices":...
CSS
button {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 80px;
}
JavaScript
var container, stats;
var camera, scene, renderer, composer, controls;
var loader;
init();
function init() {
scene = new THREE.Scene();
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 100);
controls = new THREE.OrbitControls(camera);
controls.target.y = 20;
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x333333, 1);
container.appendChild(renderer.domElement);
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 300, 200);
scene.add(pointLight);
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
// events
window.addEventListener('resize', onWindowResize, false);
//________________________________//
//______________MAIN______________//
//________________________________//
var loader = new THREE.JSONLoader();
model = loader.parse(MODEL);
var bufferGeometry = new THREE.BufferGeometry();
bufferGeometry.fromGeometry(model.geometry);
bufferGeometry.computeVertexNormals();
bufferGeometry.computeFaceNormals();
mesh = new THREE.Mesh(bufferGeometry, new THREE.MeshPhongMaterial());
scene.add(mesh);
//________________________________//
//______________END_______________//
//________________________________//
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
var clock = new THREE.Clock();
animate();
function animate() {
var delta = clock.getDelta();
requestAnimationFrame(animate);
controls.update();
render(delta);
}
function...