As a designer and 3D artist who occasionally delves into coding, I have a question regarding loading a model from the three.js editor into an actual web page. Despite my limited programming knowledge, I've tried various methods to achieve this, including running a server and uploading the model to address browser security concerns.
Here are some of the approaches I've experimented with:
- I attempted to export models using Blender but faced issues displaying them in browsers.
- Using a collada file exported and imported into the three.js editor, I made adjustments to materials, added environment maps, and exported using different options - geometry, object, and scene.
- Even exporting primitives directly from the three.js editor did not yield favorable results.
- Experimenting with code snippets found online, I tried replacing existing models with my own, despite not being proficient in programming.
- A snippet of the code I used can be seen below.
- I explored both THREE.ObjectLoader() and THREE.JSONLoader().
Note: The following code is not authored by me.
<script>
var scene, camera, renderer;
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var SPEED = 0.01;
function init() {
scene = new THREE.Scene();
initMesh();
initCamera();
initLights();
initRenderer();
document.body.appendChild(renderer.domElement);
}
function initCamera() {
camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 10);
camera.position.set(0, 3.5, 5);
camera.lookAt(scene.position);
}
function initRenderer() {
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(WIDTH, HEIGHT);
}
function initLights() {
var light = new THREE.AmbientLight(0xffffff);
scene.add(light);
}
var mesh = null;
function initMesh() {
var loader = new THREE.JSONLoader();
loader.load('models/cubegeo.json', function(geometry, materials) {
mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.75;
mesh.translation = THREE.GeometryUtils.center(geometry);
scene.add(mesh);
});
}
function rotateMesh() {
if (!mesh) {
return;
}
mesh.rotation.x -= SPEED * 2;
mesh.rotation.y -= SPEED;
mesh.rotation.z -= SPEED * 3;
}
function render() {
requestAnimationFrame(render);
rotateMesh();
renderer.render(scene, camera);
}
init();
render();
</script>
The above text shows two versions of a cube downloaded from the three.js editor - one as GEOMETRY and the other as an Object.
{
"metadata": {
"version": 4.5,
"type": "BufferGeometry",
"generator": "BufferGeometry.toJSON"
},
"uuid": "8A2042A8-9DE2-42F5-A970-56E64669E516",
"type": "BoxBufferGeometry",
"width": 7,
"height": 7,
"depth": 7,
"widthSegments": 1,
"heightSegments": 1,
"depthSegments": 1
}
Utilizing THREE.JSONLoader() with the GEOMETRY cube resulted in an error:
Uncaught TypeError: Cannot read property 'length' of undefined
at parseModel (three.js:36833)
at JSONLoader.parse (three.js:37241)
at Object.onLoad (three.js:36764)
at XMLHttpRequest.<anonymous> (three.js:31352)
Applying ObjectLoader() with the Object cube triggered another error:
THREE.MeshFaceMaterial has been removed. Use an Array instead.
MeshFaceMaterial @ three.js:44719
three.js:46378 THREE.GeometryUtils: .center() has been moved to Geometry. Use geometry.center() instead.
center @ three.js:46378
three.js:46379 Uncaught TypeError: geometry.center is not a function
at Object.center (three.js:46379)
at (index):53
at ObjectLoader.parse (three.js:37362)
at Object.onLoad (three.js:37318)
at XMLHttpRequest.<anonymous> (three.js:31352)