JSFiddle - React, Tailwind, and code Playground

by A A

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>
<script src="https://alexan0308.github.io/threejs/build/three.min.js"></script>
<script src="https://alexan0308.github.io/threejs/examples/js/loaders/OBJLoader.js"></script>
<script src="https://alexan0308.github.io/threejs/examples/js/loaders/MTLLoader.js"></script>
<script src="https://alexan0308.github.io/threejs/examples/js/loaders/OBJMTLLoader.js"></script>

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="workspace"></div>

JavaScript

//define global variables here
    var container, renderer;
    var camera, scene, projector, mouseVector, controls;
    var mouseX, mouseY, draggable;
    var pen, c_mesh, interactiveObj = [], rotateObj = [], groundRaycastObj = [];
    var wallWidth = 1200;
    var wallHeight = 400;
    var chair_model, sofa_model;
    var chair_selected = false;
    var sofa_selected = false;

    var raycaster;
    var mouse = new THREE.Vector2(), INTERSECTED;
    var radius = 100, theta = 0;
    var oldIntersectPoint = new THREE.Vector3();
    var newIntersectPoint = new THREE.Vector3(); 
    var intersectOffset   = new THREE.Vector3();

    var chair_rotate = false;
    var walls;
    var mesh_box;
    var wallright, wallleft, wallback, wallfront, ceiling, ground;
    var strDownloadMime = "image/octet-stream";

    init();
    animate();

    function init() {

        container = document.getElementById('workspace'); //document.createElement('div');

        document.body.appendChild(container);

        //camera
        //camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 10, 10000);
       // camera.position.set(0, -wallHeight / 2 + 10, wallWidth);
        //  camera.lookAt(new THREE.Vector3(10, 10, 10));

        //renderer
        renderer = new THREE.WebGLRenderer({preserveDrawingBuffer: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x889988);
        renderer.shadowMapEnabled = true;
        container.appendChild(renderer.domElement);

        scene = new THREE.Scene();
        raycaster = new THREE.Raycaster();

        var ambient = new THREE.AmbientLight(0xffffff);
        scene.add(ambient);

        camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );

        camera.position.z= wallWidth;
        camera.position.y= wallWidth/2;


        controls = new THREE.OrbitControls( camera, renderer.domElement );
               ...