World.js

In this example below you will see how to do a World.js with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Hornebom, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Hornebom ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>World.js</title>
  
  
  
  
  
</head>

<body>

  
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Hornebom/worldjs-EwMOyq */
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _class, _temp;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var World = (_temp = _class = function () {
    function World(opts) {
        _classCallCheck(this, World);

        this.scene = null;
        this.camera = null;
        this.renderer = null;

        this.opts = _extends({}, World.defaultOpts, opts);
        this.init();
    }

    _createClass(World, [{
        key: "init",
        value: function init() {
            this.initScene();
            this.initCamera();
            this.initRenderer();
            this.addRenderer();
            window.addEventListener("resize", this.resizeHandler.bind(this));
        }
    }, {
        key: "initScene",
        value: function initScene() {
            this.scene = new THREE.Scene();
        }
    }, {
        key: "initCamera",
        value: function initCamera() {
            this.camera = new THREE.PerspectiveCamera(this.opts.camFov, window.innerWidth / window.innerHeight, this.opts.camNear, this.opts.camFar);
            this.camera.position.set(this.opts.camPosition.x, this.opts.camPosition.y, this.opts.camPosition.z);
            this.camera.lookAt(this.scene.position);
            this.scene.add(this.camera);
        }
    }, {
        key: "initRenderer",
        value: function initRenderer() {
            this.renderer = new THREE.WebGLRenderer({
                alpha: true,
                antialias: true,
                logarithmicDepthBuffer: true
            });
            this.renderer.setSize(window.innerWidth, window.innerHeight);
        }
    }, {
        key: "addRenderer",
        value: function addRenderer() {
            this.opts.container.appendChild(this.renderer.domElement);
        }
    }, {
        key: "resizeHandler",
        value: function resizeHandler() {
            this.renderer.setSize(window.innerWidth, window.innerHeight);
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
        }
    }]);

    return World;
}(), _class.defaultOpts = {
    container: document.body,
    camPosition: new THREE.Vector3(0, 0, 0),
    camFov: 10,
    camNear: 0.1,
    camFar: 800
}, _temp);

Comments