THREE.js Globe imported from OBJ

Developer
Cmalven
Size
4,498 Kb
Views
2,024
  1. THREE.js Globe imported from OBJ Previews
  2. THREE.js Globe imported from OBJ HTML Codes
  3. THREE.js Globe imported from OBJ CSS Codes
  4. THREE.js Globe imported from OBJ JS Codes

How do I make an three.js globe imported from obj?

What is a three.js globe imported from obj? How do you make a three.js globe imported from obj? This script and codes were developed by Cmalven on 29 January 2023, Sunday.

THREE.js Globe imported from OBJ Previews
IQ Test

THREE.js Globe imported from OBJ - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>THREE.js Globe imported from OBJ</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/66496/OBJLoader.js'></script> <script src="js/index.js"></script>
</body>
</html>

THREE.js Globe imported from OBJ - Script Codes CSS Codes

body { margin: 0px; background-color: #0066b2; overflow: hidden;
}

THREE.js Globe imported from OBJ - Script Codes JS Codes

'use strict';
var camera;
var scene;
var renderer;
var mesh;
var mouseX = 0;
var mouseY = 0;
var objScale = 40;
var rotateSpeed = 0.005;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var objUrl = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/66496/low-poly-earth-solid-continents.obj';
// var objUrl = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/66496/low-poly-earth.obj';
init();
animate();
function init() { //--------------------------------------------------------------- // Create and position camera //--------------------------------------------------------------- camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000); camera.position.z = 400; //--------------------------------------------------------------- // Create the scene //--------------------------------------------------------------- scene = new THREE.Scene(); //--------------------------------------------------------------- // Create the Load Manager //--------------------------------------------------------------- var manager = new THREE.LoadingManager(); manager.onProgress = function (item, loaded, total) { console.log(item, loaded, total); }; var onProgress = function onProgress(xhr) { if (xhr.lengthComputable) { var percentComplete = xhr.loaded / xhr.total * 100; console.log(Math.round(percentComplete, 2) + '% downloaded'); } }; var onError = function onError(xhr) {}; //--------------------------------------------------------------- // Load the object //--------------------------------------------------------------- var loader = new THREE.OBJLoader(manager); var material = new THREE.MeshBasicMaterial({ // wireframe: true, color: 0x0066b2, polygonOffset: true, polygonOffsetFactor: 6, // positive value pushes polygon further away polygonOffsetUnits: 1 }); loader.load(objUrl, function (object) { object.traverse(function (child) { if (child instanceof THREE.Mesh) { var helper = new THREE.WireframeHelper(child); helper.material.color.set(0xffffff); helper.material.linewidth = 1; child.material = material; scene.add(helper); } }); mesh = object; mesh.scale.x = mesh.scale.y = mesh.scale.z = objScale; scene.add(mesh); }, onProgress, onError); //--------------------------------------------------------------- // Controls //--------------------------------------------------------------- document.addEventListener('mousemove', onDocumentMouseMove, false); document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); //--------------------------------------------------------------- // Create the Renderer //--------------------------------------------------------------- renderer = new THREE.WebGLRenderer({ antialias: false }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x0066b2, 1); document.body.appendChild(renderer.domElement); //--------------------------------------------------------------- // Listen for the window to resize //--------------------------------------------------------------- window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() { windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight);
}
function updateCamera() { camera.position.x += (mouseX - camera.position.x) * .05; camera.position.y += (-mouseY - camera.position.y) * .05; camera.lookAt(scene.position);
}
function onDocumentMouseMove(event) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart(event) { if (event.touches.length > 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX; mouseY = event.touches[0].pageY - windowHalfY; }
}
function onDocumentTouchMove(event) { if (event.touches.length == 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX; mouseY = event.touches[0].pageY - windowHalfY; }
}
function animate() { requestAnimationFrame(animate); if (mesh) mesh.rotation.y += rotateSpeed; updateCamera(); renderer.render(scene, camera);
}
THREE.js Globe imported from OBJ - Script Codes
THREE.js Globe imported from OBJ - Script Codes
Home Page Home
Developer Cmalven
Username cmalven
Uploaded January 29, 2023
Rating 3
Size 4,498 Kb
Views 2,024
Do you need developer help for THREE.js Globe imported from OBJ?

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!

Cmalven (cmalven) Script Codes
Name
Stacked Card Navigation
Progressively-Enhanced Smooth Scroll
Three.js Playground
Input with Draggable Values
TweenMax Smoke
Self-Generating Node Network
Let it Snow
Three.js Node Cloud
Smooth Chars
Hello, there.
Create amazing art & images 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!