Spherical orbiter

Developer
Josh Beckwith
Size
3,870 Kb
Views
6,072
  1. Spherical orbiter Previews
  2. Spherical orbiter HTML Codes
  3. Spherical orbiter CSS Codes
  4. Spherical orbiter JS Codes

How do I make an spherical orbiter?

What is a spherical orbiter? How do you make a spherical orbiter? This script and codes were developed by Josh Beckwith on 24 December 2022, Saturday.

Spherical orbiter Previews
IQ Test

Spherical orbiter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spherical orbiter</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='https://rawgit.com/dataarts/dat.gui/master/build/dat.gui.min.js'></script>
<script src='https://hammerjs.github.io/dist/hammer.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Spherical orbiter - Script Codes CSS Codes

body { margin: 0; overflow: hidden;
}

Spherical orbiter - Script Codes JS Codes

'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var World = function () { function World() { var _this = this; _classCallCheck(this, World); this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000); // this.camera.position.z = 100 this.renderer = new THREE.WebGLRenderer(); this.renderer.setClearColor(0x000000); document.body.appendChild(this.renderer.domElement); this.resize(); this.addCube(); this.addLight(); var gui = new dat.GUI(); var rotFolder = gui.addFolder('orbital rotation'); rotFolder.add(this.orbital.rotation, 'x', 0, Math.PI * 2); rotFolder.add(this.orbital.rotation, 'y', 0, Math.PI * 2); rotFolder.add(this.orbital.rotation, 'z', 0, Math.PI * 2); var posFolder = gui.addFolder('orbital position'); posFolder.add(this.orbital.position, 'x', -300, 300); posFolder.add(this.orbital.position, 'y', -300, 300); posFolder.add(this.orbital.position, 'z', -300, 300); requestAnimationFrame(this.render.bind(this)); window.addEventListener('resize', this.resize.bind(this)); var mc = new Hammer.Manager(document.body, { recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_ALL }]] }); mc.on('pan', function (e) { console.log(e); //TODO: react to orientation _this.orbital.rotation.y -= e.deltaX / 10000; _this.orbital.rotation.x -= e.deltaY / 10000; }); } World.prototype.update = function update() { // this.cube.rotation.y += 0.01 // apply inverse rotation values to cube this.cube.rotation.set(-this.orbital.rotation.x, -this.orbital.rotation.y, -this.orbital.rotation.z); this.orbital.updateMatrixWorld(); var vector = new THREE.Vector3(); vector.setFromMatrixPosition(this.cube.matrixWorld); this.camera.lookAt(vector); }; World.prototype.addLight = function addLight() { var light1 = new THREE.PointLight(0xffffff, 1, 200); light1.position.set(0, 40, -140); this.orbital.add(light1); var light2 = new THREE.AmbientLight(0x404040); this.orbital.add(light2); }; World.prototype.addCube = function addCube() { var geometry = new THREE.BoxGeometry(50, 50, 50); var material = new THREE.MeshLambertMaterial({ color: 0x00ff00 }); this.cube = new THREE.Mesh(geometry, material); this.cube.position.z = -200; this.orbital = new THREE.Object3D(); this.orbital.add(this.cube); this.scene.add(this.orbital); }; World.prototype.render = function render() { this.update(); requestAnimationFrame(this.render.bind(this)); this.renderer.render(this.scene, this.camera); }; World.prototype.resize = function resize() { this.camera.aspect = window.innerWidth / window.innerHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize(window.innerWidth, window.innerHeight); }; return World;
}();
var _w = new World();
Spherical orbiter - Script Codes
Spherical orbiter - Script Codes
Home Page Home
Developer Josh Beckwith
Username positlabs
Uploaded December 24, 2022
Rating 3
Size 3,870 Kb
Views 6,072
Do you need developer help for Spherical orbiter?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Josh Beckwith (positlabs) Script Codes
Name
Youtube 360 player sandbox
Fly Eye CSS
A Pen by Josh Beckwith
Youtube iframe player sandbox
Emoji Split with spliddit
Emoji Split
Joystick Spinner
JPG SMASH
Three orbiter
Time Dilation
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!