How to get custom models in Wordpress?

Hi there,

I have been trying to learn Three.JS and I have been able to get cubes and spheres to render fine. But I haven’t been able to load a custom model.

I am doing this on Wordpress and I am unsure how to load the models in.
Currently I have uploaded them via my host file manger to my uploads directory and then I am passing the full URL into the gltf loader function.
(I am also a 3D artist and designer more than I am a coder so excuse any confusion on my part)

<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/loaders/GLTFLoader.js"> 
</script>

<script>

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

//CAMERA
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;

//SCENE
scene = new THREE.Scene();

//LIGHTS
var light = new THREE.PointLight(0xFFFFFF, 1, 500);
light.position.set(10,0,25);
scene.add( light );

var light2 = new THREE.AmbientLight(0xB1B1B1, 0.2)
scene.add( light2 );

//MODEL

//var loader = new THREE.GLTFLoader();
 // loader.load( 'MYSITE/public_html/wp-content/uploads/2020/monkey.gltf', function ( gltf ) {
    
//     mesh = gltf.scene;
//     scene.add( mesh );
//     gltf.scene.scale.set(pscale, pscale, pscale);
// });

geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
material = new THREE.MeshLambertMaterial({color: 0xD3D3D3});
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

//RENDERLOOP
renderer = new THREE.WebGLRenderer( { antialias: true, alpha:true } );
renderer.setSize( window.innerWidth -25, window.innerHeight-50 );
document.body.appendChild( renderer.domElement );

 }

function animate() {

  requestAnimationFrame( animate );

mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;

renderer.render( scene, camera );

}
</script>

All the above works aside from the part where I have commented it out.

Any help would be much appreciated.

That’s the right thing to do - but if the model does not load, the url is probably not correct.

Try opening the URL you use (MYSITE/public_html/wp-content/uploads/2020/monkey.gltf) in the browser. Is the model downloaded or do you see an error?

(Also, pscale seems to not be defined, so you’re scaling the model to (undefined, undefined, undefined) which may also cause problems.)