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.