Thanks,
Here is the code :/*
var objectPath= ‘Models/Lucy67percent/Lucy67percent.obj’;
var cameraPosition= [0, 5.537, 9.286]
var cameraXangle= -20;
var objectScale= 0.007;
var rotationSpeed= 0.5;
// Import Three JS.
import * as THREE from ‘three’;
import { OBJLoader } from ‘three/addons/loaders/OBJLoader.js’;
// Add the stats module (mainly for FPS counter).
(function(){var script=document.createElement(‘script’);script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src=‘stats.js-master/build/stats.min.js’;document.head.appendChild(script);})()
// Create the scene.
const scene = new THREE.Scene();
// Create the camera.
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.05, 4000 );
// Creat a directional light (like a sun), and attach it to the camera.
const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
camera.add( directionalLight );
// Position and orientation of the camera.
camera.position.set(cameraPosition[0], cameraPosition[1], cameraPosition[2]); // valuea have been found using Godot.
var xAngleInRad= cameraXangle * (Math.PI / 180.0);
camera.rotation.set( xAngleInRad, 0, 0); // valuea have been found using Godot.
// Add the camera to the scene (because the camera has a light attached to it).
scene.add(camera)
// Create a rendedrer and attach it to the DOM.
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Defines variables for the grid of cubes
var RowColumnCount= 100;
var CubeList= ;
// instantiate a loader
const loader = new OBJLoader();
var importedObject
// load a resource
loader.load(
// resource URL
objectPath,
// called when resource is loaded
function ( object ) {
object.scale.set(objectScale, objectScale, objectScale)
importedObject= object;
scene.add( object );
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + ‘% loaded’ );
},
// called when loading has errors
function ( error ) {
console.log( ‘An error happened’ );
}
);
var clock = new THREE.Clock();
// animation function
function animate() {
requestAnimationFrame( animate );
// Rotate object by 0.01 on the y axis
if (importedObject)
{
var rotationSpeedRad= rotationSpeed * (Math.PI / 180.0);
importedObject.rotation.y += rotationSpeed * clock.getDelta();;
}
renderer.render( scene, camera );
}
animate();
The html is a sample loader with a link of the javascript page :
My first three.js app
body { margin: 0; }
As far as I remember, most of the assets used doesn’t have any problem, only a single mesh is loaded, we used some well known demonstrator such : Lucy, Suzanne, StanfordDragon, StanfordLucy, …
It seems that none have problems, it is more likely the size of the product that create a problem, but we don’t know exactly if something breaks somewhere,
On the console, with the try catch everything seems OK :
0.14204199816295085% loaded
RotatingObj.js:112 0.22427683920465924% loaded
(…)
RotatingObj.js:112 99.9975667067174% loaded
RotatingObj.js:112 100% loaded