JSFiddle - React, Tailwind, and code Playground

by liyuanqiu

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<script src="//139.196.28.110/OrbitControls.js"></script>

JavaScript

init();

function init() {

    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

		var group = new THREE.Object3D();

    var mesh = getMesh(200, 200, 200, {
    	x: 0, y: 0, z: 0
    }, Math.PI / 4);
    group.children.push(mesh);
    
    mesh = getMesh(200, 200, 200, {
    	x: 100, y: 0, z: 0
    }, Math.PI / 4);
    group.add(mesh);
    
    scene.add(group);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    
    animate(renderer);

    document.body.appendChild(renderer.domElement);
    
    function animate() {
    		requestAnimationFrame(animate);
    		render(renderer);
		}
    function render() {
        renderer.render(scene, camera);
    }
}

function getMesh(x, y, z, p, rotation) {
		var geometry = new THREE.CubeGeometry(x, y, z);
    var material = new THREE.MeshNormalMaterial();
    var mesh = new THREE.Mesh(geometry, material);    
    mesh.rotation.x += rotation;
    mesh.position.set(p.x, p.y, p.z);
    return mesh;
}