Convertir votre modèle 3D en script JS

Aujourd’hui, je vous propose un exemple pour afficher votre objet CAO 3D sur une page web.
Oubliez des outils non open source tel Inka (qui ne fonctionne pas sous linux), c’est gratuit, et facilement reproductible.

Voici un bout de page html5 capable d’afficher une scène 3D Three.js avec un fichier object.js

<script type="text/javascript">
var renderer = new THREE.WebGLRenderer( { antialias: true } );
var scene = new THREE.Scene();
var mesh = null;
var camera = new THREE.PerspectiveCamera( 75, ($(window).width () - 45) / ($(window).height () - 25), 1, 1000 );
var canvasWidth = ($(window).width () - 45);
var canvasHeight = ($(window).height () - 25);
var lookAt = new THREE.Vector3( 0, 150, 0);
$('#scene').append (renderer.domElement);

function addLight (){
var dirLight = new THREE.DirectionalLight(0xffffff, 0.95);
dirLight.position.set(-3, 3, 7);
dirLight.position.normalize();
scene.add(dirLight);

var pointLight = new THREE.PointLight(0xFFFFFF, 5, 50);
pointLight.position.set(10, 20, -10);
scene.add(pointLight);
}

function setupCamera (){
camera.position.z = 60;
scene.add( camera );
}
function setGeometry ( geometry, geoColor ) {
var material = new THREE.MeshBasicMaterial( {
color: geoColor,
vertexColors : THREE.FaceColors,
});
mesh = new THREE.Mesh( geometry, material);

mesh.scale.z = 2;
mesh.scale.y = 1;
mesh.scale.x = 2;
scene.add(.mesh);
}

function ajustSizes (){
renderer.setSize (canvasWidth, canvasHeight);
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "object.js", function (geometry) { setGeometry (geometry, 0xA0A0B0);});
loadRestOfScene();
}

function loadRestOfScene (){
addLight ();
setupCamera ();
}

function animLoop (){
camera.position.y += .1;
lookAt.y = camera.position.y;
camera.lookAt(lookAt);
renderer.render(scene, camera);
requestAnimationFrame( function () {animLoop ();});
}
setTimeout (function (){animLoop ();}, 1000);
</script>
<canvas id="scene"></canvas>

Un exemple ? Allez voir mon cv animé, l’écran 9 montre des escaliers 3D.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*