load 3d model example using three js
Question
I have code which shows a button that says: "Import 3d model". There I wish to let the user select a 3ds/max/gsm 3d model to load and seen on the screen.
My problem is that i just don't know how to do that, can some one write a simple example of how to do that? i'm kind of stuck.. thanks for any help :)
<html>
<head>
<script src="js/three.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<link href="CSS/maincss.css" rel="stylesheet" />
<title>PREZI</title>
</head>
<body>
<center>
<div id="share-bottom">
<button type="button" class="photo-button"> Upload 3D Model</button>
<div id="upload-wrap">
<input id="upload-wrap-button" type="file" />
</div>
</div>
</center>
<script>
$('#share-bottom button').click(function () {
$('#upload-wrap-button').click();
});
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(document.body.clientWidth, document.body.clientHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColorHex(0xEEEEEE, 1.0);
renderer.clear();
renderer.shadowCameraFov = 50;
renderer.shadowMapWidth = 1024;;
renderer.shadowMapHeight = 1024;
var fov = 45; // camera field-of-view in degrees
var width = renderer.domElement.width;
var height = renderer.domElement.height;
var aspect = width / height; // view aspect ratio
var near = 1; // near clip plane
var far = 10000; // far clip plane
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = -400;
camera.position.x = 200;
camera.position.y = 350;
var scene = new THREE.Scene();
var cube = new THREE.Mesh(
new THREE.CubeGeometry(50, 50, 50),
new THREE.MeshLambertMaterial({ color: 0xff0000 })
);
scene.add(cube);
cube.castShadow = true;
cube.receiveShadow = true;
var plane = new THREE.Mesh(
new THREE.PlaneGeometry(400, 200, 10, 10),
new THREE.MeshLambertMaterial({ color: 0xffffff }));
plane.rotation.x = -Math.PI / 2;
plane.position.y = -25.1;
plane.receiveShadow = true;
scene.add(plane);
var light = new THREE.SpotLight();
light.castShadow = true;
light.position.set(170, 330, -160);
scene.add(light);
var litCube = new THREE.Mesh(
new THREE.CubeGeometry(50, 50, 50),
new THREE.MeshLambertMaterial({ color: 0xffffff }));
litCube.position.y = 50;
litCube.castShadow = true;
scene.add(litCube);
renderer.shadowMapEnabled = true;
renderer.render(scene, camera);
var paused = false;
var last = new Date().getTime();
var down = false;
var sx = 0, sy = 0;
window.onmousedown = function (ev) {
down = true; sx = ev.clientX; sy = ev.clientY;
};
window.onmouseup = function () { down = false; };
window.onmousemove = function (ev) {
if (down) {
var dx = ev.clientX - sx;
var dy = ev.clientY - sy;
camera.position.x += dx;
camera.position.y += dy;
sx += dx;
sy += dy;
}
}
function animate(t) {
if (!paused) {
last = t;
litCube.position.y = 60 - Math.sin(t / 900) * 25;
litCube.position.x = Math.cos(t / 600) * 85;
litCube.position.z = Math.sin(t / 600) * 85;
litCube.rotation.x = t / 500;
litCube.rotation.y = t / 800;
renderer.clear();
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
window.requestAnimationFrame(animate, renderer.domElement);
};
animate(new Date().getTime());
onmessage = function (ev) {
paused = (ev.data == 'pause');
};
</script>
</body>
</html>
2 answers
solution1
1 2013-12-19 00:01:37
As Inateno said, directly importing 3ds Max data will be challenging. If the general direction he suggests is an option for you, then there's a new project under way that might be of interest to you. Export path would be 3ds Max > OpenCOLLADA > gltF > Three.js
Here's the glTF loader for Three.js: https://github.com/KhronosGroup/glTF/tree/master/loaders/threejs
solution2
0 2013-12-07 14:51:07
You can't load direclty a 3DSMax model, you have to convert it to JSON, but I don't think you can did it directly on the client side. It's possible to send it to a server who did the conversion then client get back the model in JSON and you'll be able to read it (but you'll need a converter on the server).
I already looked for 3dsmax format to JSON directly but didn't found. Here are converters but they have to be installed in the soft, so you can export to fbx then JSON. https://github.com/mrdoob/three.js/tree/master/utils/converters
You can also look here an online converter. http://www.babylonjs.com/converter.html
And here there is some other converters but not sure it'll work with ThreeJS I don't try ^^ https://github.com/BabylonJS/Babylon.js/tree/master/Exporters
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.