<div class="outer">
    <div class="inner">
        This is DOM content.
    </div>
</div>
body, html {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

body {
    perspective: 800px;
}

canvas { display: block; }

body, div {
    transform-style: preserve-3d;
}

div {
    box-sizing: border-box;
}

div.outer {
    width: 100px;
    height: 100px;
    /*background: pink;*/
    opacity: 0.5;
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: 0 0;
}

div.inner {
    background: pink;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}
var mesh, renderer, scene, camera, controls, mesh;
var rotationY = 0
var cameraZ = 20
var perspective = 600
var div = document.querySelector('div')
var positionX = -100
var positionZ = -100

document.body.style.perspective = `${perspective}px`
div.style

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio( window.devicePixelRatio ); // RESOLUTION
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();

    // camera
    const fov = 180 * ( 2 * Math.atan( innerHeight / 2 / perspective ) ) / Math.PI
    camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 0, 0, perspective );

    // controls
    controls = new THREE.OrbitControls( camera );

    // ambient
    scene.add( new THREE.AmbientLight( 0x222222 ) );

    // light
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 10, 0, 10 );
    scene.add( light );

    const geom = new THREE.BoxBufferGeometry( 100, 100, 0.0001 );
    const mat = new THREE.MeshBasicMaterial( { color: 'skyblue' } );
    mesh = new THREE.Mesh( geom, mat );
    mesh.position.set( 0, 0, 0 );

    scene.add( mesh, camera );

}

function animate(time) {

    // requestAnimationFrame( animate );

    controls.update();
    
    positionX = 100 * Math.sin(time * 0.001)
    positionZ = 100 * Math.cos(time * 0.001)
    rotationY += 2
    div.style.transform = `translate3d(${positionX}px, 0, ${positionZ}px) rotateY(${rotationY}deg)`
    mesh.rotation.y = rotationY / 180 * Math.PI
    mesh.position.x = positionX
    mesh.position.z = positionZ

    renderer.render( scene, camera );

}


init();

// animate(performance.now());

renderer.vr.enabled = true
renderer.animate( animate )
// renderer.setAnimationLoop( animate )
document.body.appendChild( WEBVR.createButton( renderer ) )


////////////////////////////////////////

const loader = new THREE.OBJLoader

// loader.load('https://trusktr.io/obj/blob.obj',
// 	// called when resource is loaded
// 	function ( o ) {

//         o.traverse( o => {
//             o.position.set( 0, 0, 0 )
//             if (o.isMesh) {
//                 o.geometry.applyMatrix( new THREE.Matrix4().makeTranslation(0, -600, 0) );
//             }
//         } )
    
// 		scene.add( o );
    
//         console.log(o)

// 	},
// 	// called when loading is in progresses
// 	function ( xhr ) {

// 		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

// 	},
// 	// called when loading has errors
// 	function ( error ) {

// 		console.log( 'An error happened', error );

// 	}
// )
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/three@0.88.0/build/three.js
  2. https://unpkg.com/three@0.88.0/examples/js/controls/OrbitControls.js
  3. https://unpkg.com/three@0.88.0/examples/js/vr/WebVR.js
  4. https://unpkg.com/three@0.88.0/examples/js/loaders/OBJLoader.js