Three orbiter

Developer
Josh Beckwith
Size
3,490 Kb
Views
22,264
  1. Three orbiter Previews
  2. Three orbiter HTML Codes
  3. Three orbiter CSS Codes
  4. Three orbiter JS Codes

How do I make an three orbiter?

What is a three orbiter? How do you make a three orbiter? This script and codes were developed by Josh Beckwith on 29 August 2022, Monday.

Three orbiter Previews
IQ Test

Three orbiter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>three 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='http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Three orbiter - Script Codes CSS Codes

body { margin: 0; overflow: hidden;
}

Three 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 Orbiter = function () { function Orbiter(target, options) { _classCallCheck(this, Orbiter); this.target = target; options = options || {}; this.radius = options.radius || 100; this.s = options.s || 0; this.t = options.t || 0; } Orbiter.prototype.update = function update(deltaTime) { var x = this.radius * Math.cos(this.s) * Math.sin(this.t); var y = this.radius * Math.sin(this.s) * Math.sin(this.t); var z = this.radius * Math.cos(this.t); this.target.position.set(x, y, z); this.target.lookAt(new THREE.Vector3()); }; return Orbiter;
}();
var World = function () { function World() { _classCallCheck(this, World); this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); this.camera.position.z = 100; this.renderer = new THREE.WebGLRenderer(); this.renderer.setClearColor(0x000000); document.body.appendChild(this.renderer.domElement); this.orbiter = new Orbiter(this.camera); this.addCube(); this.addLight(); this.gui = new dat.GUI(); this.gui.add(this.orbiter, 'radius', 10, 1000); this.gui.add(this.orbiter, 's', 0, Math.PI * 2); this.gui.add(this.orbiter, 't', 0, Math.PI * 2); requestAnimationFrame(this.render.bind(this)); window.addEventListener('resize', this.resize.bind(this)); this.resize(); } World.prototype.update = function update() { this.cube.rotation.y += 0.001; this.orbiter.update(); }; World.prototype.addLight = function addLight() { var light1 = new THREE.PointLight(0xffffff, 1, 100); light1.position.set(0, 0, 100); this.scene.add(light1); var light2 = new THREE.AmbientLight(0x404040); this.scene.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.scene.add(this.cube); }; 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();
Three orbiter - Script Codes
Three orbiter - Script Codes
Home Page Home
Developer Josh Beckwith
Username positlabs
Uploaded August 29, 2022
Rating 3
Size 3,490 Kb
Views 22,264
Do you need developer help for Three 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
Joystick Spinner
Fly Eye CSS
A Pen by Josh Beckwith
Time Dilation
Punch Button
Hootsuite Button Demo
Emoji Split
Spherical orbiter
Blurry text
Refraction image reveal
Create amazing blog posts 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!