I just started using Three.js and created a program which made a globe. When I run this just in the window without using document.getElementById it runs very fast. However, use it in an abridged code below it is incredibly slow.
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/Addons.js';
import getStarField from './getStarfield.js';
import {getFresnelMat} from './getFresnelMat.js';
export function initializeThreeJS(){
var container = document.getElementById('world');
// a scene
const scene = new THREE.Scene();
scene.background = new THREE.Color( 'gainsboro' );
var camera = new THREE.PerspectiveCamera( 30, container.clientWidth/ container.clientHeight );
camera.position.set( 2, 5, 10 );
camera.position.z = 25;
var renderer = new THREE.WebGLRenderer( {antialias: true} );
renderer.setSize( container.clientWidth, container.clientHeight);
renderer.setAnimationLoop( animate );
container.appendChild( renderer.domElement );
const earthGroup = new THREE.Group();
scene.add(earthGroup);
/*
* Starfield tb implemented
*/
/*
* temporary lighting
*/
var controls = new OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;
var ambientLight = new THREE.AmbientLight( 'white', 0.5 );
scene.add( ambientLight );
var light = new THREE.DirectionalLight( 'white', 0.5 );
light.position.set( 1, 1, 1 );
scene.add( light );
/*
* Orbit Controls tb implemented
*/
const loader = new THREE.TextureLoader();
/*
* Earth Geometry
*/
const geometry = new THREE.IcosahedronGeometry(1, 12);
const material = new THREE.MeshPhongMaterial({
map: loader.load("./textures/00_earthmap1k.jpg"),
specularMap: loader.load("./textures/02_earthspec1k.jpg"),
bumpMap: loader.load("./textures/01_earthbump1k.jpg"),
bumpScale: 0.04,
});
const earthMesh = new THREE.Mesh(geometry, material);
earthGroup.add(earthMesh);
/*
* Function Loop
*/
function animate() {
requestAnimationFrame(animate);
// Rotate the cube
// Render the scene
renderer.render(scene, camera);
}
}
Here is the html section as well
<body>
<div id="container">
<div id="world" ></div>
</div>
</body>
Is there any way to speed this up or to let me know if I’m using the map function wrong because that seems to be slowing down the program a lot?