WebGL
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*WebGL
https://developer.mozilla.org/ja/docs/Web/API/WebGL_API
~
WebGLとは、ブラウザ上で3次元CGを表示させるための標準仕様...
-WebGL 対応ブラウザがあれば動作します（特別なプラグインは...
現在のところ Google Chromeが確実に動きます。
-特別な開発環境は不要。テキストエディタのみで楽しめます。
--HTML5 の canvas タグを利用する
--javascript で記述できる
とりあえず、以下のページを見てその威力をお試し下さい(Chro...
http://webglsamples.org/aquarium/aquarium.html
水族館が表示されれば、あなたのPC環境、ブラウザはOKです。
左メニューのChangeViewの右に小さなボタンがあります。
それをクリックすると、各種パラメータを変更できるスライダ...
~
***LINK
-WebGL
--http://www.khronos.org/webgl/
--http://wgld.org/sitemap.html
-ThreeJS
--http://mrdoob.github.com/three.js/
--http://threejsdoc.appspot.com/doc/index.html
--[[HTML5による物理シミュレーション環境の構築>http://www....
--[[@ITの記事｜TreeJS>http://www.atmarkit.co.jp/fwcr/desi...
--[[小山田晃浩氏による解説動画>http://youtu.be/_F0AxtUiXS...
-ThreeJS Editor
--http://threejs.org/editor/
~
~
**ThreeJS ライブラリによるWebGLの活用
WebGLをそのまま記述するのは、かなり煩雑な作業になります。...
WebGLには、HTML5の canvas が使われているのですが、Three.j...
~
***ThreeJSのダウンロード
ThreeJSを使うには、ライブラリJSファイルをサイトのディレク...
htmlのヘッダー部分で
<script src="three.min.js"></script>
などとするのが一般的です。
ということで、以下のサイトから three.min.js をダウンロー...
-http://mrdoob.github.com/three.js/
~
&color(red){以下の事例中、テクスチュアを張ったものは、ロ...
&color(red){Google Chrome, Firefoxで動作確認しています。};
&color(red){IE（Internet Explorer）では動きません。};
~
~
***事例１ [[→DEMO とりあえず３D表示>https://design.kyus...
以下の、index.html sample.js そして、DLした three.min.j...
~
''index.html'' ｜ ほとんど何もありません。JSを読み込む...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="three.min.js"></sc...
<script type="text/javascript" src="sample.js"></script>
<title>ThreeJS | WebGL Sample</title>
</head>
<body>
</body>
</html>
~
''sample.js'' ｜ ThreeJSによる３D表示のおおまかな流れで...
// Global Value
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH/HEIGHT;
var NEAR = 1;
var FAR = 1000;
// MAIN
window.onload = function(){
// RENDER
var renderer = new THREE.WebGLRenderer( { antialias: tr...
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );
// SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE, ASPECT, NEAR, FAR );
camera.position.z = 50;
scene.add( camera );
// MAKE MESH & MATERIALS
var geometry = new THREE.CubeGeometry(10, 10, 10);
var material = new THREE.MeshLambertMaterial( { color: ...
var cube = new THREE.Mesh( geometry, material);
cube.rotation.y = 60;
scene.add( cube );
// LIGHT
var light = new THREE.DirectionalLight( 0xffffff, 1.0 );
light.position.set( 2, 5, 10 );
scene.add( light );
// RENDERING
renderer.render( scene, camera );
}
~
~
***事例2 [[→DEMO 回転するサンプル>https://design.kyusan...
以下の、index.html sample.js そして、DLした three.min.j...
~
''index.html'' ｜ 事例１と同じです（省略）
~
''sample.js'' ｜ アニメーションの基本形です。
// Global Value
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH/HEIGHT;
var NEAR = 1;
var FAR = 1000;
// MAIN
window.onload = function(){
// RENDER
var renderer = new THREE.WebGLRenderer( { antialias: tr...
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );
// SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE, ASPECT, NEAR, FAR );
camera.position.z = 50;
scene.add( camera );
// MAKE MESH & MATERIALS
var geometry = new THREE.CubeGeometry(10, 10, 10);
var material = new THREE.MeshLambertMaterial( { color: ...
var cube = new THREE.Mesh( geometry, material);
scene.add( cube );
// LIGHT
var light = new THREE.DirectionalLight( 0xffffff, 1.0 );
light.position.set( 2, 5, 10 );
scene.add( light );
// ANIMATION
function animate() {
requestAnimationFrame( animate );
cube.rotation.y += 0.02;
renderer.render( scene, camera );
}
animate();
}
~
~
***事例2の別解 [[→DEMO>https://design.kyusan-u.ac.jp/Sam...
以下の、index.html sample.js そして、DLした three.min.j...
~
''index.html'' ｜ 事例１と同じです（省略）
~
''sample.js''
// Global Value
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH/HEIGHT;
var NEAR = 1;
var FAR = 1000;
var renderer, scene, camera, cube, light;
// MAIN
window.onload = function(){
init();
animate();
}
// INITIALIZE
function init(){
// RENDER
renderer = new THREE.WebGLRenderer( { antialias: true }...
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );
// SCENE
scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE, ASPECT, NEAR, FAR );
camera.position.z = 50;
scene.add( camera );
// MAKE MESH & MATERIALS
var geometry = new THREE.CubeGeometry(10, 10, 10);
var material = new THREE.MeshLambertMaterial( { color: ...
cube = new THREE.Mesh( geometry, material);
scene.add( cube );
// LIGHT
light = new THREE.DirectionalLight( 0xffffff, 1.0 );
light.position.set( 2, 5, 10 );
scene.add( light );
}
// ANIMATION
function animate() {
requestAnimationFrame( animate );
cube.rotation.y += 0.02;
renderer.render( scene, camera );
}
~
~
***事例3 [[→DEMO テクスチュアを張ってみる>https://desig...
以下の、index.html sample.js そして、three.min.js と適...
テクスチュアデータは以下から・・・
http://www.tutorialsforblender3d.com/Textures/Textures_in...
~
''index.html'' ｜ 事例１と同じです（省略）
~
''sample.js'' ｜ MAKE MESH & MATERIALSのところが数行違...
// Global Value
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH/HEIGHT;
var NEAR = 1;
var FAR = 1000;
var renderer, scene, camera, cube, light;
// MAIN
window.onload = function(){
init();
animate();
}
// INITIALIZE
function init(){
// RENDER
renderer = new THREE.WebGLRenderer( { antialias: true }...
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );
// SCENE
scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE, ASPECT, NEAR, FAR );
camera.position.z = 50;
scene.add( camera );
// MAKE MESH & MATERIALS
var geometry = new THREE.CubeGeometry(10, 10, 10);
var texture = THREE.ImageUtils.loadTexture('texture.jpg...
var material = new THREE.MeshLambertMaterial({map: text...
cube = new THREE.Mesh( geometry, material);
scene.add( cube );
// LIGHT
light = new THREE.DirectionalLight( 0xffffff, 1.0 );
light.position.set( 2, 5, 10 );
scene.add( light );
}
// ANIMATION
function animate() {
requestAnimationFrame( animate );
cube.rotation.y += 0.02;
renderer.render( scene, camera );
}
~
~
***事例3-2 [[→DEMO 動画を張ってみる>https://design.kyus...
テクスチュアが''動画''（WebM）の場合。環境によっては動作...
~
''index.html'' ｜ video タグで動画を読み込んでおきます...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="three.min.js"></sc...
<script type="text/javascript" src="sample.js"></script>
<title>ThreeJS | WebGL Sample</title>
</head>
<body>
<video id="video" autoplay loop style="display:none">
<source src="sample.webm">
</video>
</body>
</html>
~
''sample.js'' ｜ video, texture は外部変数。 以下、事例...
途中略
:
// MAKE MESH & MATERIALS
var geometry = new THREE.CubeGeometry(10, 10, 10);
video = document.getElementById('video');
texture = new THREE.Texture( video );
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
material = new THREE.MeshLambertMaterial({map: texture});
cube = new THREE.Mesh( geometry, material);
scene.add( cube );
:
途中略
:
// ANIMATE
function animate() {
requestAnimationFrame( animate );
cube.rotation.y += 0.02;
if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
if ( texture ) texture.needsUpdate = true;
}
renderer.render( scene, camera );
}
~
~
***事例4 [[→DEMO マウスでグルグルする>https://design.ky...
以下の、index.html sample.js そして、DLした three.min.j...
同じフォルダに入れてお試し下さい。
~
''index.html'' ｜ 事例１と同じです（省略）
~
''sample.js'' ｜ Mouse Controlsの部分でイベントリスナー...
// Global Value
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH/HEIGHT;
var NEAR = 1;
var FAR = 1000;
var renderer, scene, camera, cube, light;
var mousedown = false;
// MAIN
window.onload = function(){
init();
animate();
}
// INITIALIZE
function init(){
// RENDER
renderer = new THREE.WebGLRenderer( { antialias: true }...
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );
// SCENE
scene = new THREE.Scene();
// CAMERA
camera = new THREE.PerspectiveCamera(
VIEW_ANGLE, ASPECT, NE...
camera.position.z = 50;
scene.add( camera );
// MAKE MESH & MATERIALS
var geometry = new THREE.CubeGeometry(10, 10, 10);
var material = new THREE.MeshLambertMaterial( { color: ...
cube = new THREE.Mesh( geometry, material);
scene.add( cube );
// LIGHT
light = new THREE.DirectionalLight( 0xffffff, 1.0 );
light.position.set( 2, 5, 10 );
scene.add( light );
// MOUSE CONTROLS
renderer.domElement.addEventListener('mousedown', funct...
mousedown = true;
position = {x: e.pageX, y: e.pageY};
}, false);
renderer.domElement.addEventListener('mouseup', functio...
mousedown = false;
}, false);
renderer.domElement.addEventListener('mouseout', functi...
mousedown = false;
}, false);
renderer.domElement.addEventListener('mousemove', funct...
if(!mousedown) return;
distance = {x: position.x - e.pageX, y: position.y - e...
cube.rotation.x -= distance.y * 0.01;
cube.rotation.y -= distance.x * 0.01;
position = {x: e.pageX, y: e.pageY};
animate();
}, false);
}
// ANIMATION
function animate(){
renderer.render(scene, camera);
}
~
~
***事例5 [[→DEMO マウスでグルグルする２>https://design....
トラックボール風の操作を可能にするライブラリ、TrackballCo...
examples/js/controls/TrackballControls.js
TrackballControls.js を同じフォルダに入れて、以下のように...
~
''index.html''
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="three.min.js"...
<script type="text/javascript" src="TrackballCont...
<script type="text/javascript" src="sample.js"></...
<title>ThreeJS | WebGL Sample</title>
</head>
<body style="overflow:hidden;"></body>
</html>
~
''sample.js''
// Global Value
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH/HEIGHT;
var NEAR = 1;
var FAR = 1000;
var container, renderer, scene, camera, controls, cube, ...
// MAIN
window.onload = function(){
init();
draw();
}
function init(){
// RENDER
renderer = new THREE.WebGLRenderer( { antialias: ...
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );
// SCENE
scene = new THREE.Scene();
// CAMERA
camera = new THREE.PerspectiveCamera( VIEW_ANGLE,...
camera.position.z = 50;
scene.add( camera );
// CONTROLS
controls = new THREE.TrackballControls( camera );
// MAKE MESH & MATERIALS
var geometry = new THREE.CubeGeometry(10, 10, 10);
var material = new THREE.MeshLambertMaterial( { c...
cube = new THREE.Mesh( geometry, material);
scene.add( cube );
// LIGHT
light = new THREE.DirectionalLight( 0xffffff, 1.0...
light.position.set( 2, 5, 10 );
scene.add( light );
}
function draw(){
requestAnimationFrame( draw);
renderer.render(scene, camera);
controls.update();
}
わずか１行、controlsにカメラを登録するだけで、以下の操作...
-左のドラッグでグルグル
-右のドラッグで平行移動
-マウスホイールで拡大・縮小
尚、この事例では、 requestAnimationFrameによって、常時ア...
~
~
終了行:
*WebGL
https://developer.mozilla.org/ja/docs/Web/API/WebGL_API
~
WebGLとは、ブラウザ上で3次元CGを表示させるための標準仕様...
-WebGL 対応ブラウザがあれば動作します（特別なプラグインは...
現在のところ Google Chromeが確実に動きます。
-特別な開発環境は不要。テキストエディタのみで楽しめます。
--HTML5 の canvas タグを利用する
--javascript で記述できる
とりあえず、以下のページを見てその威力をお試し下さい(Chro...
http://webglsamples.org/aquarium/aquarium.html
水族館が表示されれば、あなたのPC環境、ブラウザはOKです。
左メニューのChangeViewの右に小さなボタンがあります。
それをクリックすると、各種パラメータを変更できるスライダ...
~
***LINK
-WebGL
--http://www.khronos.org/webgl/
--http://wgld.org/sitemap.html
-ThreeJS
--http://mrdoob.github.com/three.js/
--http://threejsdoc.appspot.com/doc/index.html
--[[HTML5による物理シミュレーション環境の構築>http://www....
--[[@ITの記事｜TreeJS>http://www.atmarkit.co.jp/fwcr/desi...
--[[小山田晃浩氏による解説動画>http://youtu.be/_F0AxtUiXS...
-ThreeJS Editor
--http://threejs.org/editor/
~
~
**ThreeJS ライブラリによるWebGLの活用
WebGLをそのまま記述するのは、かなり煩雑な作業になります。...
WebGLには、HTML5の canvas が使われているのですが、Three.j...
~
***ThreeJSのダウンロード
ThreeJSを使うには、ライブラリJSファイルをサイトのディレク...
htmlのヘッダー部分で
<script src="three.min.js"></script>
などとするのが一般的です。
ということで、以下のサイトから three.min.js をダウンロー...
-http://mrdoob.github.com/three.js/
~
&color(red){以下の事例中、テクスチュアを張ったものは、ロ...
&color(red){Google Chrome, Firefoxで動作確認しています。};
&color(red){IE（Internet Explorer）では動きません。};
~
~
***事例１ [[→DEMO とりあえず３D表示>https://design.kyus...
以下の、index.html sample.js そして、DLした three.min.j...
~
''index.html'' ｜ ほとんど何もありません。JSを読み込む...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="three.min.js"></sc...
<script type="text/javascript" src="sample.js"></script>
<title>ThreeJS | WebGL Sample</title>
</head>
<body>
</body>
</html>
~
''sample.js'' ｜ ThreeJSによる３D表示のおおまかな流れで...
// Global Value
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH/HEIGHT;
var NEAR = 1;
var FAR = 1000;
// MAIN
window.onload = function(){
// RENDER
var renderer = new THREE.WebGLRenderer( { antialias: tr...
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );
// SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE, ASPECT, NEAR, FAR );
camera.position.z = 50;
scene.add( camera );
// MAKE MESH & MATERIALS
var geometry = new THREE.CubeGeometry(10, 10, 10);
var material = new THREE.MeshLambertMaterial( { color: ...
var cube = new THREE.Mesh( geometry, material);
cube.rotation.y = 60;
scene.add( cube );
// LIGHT
var light = new THREE.DirectionalLight( 0xffffff, 1.0 );
light.position.set( 2, 5, 10 );
scene.add( light );
// RENDERING
renderer.render( scene, camera );
}
~
~
***事例2 [[→DEMO 回転するサンプル>https://design.kyusan...
以下の、index.html sample.js そして、DLした three.min.j...
~
''index.html'' ｜ 事例１と同じです（省略）
~
''sample.js'' ｜ アニメーションの基本形です。
// Global Value
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH/HEIGHT;
var NEAR = 1;
var FAR = 1000;
// MAIN
window.onload = function(){
// RENDER
var renderer = new THREE.WebGLRenderer( { antialias: tr...
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );
// SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE, ASPECT, NEAR, FAR );
camera.position.z = 50;
scene.add( camera );
// MAKE MESH & MATERIALS
var geometry = new THREE.CubeGeometry(10, 10, 10);
var material = new THREE.MeshLambertMaterial( { color: ...
var cube = new THREE.Mesh( geometry, material);
scene.add( cube );
// LIGHT
var light = new THREE.DirectionalLight( 0xffffff, 1.0 );
light.position.set( 2, 5, 10 );
scene.add( light );
// ANIMATION
function animate() {
requestAnimationFrame( animate );
cube.rotation.y += 0.02;
renderer.render( scene, camera );
}
animate();
}
~
~
***事例2の別解 [[→DEMO>https://design.kyusan-u.ac.jp/Sam...
以下の、index.html sample.js そして、DLした three.min.j...
~
''index.html'' ｜ 事例１と同じです（省略）
~
''sample.js''
// Global Value
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH/HEIGHT;
var NEAR = 1;
var FAR = 1000;
var renderer, scene, camera, cube, light;
// MAIN
window.onload = function(){
init();
animate();
}
// INITIALIZE
function init(){
// RENDER
renderer = new THREE.WebGLRenderer( { antialias: true }...
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );
// SCENE
scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE, ASPECT, NEAR, FAR );
camera.position.z = 50;
scene.add( camera );
// MAKE MESH & MATERIALS
var geometry = new THREE.CubeGeometry(10, 10, 10);
var material = new THREE.MeshLambertMaterial( { color: ...
cube = new THREE.Mesh( geometry, material);
scene.add( cube );
// LIGHT
light = new THREE.DirectionalLight( 0xffffff, 1.0 );
light.position.set( 2, 5, 10 );
scene.add( light );
}
// ANIMATION
function animate() {
requestAnimationFrame( animate );
cube.rotation.y += 0.02;
renderer.render( scene, camera );
}
~
~
***事例3 [[→DEMO テクスチュアを張ってみる>https://desig...
以下の、index.html sample.js そして、three.min.js と適...
テクスチュアデータは以下から・・・
http://www.tutorialsforblender3d.com/Textures/Textures_in...
~
''index.html'' ｜ 事例１と同じです（省略）
~
''sample.js'' ｜ MAKE MESH & MATERIALSのところが数行違...
// Global Value
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH/HEIGHT;
var NEAR = 1;
var FAR = 1000;
var renderer, scene, camera, cube, light;
// MAIN
window.onload = function(){
init();
animate();
}
// INITIALIZE
function init(){
// RENDER
renderer = new THREE.WebGLRenderer( { antialias: true }...
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );
// SCENE
scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE, ASPECT, NEAR, FAR );
camera.position.z = 50;
scene.add( camera );
// MAKE MESH & MATERIALS
var geometry = new THREE.CubeGeometry(10, 10, 10);
var texture = THREE.ImageUtils.loadTexture('texture.jpg...
var material = new THREE.MeshLambertMaterial({map: text...
cube = new THREE.Mesh( geometry, material);
scene.add( cube );
// LIGHT
light = new THREE.DirectionalLight( 0xffffff, 1.0 );
light.position.set( 2, 5, 10 );
scene.add( light );
}
// ANIMATION
function animate() {
requestAnimationFrame( animate );
cube.rotation.y += 0.02;
renderer.render( scene, camera );
}
~
~
***事例3-2 [[→DEMO 動画を張ってみる>https://design.kyus...
テクスチュアが''動画''（WebM）の場合。環境によっては動作...
~
''index.html'' ｜ video タグで動画を読み込んでおきます...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="three.min.js"></sc...
<script type="text/javascript" src="sample.js"></script>
<title>ThreeJS | WebGL Sample</title>
</head>
<body>
<video id="video" autoplay loop style="display:none">
<source src="sample.webm">
</video>
</body>
</html>
~
''sample.js'' ｜ video, texture は外部変数。 以下、事例...
途中略
:
// MAKE MESH & MATERIALS
var geometry = new THREE.CubeGeometry(10, 10, 10);
video = document.getElementById('video');
texture = new THREE.Texture( video );
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
material = new THREE.MeshLambertMaterial({map: texture});
cube = new THREE.Mesh( geometry, material);
scene.add( cube );
:
途中略
:
// ANIMATE
function animate() {
requestAnimationFrame( animate );
cube.rotation.y += 0.02;
if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
if ( texture ) texture.needsUpdate = true;
}
renderer.render( scene, camera );
}
~
~
***事例4 [[→DEMO マウスでグルグルする>https://design.ky...
以下の、index.html sample.js そして、DLした three.min.j...
同じフォルダに入れてお試し下さい。
~
''index.html'' ｜ 事例１と同じです（省略）
~
''sample.js'' ｜ Mouse Controlsの部分でイベントリスナー...
// Global Value
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH/HEIGHT;
var NEAR = 1;
var FAR = 1000;
var renderer, scene, camera, cube, light;
var mousedown = false;
// MAIN
window.onload = function(){
init();
animate();
}
// INITIALIZE
function init(){
// RENDER
renderer = new THREE.WebGLRenderer( { antialias: true }...
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );
// SCENE
scene = new THREE.Scene();
// CAMERA
camera = new THREE.PerspectiveCamera(
VIEW_ANGLE, ASPECT, NE...
camera.position.z = 50;
scene.add( camera );
// MAKE MESH & MATERIALS
var geometry = new THREE.CubeGeometry(10, 10, 10);
var material = new THREE.MeshLambertMaterial( { color: ...
cube = new THREE.Mesh( geometry, material);
scene.add( cube );
// LIGHT
light = new THREE.DirectionalLight( 0xffffff, 1.0 );
light.position.set( 2, 5, 10 );
scene.add( light );
// MOUSE CONTROLS
renderer.domElement.addEventListener('mousedown', funct...
mousedown = true;
position = {x: e.pageX, y: e.pageY};
}, false);
renderer.domElement.addEventListener('mouseup', functio...
mousedown = false;
}, false);
renderer.domElement.addEventListener('mouseout', functi...
mousedown = false;
}, false);
renderer.domElement.addEventListener('mousemove', funct...
if(!mousedown) return;
distance = {x: position.x - e.pageX, y: position.y - e...
cube.rotation.x -= distance.y * 0.01;
cube.rotation.y -= distance.x * 0.01;
position = {x: e.pageX, y: e.pageY};
animate();
}, false);
}
// ANIMATION
function animate(){
renderer.render(scene, camera);
}
~
~
***事例5 [[→DEMO マウスでグルグルする２>https://design....
トラックボール風の操作を可能にするライブラリ、TrackballCo...
examples/js/controls/TrackballControls.js
TrackballControls.js を同じフォルダに入れて、以下のように...
~
''index.html''
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="three.min.js"...
<script type="text/javascript" src="TrackballCont...
<script type="text/javascript" src="sample.js"></...
<title>ThreeJS | WebGL Sample</title>
</head>
<body style="overflow:hidden;"></body>
</html>
~
''sample.js''
// Global Value
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH/HEIGHT;
var NEAR = 1;
var FAR = 1000;
var container, renderer, scene, camera, controls, cube, ...
// MAIN
window.onload = function(){
init();
draw();
}
function init(){
// RENDER
renderer = new THREE.WebGLRenderer( { antialias: ...
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );
// SCENE
scene = new THREE.Scene();
// CAMERA
camera = new THREE.PerspectiveCamera( VIEW_ANGLE,...
camera.position.z = 50;
scene.add( camera );
// CONTROLS
controls = new THREE.TrackballControls( camera );
// MAKE MESH & MATERIALS
var geometry = new THREE.CubeGeometry(10, 10, 10);
var material = new THREE.MeshLambertMaterial( { c...
cube = new THREE.Mesh( geometry, material);
scene.add( cube );
// LIGHT
light = new THREE.DirectionalLight( 0xffffff, 1.0...
light.position.set( 2, 5, 10 );
scene.add( light );
}
function draw(){
requestAnimationFrame( draw);
renderer.render(scene, camera);
controls.update();
}
わずか１行、controlsにカメラを登録するだけで、以下の操作...
-左のドラッグでグルグル
-右のドラッグで平行移動
-マウスホイールで拡大・縮小
尚、この事例では、 requestAnimationFrameによって、常時ア...
~
~
ページ名:
