3d Object

Try to render 3d object by using three.min.js

by YeongCY

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdn.rawgit.com/mrdoob/three.js/r98/build/three.min.js"></script>
	<script src="https://cdn.rawgit.com/mrdoob/three.js/r98/examples/js/shaders/CopyShader.js"></script>
  <script src="https://cdn.rawgit.com/mrdoob/three.js/r98/examples/js/shaders/FXAAShader.js"></script>
  <script src="https://cdn.rawgit.com/mrdoob/three.js/r98/examples/js/postprocessing/RenderPass.js"></script>
	<script src="https://cdn.rawgit.com/mrdoob/three.js/r98/examples/js/postprocessing/ShaderPass.js"></script>
  <script src="https://cdn.rawgit.com/mrdoob/three.js/r98/examples/js/loaders/OBJLoader.js"></script>
  <script src="https://cdn.rawgit.com/mrdoob/three.js/r98/examples/js/loaders/TGALoader.js"></script>
  <script src="https://cdn.rawgit.com/mrdoob/three.js/r98/examples/js/controls/OrbitControls.js"></script>
  <script src="https://cdn.rawgit.com/mrdoob/three.js/r98/examples/js/postprocessing/OutlinePass.js"></script>
	<script src="https://cdn.rawgit.com/mrdoob/three.js/r98/examples/js/postprocessing/EffectComposer.js"></script>
	<script src="https://cdn.rawgit.com/mrdoob/three.js/r98/examples/js/postprocessing/RenderPass.js"></script>
	<script src="https://cdn.rawgit.com/mrdoob/three.js/r98/examples/js/postprocessing/ShaderPass.js"></script>
	<script src="https://cdn.rawgit.com/mrdoob/three.js/r98/examples/js/libs/stats.min.js"></script>
	<script src="https://cdn.rawgit.com/mrdoob/three.js/r98/examples/js/libs/dat.gui.min.js"></script>
  <div class="side-panel">Haha</div>

CSS

div.map-box {
            overflow: hidden;
        }
        canvas, div.map-box {
            z-index: -1;
        }
        html, body, canvas, div.map-box {
            margin:0;
            padding: 0;
            width: 100%; 
            height: 100%; 
        }
        div.side-panel {
            position:absolute;
            right:0px;
            top:0px;
            width:15%;
            height:100%;
            z-index:10;
            background-color: white;
        }

JavaScript

var container;
        var camera, controls, scene, renderer, model;

        var mouseX = 0,
            mouseY = 0;

        var test = true;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;
        
        var angle = 0,
            speed = .02,
            centerY = 0,
            waveHeight = 60;

        init();
        animate();

        function webglAvailable() {
            try {
                var canvas = document.createElement('canvas');
                return !!(window.WebGLRenderingContext && (
                canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
            } catch (e) {
                return false;
            }
        }

        function init() {
            container = document.createElement('div');
            container.className = "map-box";
            document.body.appendChild(container);

            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.x = 0;
            camera.position.y = 50;
            camera.position.z = 40;
            
            //camera.rotation.y += 90 * Math.PI / 180

            controls = new THREE.OrbitControls(camera);
            controls.autoRotate = true;

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

            var ambient = new THREE.AmbientLight(0x404040); //0x101030
            scene.add(ambient);

            var directionalLight = new THREE.DirectionalLight(0xffffff);
            directionalLight.position.set(1, 1, 1).normalize();
            scene.add(directionalLight);

            // Loading manager
            var manager = new THREE.LoadingManager();
            manager.onProgress = function (item, loaded, total) {
                //console.log(item, loaded, total);
            };

            var onProgress = function (xhr) {
                if (xhr.lengthComputable) {
                    var...