Target
Showing OBJ format 3D Model and doing mouse operation.Environment
- OS
- Linux 2.6.32-279.el6.x86_64 #1 SMP Fri Jun 22 12:19:21 UTC 2012 x86_64 x86_64 x86_64 GNU/Linux
- three.js
- r69
Develop
Prepare libraries
I’ll use CDN for main part of three.js library, but other libraries which are OBJ Loader and Mouse Operation.Following commands is for downloading the libraries.
wget http://github.com/mrdoob/three.js/zipball/master unzip master cp mrdoob-three.js-ca14c79/examples/js/Detector.js . cp mrdoob-three.js-ca14c79/examples/js/controls/TrackballControls.js . cp mrdoob-three.js-ca14c79/examples/js/loaders/OBJLoader.js .
Source Code
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>3D model with three.js</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>
<script src="http://udam.asia/demo/model3d-threejs/TrackballControls.js"></script>
<script src="http://udam.asia/demo/model3d-threejs/OBJLoader.js"></script>
<script src="http://udam.asia/demo/model3d-threejs/Detector.js"></script>
<script>
var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, 640 / 480, 1, 2000);
camera.position.z = 5;
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 5;
controls.panSpeed = 2;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
var manager = new THREE.LoadingManager();
manager.onProgress = function (item, loaded, total) {
console.log(item, loaded, total);
};
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader(manager);
loader.load('http://udam.asia/demo/model3d-threejs/female_croupier_2013-03-26.png', function (image) {
texture.image = image;
texture.needsUpdate = true;
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.NearestMipMapLinearFilter;
});
loader = new THREE.OBJLoader(manager);
loader.load('http://udam.asia/demo/model3d-threejs/female_croupier_2013-03-26.obj', function (event) {
var object = event;
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material.map = texture;
}
});
object.scale = new THREE.Vector3(25, 25, 25);
scene.add(object);
});
renderer = new THREE.WebGLRenderer();
renderer.setSize(640, 480);
container.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
</body>
</html>
No comments yet.