ズッキーニのプログラミング実験場

プログラミング + アカデミック + 何か面白いこと。 記載されているものは基本的に私が所属する団体とは関係がありません。

   May 30

[Javascript][Three.js]マウス操作

by zuqqhi2 at 2013年5月30日
Pocket

前回の記事のindex.htmlに新規部分を追加した以下のmain.jsを読みこませる。

window.onload = function() {
        // Canvas size
        var width = 640;
        var height = 480;

        // Cube Size
        var geometry = new THREE.CubeGeometry(100, 100, 100);
        // Cube Material Info(not metal)
        var texture = new THREE.ImageUtils.loadTexture('./img/tex.jpg');
        var material = new THREE.MeshLambertMaterial({map: texture});
        // Create Cube
        var mesh = new THREE.Mesh(geometry, material);
        // Rotate Cube
        mesh.rotation = {x: 0.5, y: 0.5, z: 0.0};

        // Setting Camera
        var camera = new THREE.PerspectiveCamera(40, width / height, 1, 1000);
        // Camera Position
        camera.position.z = -400;
        // Camera Angle
        camera.lookAt(mesh.position);

        // Create Space
        var scene = new THREE.Scene();
        // Add cube to Space
        scene.add(mesh);

        // Create Light element
        var light    = new THREE.DirectionalLight(0xffffff, 1.5);
        // Light element position
        light.position = {x: 0, y: 0.2, z: -1};
        // Add light element to the space
        scene.add(light);

        // Create renderer
        var renderer = new THREE.WebGLRenderer();
        // Set canvas size
        renderer.setSize(width, height);

        // Set canvas to div element
        document.getElementById('canvas').appendChild(renderer.domElement);
 
        var mousedown = false;
        renderer.domElement.addEventListener('mousedown', function(e) {
                mousedown = true;
                prevPosition = {x: e.pageX, y: e.pageY};
        }, false);

        renderer.domElement.addEventListener('mousemove', function(e) {
                if (!mousedown) return;
                moveDistance = {x: prevPosition.x - e.pageX, y: prevPosition.y - e.pageY};
                mesh.rotation.x += moveDistance.y * 0.01;
                mesh.rotation.y -= moveDistance.x * 0.01;

                prevPosition = {x: e.pageX, y: e.pageY};
                render();
        }, false);

        renderer.domElement.addEventListener('mouseup', function(e) {
                mousedown = false;
        }, false);

        function render(){
                renderer.render(scene, camera);
        }
}

結果は次のようになる。ドラッグで立方体が回転する。
Three.js面白いな。何か作ってみよう。

Related Posts

  • 2013年5月29日 [Javascript]Three.jsを触る Three.jsでブラウザ上で3D空間の描画が簡単にできるみたいだ。 threejs.org 簡単に立方体を書いてみる。 以下、ここのまねをして書いてみる。 まずはダウンロード。 ここのbuildディレクトリの中にあるthree.min.jsを使う。 […]
  • 2014年11月9日 [jslint]jslintをコマンドから使ってコード品質チェック 概要 Javascriptは利用方法によるけど運用が難しい言語だと思ってる。 jslintを使用するとコードの品質(?)をチェックすることが出来る。 開発時にjslintが通るコードを書くようにすると、経験上いくらか運用がマシになる気がする。 web上でも使えるけど、コ […]
  • 2013年6月9日 [AR]NyARToolkitを使ってみる 概要 マーカーベースのARプログラムを作成するためのライブラリとしてARToolKitというものがあるが、 それのProcessing版であるNyARToolkitを使用して簡単なARプログラムを作成してみる。 実装 ここから ライブラリをダウンロードして中身を一 […]
  • 2015年1月12日 [Javascript][Three.js][3D]OBJ形式3Dモデルの表示とマウス操作 Target OBJ形式の3Dモデルの表示とそのマウス操作 Environment OSLinux 2.6.32-279.el6.x86_64 #1 SMP Fri Jun 22 12:19:21 UTC 2012 x86_64 x86_64 […]
  • 2015年3月3日 [Meteor.js][MongoDB][Javascript]別インストールの既存MongoDBを使う方法 Goal 既存のMongoDBをMeteor.jsで利用する。 Environment OSLinux version 3.2.0-64-generic (buildd@kissel) (gcc version 4.6.3 […]
  • 2013年6月10日 [AR][Processing]3Dモデルの描画 背景 昨日でマーカーに立方体を表示させることができたから、今日は3Dモデルを描画してみる。 実装 メタセコイア形式の3Dモデルをロード&描画するためにMQOViewerというライブラリを使う。 3Dモデルはここからダウンロードしてつかった。 ソースコードは […]
Pocket

You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.