THREE.js Globe imported from OBJ
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 - 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](http://shots.codepen.io/cmalven/pen/EypmXv-512.jpg)
Developer | Cmalven |
Username | cmalven |
Uploaded | January 29, 2023 |
Rating | 3 |
Size | 4,498 Kb |
Views | 2,024 |
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!
Name | Size |
Smooth Chars | 4,429 Kb |
Type Pathfitting | 6,112 Kb |
VerbalExpressions Converter | 2,607 Kb |
Responsive Device Morph | 7,940 Kb |
Paper Shift | 3,128 Kb |
Input with Draggable Values | 3,061 Kb |
Three.js Playground | 3,712 Kb |
Progressively-Enhanced Smooth Scroll | 3,910 Kb |
Let it Snow | 3,149 Kb |
AnimPanel Demo | 3,100 Kb |
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!
Name | Username | Size |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Under construction | GhostRider | 1,642 Kb |
Glowing Pulse Form | Jackrugile | 2,542 Kb |
Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
CSSOff 2013 Submission | Codewunder | 14,766 Kb |
Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
Canvas snow | Win7killer | 2,572 Kb |
Update CSS Variables with JS | Wesbos | 2,335 Kb |
Slider css only | Armandobau | 2,161 Kb |
Social.svg.min | Larsenwork | 13,849 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!