Hey there! I'm currently facing some challenges when it comes to importing models from Blender into three.js.
Currently, I am using the latest version of three.js (R71). I have successfully installed the three.js exporter in Blender and it works fine.
Below is the HTML code snippet:
<body>
<font size="+6"><b>TFG</b></font><br>
<a href="../index.html">Go back</a>
<hr>
<div id='container'></div>
<script src="libs/ThreeJSV71/build/three.min.js"></script>
<script src="libs/OrbitControls.js"></script>
<script src="libs/Coordinates.js"></script>
<script src="libs/dat.gui.min.js"></script>
<script src="libs/stats.min.js"></script>
<script src="libs/ColladaLoader.js"></script>
<script src="threejs/tfg2.js"></script>
<br>
</body>
The following file is tfg2.js where the model is loaded:
var width = window.innerWidth,
height = window.innerHeight,
clock = new THREE.Clock(),
scene,
camera,
renderer,
ambientLight,
directionalLight,
loader,
modelo = new THREE.Object3D();
init();
function init()
{
scene =new THREE.Scene();
camera = new THREE.PerspectiveCamera(40, width/height, 1000);
camera.position.set(0,1,5);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width,height);
renderer.setClearColor(new THREE.Color(0x0000AA));
document.getElementById('container').appendChild(renderer.domElement);
ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(0,1,0);
scene.add(directionalLight);
scene.add(new THREE.GridHelper(10,1));
loader = new THREE.JSONLoader();
loader.load('blender/json/camara.json', function(geometry,materials)
{
modelo = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
scene.add(modelo);
});
}
When attempting to view the results, nothing appears on the webpage and the JavaScript console doesn't display any errors. However, if I export the model in Collada format or another .js format that I have, the model is visible. But I specifically need to use JSON.
What could be going wrong?EDIT:
Added: modelo.position.set(0,0,0) inside the callback to ensure the model is at the origin point.