Target
OBJ形式の3Dモデルの表示とそのマウス操作
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
Develop
ライブラリの準備
three.jsのメイン部分はCDNを使うとして、
OBJ形式のファイルを読むライブラリとマウス操作のライブラリはthree.jsの公式サイトから取ってくる。
以下のコマンドでそれらのライブラリを取得できる。
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>
Demo
Demo Page