・./testpoly.htm
＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
＜title＞Polygon Test & NAS6LIB Help Document＜/title＞
＜meta http-equiv="X-UA-Compatible" content="IE=edge"＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8"＞
＜meta http-equiv="Content-Style-Type" content="text/css"＞
＜meta http-equiv="Content-Script-Type" content="text/javascript"＞
＜script language="JavaScript" type="text/javascript" src="./javascripts/x3dom/jquery-2.1.4.min.js" ＞＜/script＞
＜link rel='stylesheet' type='text/css' href='./javascripts/x3dom/x3dom.css'＞
＜script language="JavaScript" type='text/javascript' src='./javascripts/x3dom/x3dom.js'＞ ＜/script＞
＜link rel='stylesheet' type='text/css' href='./javascripts/x3dom/x3dom.css'＞
＜script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/timer.js"＞＜/script＞
＜script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/vector.js"＞＜/script＞
＜script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/matrix.js"＞＜/script＞
＜script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/quaternion.js"＞＜/script＞
＜script language="JavaScript" type="text/javascript" src="./javascripts/nas6/help.js"＞＜/script＞
＜script language="JavaScript" type="text/javascript" src="./javascripts/nas6/testpoly.js"＞＜/script＞
＜style＞
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
#x3dabs{
position: absolute;
float: left;
top: 76px;
left: 20px;
background:#8080b0;
border: 2px #000000 solid;
}
＜/style＞
＜/head＞
＜body text="black" link="#3333cc" vlink="#663399" alink="#cc0000" bgcolor="#faebf1" background="./img/kumausagineko.jpg"＞
＜b＞
＜h1＞Polygon Test & NAS6LIB Help Document＜/h1＞
＜div style = 'width:500px; height:250px; border: 0px; overflow:hidden;'＞
＜x3d id='x3dabs' width='500px' height='250px'＞
＜scene＞
＜Viewpoint id='viewp001' position='0 3 20' orientation='0 1 0 0' description='camera'＞＜/Viewpoint＞
＜directionalLight id="directional" direction='1 -1 1' on ="TRUE" intensity='1.0' shadowIntensity='0.0'＞＜/directionalLight＞
＜Transform center='0 0 0' translation='0 0 8' id='box0' DEF='box0'＞
＜Transform rotation='0 1 0 0' id='box1' DEF='box1'＞
＜shape＞
＜appearance＞
＜ImageTexture url="./img/koala.jpg"＞＜/ImageTexture＞
＜material diffuseColor='0.8 0.8 0.8'＞＜/material＞
＜/appearance＞
＜Box size = '5 5 5'＞＜/Box＞
＜/shape＞
＜/Transform＞
＜/Transform＞
＜/scene＞
＜/x3d＞
＜/div＞
// ……… Omitted …………
＜/b＞
＜/font＞
＜/body＞
＜/html＞
・./javascripts/nas6/testpoly.js
var TMan = new N6LTimerMan(); //timer manager
jQuery(document).ready(function(){
TMan.add();
TMan.timer[0].setalerm(function() { GLoop(0); }, 50); //set main loop
});
var bx = new N6LVector(new Array('1','0','0','8'), true); //pos Box
var bm = new N6LMatrix(4).UnitMat(); //mat Box
//main loop
function GLoop(id){
// ……… Omitted …………
var MatWK = new N6LMatrix(4).UnitMat();
var v = new N6LVector(4, false);
//unit vector//単位ベクトル
var ax = new N6LVector(4, true).UnitVec(1);
var ay = new N6LVector(4, true).UnitVec(2);
var az = new N6LVector(4, true).UnitVec(3);
//rot mov obj
MatWK = MatWK.RotAxis(ay, 1.0 * Math.PI / 180.0); //around y axis rotate 1 degree
bx = MatWK.Mul(bx); //pos Box multiply matrix
//unit vector
ax = ax.UnitVec(1);
ay = ay.UnitVec(2);
az = az.UnitVec(3);
//rot obj
MatWK = new N6LMatrix(bm); //mat Box
MatWK = MatWK.RotAxis(az, 3.0 * Math.PI / 180.0); //around z axis rotate 3 degree
MatWK = MatWK.RotAxis(ay, 2.0 * Math.PI / 180.0); //around y axis rotate 2 degree
bm = MatWK.RotAxis(ax, 1.0 * Math.PI / 180.0); //around x axis rotate 1 degree
v = bm.Vector(); //rot vector
var angle = bm.EulerAngle(3, 2, 1); //rotate order ZYX
// ↑ First half: ↓ Second half
//apply x3dom
var pos = bx.ToX3DOM(true);
var elm = document.getElementById('box0');
elm.setAttribute('translation', pos.toString());
var rot = v.ToX3DOM();
elm = document.getElementById('box1');
elm.setAttribute('rotation', rot.toString());
//for debug
elm = document.getElementById('debug');
elm.innerText =
'EulerAngle(rotate per degree z(3)_y(2)_x(1))\n' + angle.x[0] + ' ' + Math.floor(angle.x[1] * 180.0 / Math.PI) + ' ' + Math.floor(angle.x[2] * 180.0 / Math.PI) + ' ' + Math.floor(angle.x[3] * 180.0 / Math.PI);
TMan.timer[id].setalerm(function() { GLoop(id); }, 50); //reset main loop
}
// ... the rest is omitted ...
・How to write a header
＜head＞
＜title＞Please enter a title＜/title＞
＜meta http-equiv="X-UA-Compatible" content="IE=edge"＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8"＞
＜meta http-equiv="Content-Style-Type" content="text/css"＞
＜meta http-equiv="Content-Script-Type" content="text/javascript"＞
＜script language="JavaScript" type="text/javascript" src="./javascripts/x3dom/jquery-2.1.4.min.js" ＞＜/script＞
＜link rel='stylesheet' type='text/css' href='./javascripts/x3dom/x3dom.css'＞
＜script language="JavaScript" type='text/javascript' src='./javascripts/x3dom/x3dom.js'＞ ＜/script＞
＜link rel='stylesheet' type='text/css' href='./javascripts/x3dom/x3dom.css'＞
＜script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/timer.js"＞＜/script＞
＜script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/vector.js"＞＜/script＞
＜script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/matrix.js"＞＜/script＞
＜script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/quaternion.js"＞＜/script＞
＜script language="JavaScript" type="text/javascript" src="./javascripts/nas6/testpoly.js"＞＜/script＞
＜style＞
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
#x3dabs{
position: absolute;
float: left;
top: 76px;
left: 20px;
background:#8080b0;
border: 2px #000000 solid;
}
＜/style＞
＜/head＞
＜head＞ ＜title＞Please enter a title＜/title＞ ＜meta http-equiv="X-UA-Compatible" content="IE=edge"＞ ＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8"＞ ＜meta http-equiv="Content-Style-Type" content="text/css"＞ ＜meta http-equiv="Content-Script-Type" content="text/javascript"＞ ＜script language="JavaScript" type="text/javascript" src="./javascripts/x3dom/jquery-2.1.4.min.js" ＞＜/script＞ ＜link rel='stylesheet' type='text/css' href='./javascripts/x3dom/x3dom.css'＞ ＜script language="JavaScript" type='text/javascript' src='./javascripts/x3dom/x3dom.js'＞ ＜/script＞ ＜link rel='stylesheet' type='text/css' href='./javascripts/x3dom/x3dom.css'＞
＜script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/timer.js"＞＜/script＞ ＜script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/vector.js"＞＜/script＞ ＜script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/matrix.js"＞＜/script＞ ＜script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/quaternion.js"＞＜/script＞ ＜script language="JavaScript" type="text/javascript" src="./javascripts/nas6/testpoly.js"＞＜/script＞
＜style＞
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
#x3dabs{
position: absolute;
float: left;
top: 76px;
left: 20px;
background:#8080b0;
border: 2px #000000 solid;
}
＜/style＞
＜/head＞
・How to write objects
＜div style = 'width:500px; height:250px; border: 0px; overflow:hidden;'＞
＜x3d id='x3dabs' width='500px' height='250px'＞
＜scene＞
＜Viewpoint id='viewp001' position='0 3 20' orientation='0 1 0 0' description='camera'＞＜/Viewpoint＞
＜directionalLight id="directional" direction='1 -1 1' on ="TRUE" intensity='1.0' shadowIntensity='0.0'＞＜/directionalLight＞
＜Transform center='0 0 0' translation='0 0 8' id='box0' DEF='box0'＞
＜Transform rotation='0 1 0 0' id='box1' DEF='box1'＞
＜shape＞
＜appearance＞
＜ImageTexture url="./img/koala.jpg"＞＜/ImageTexture＞
＜material diffuseColor='0.8 0.8 0.8'＞＜/material＞
＜/appearance＞
＜Box size = '5 5 5'＞＜/Box＞
＜/shape＞
＜/Transform＞
＜/Transform＞
＜/scene＞
＜/x3d＞
＜/div＞
・Register the main loop
var TMan = new N6LTimerMan(); //timer manager
jQuery(document).ready(function(){
TMan.add();
TMan.timer[0].setalerm(function() { GLoop(0); }, 50); //set main loop
});
・Implement the main loop
var bx = new N6LVector(new Array('1','0','0','8'), true); //pos Box
var bm = new N6LMatrix(4).UnitMat(); //mat Box
//main loop
function GLoop(id){
// ……… Omitted …………
var MatWK = new N6LMatrix(4).UnitMat();
var v = new N6LVector(4, false);
//unit vector
var ax = new N6LVector(4, true).UnitVec(1);
var ay = new N6LVector(4, true).UnitVec(2);
var az = new N6LVector(4, true).UnitVec(3);
//rot mov obj
MatWK = MatWK.RotAxis(ay, 1.0 * Math.PI / 180.0); //around y axis rotate 1 degree
bx = MatWK.Mul(bx); //pos Box multiply matrix
//unit vector
ax = ax.UnitVec(1);
ay = ay.UnitVec(2);
az = az.UnitVec(3);
//rot obj
MatWK = new N6LMatrix(bm); //mat Box
MatWK = MatWK.RotAxis(az, 3.0 * Math.PI / 180.0); //around z axis rotate 3 degree
MatWK = MatWK.RotAxis(ay, 2.0 * Math.PI / 180.0); //around y axis rotate 2 degree
bm = MatWK.RotAxis(ax, 1.0 * Math.PI / 180.0); //around x axis rotate 1 degree
v = bm.Vector(); //rot vector
var angle = bm.EulerAngle(3, 2, 1); //rotate order ZYX
// ↑ First half: ↓ Second half
//apply x3dom
var pos = bx.ToX3DOM(true);
var elm = document.getElementById('box0');
elm.setAttribute('translation', pos.toString());
var rot = v.ToX3DOM();
elm = document.getElementById('box1');
elm.setAttribute('rotation', rot.toString());
//for debug
elm = document.getElementById('debug');
elm.innerText =
'EulerAngle(rotate per degree z(3)_y(2)_x(1))\n' + angle.x[0] + ' ' + Math.floor(angle.x[1] * 180.0 / Math.PI) + ' ' + Math.floor(angle.x[2] * 180.0 / Math.PI) + ' ' + Math.floor(angle.x[3] * 180.0 / Math.PI);
TMan.timer[id].setalerm(function() { GLoop(id); }, 50); //reset main loop
}
・./test3js.htm
＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
＜title＞THREEJSTEST＜/title＞
＜meta charset="UTF-8" /＞
＜script src="./javascripts/nas6lib/timer.js"＞＜/script＞
＜script src="./javascripts/threejs/three.js"＞＜/script＞
＜script＞
window.addEventListener("DOMContentLoaded", init);
var TMan = new N6LTimerMan(); //TimerManager
function init() {
const width = 500;
const height = 250;
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector("#cnv0")
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
45,
width / height,
1,
10000
);
camera.position.set(0, 0, 20);
// create box
const geometry = new THREE.BoxGeometry(5, 5, 5);
const loader = new THREE.TextureLoader();
const texture = loader.load('./img/koala.jpg');
const textureF = loader.load('./img/koalaF.jpg');
// Add texture to material
const materials = [
new THREE.MeshStandardMaterial({map: textureF}),
new THREE.MeshStandardMaterial({map: texture}),
new THREE.MeshStandardMaterial({map: texture}),
new THREE.MeshStandardMaterial({map: texture}),
new THREE.MeshStandardMaterial({map: texture}),
new THREE.MeshStandardMaterial({map: texture})
];
// create mesh
const box = new THREE.Mesh(geometry, materials);
box.position.set(0, 0, 8);
scene.add(box);
// DirectionalLight
const light = new THREE.DirectionalLight(0xffffff);
light.intensity = 2; // light.intensity twice
light.position.set(1, 1, 1);
// add scene
scene.add(light);
TMan.add();
TMan.timer[0].setalerm(function() { Loop(0); }, 50); //set main loop
// main loop
function Loop(id) {
box.rotation.x += 1.0 * Math.PI / 180.0;//Rotate 1 degree around the x axis
box.rotation.y += 2.0 * Math.PI / 180.0;//Rotate 2 degree around the y axis
box.rotation.z += 3.0 * Math.PI / 180.0;//Rotate 3 degree around the z axis
// rendering
renderer.render(scene, camera);
TMan.timer[id].setalerm(function() { Loop(id); }, 50); //set main loop
}
＜!--
/*
// First run
Loop();
// main loop
function Loop() {
requestAnimationFrame(Loop);
box.rotation.x += 1.0 * Math.PI / 180.0;//Rotate 1 degree around the x axis
box.rotation.y += 2.0 * Math.PI / 180.0;//Rotate 2 degree around the y axis
box.rotation.z += 3.0 * Math.PI / 180.0;//Rotate 3 degree around the z axis
renderer.render(scene, camera);
}
*/
//--＞
}
＜/script＞
＜style＞
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
#cnv0{
position: absolute;
float: left;
top: 640px;
left: 20px;
background:#8080b0;
border: 2px #000000 solid;
}
＜/style＞
＜/head＞
＜body text="black" link="#3333cc" vlink="#663399" alink="#cc0000" bgcolor="#faebf1" background="./img/kumausagineko.jpg"＞
＜font size="3"＞
＜br＞
＜br＞
＜b＞
＜h1＞THREEJSTEST＜/h1＞
＜br＞
＜div style = 'width:500px; height:250px; border: 0px; overflow:hidden;'＞
＜canvas id="cnv0" name="cnv0" width="500" height="250"＞＜/canvas＞
＜/div＞
＜br＞
＜br＞
＜br＞
＜/b＞
＜/font＞
＜br＞
＜br＞
＜hr＞
＜br＞
＜br＞
＜a href="./index.htm"＞back＜/a＞＜br＞
＜br＞
＜br＞
＜/body＞
＜/html＞
・How to write the header
＜!DOCTYPE html＞ ＜html lang="ja"＞ ＜head＞ ＜title＞Please enter a title＜/title＞ ＜meta charset="UTF-8" /＞ // ………… Omitted ……… ＜/head＞
・Registering components
＜script src="./javascripts/nas6lib/timer.js"＞＜/script＞ ＜script src="./javascripts/threejs/three.js"＞＜/script＞
・Stylesheet
＜style＞
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
#cnv0{
position: absolute;
float: left;
top: 640px;
left: 20px;
background:#8080b0;
border: 2px #000000 solid;
}
＜/style＞
・Target Canvas
＜div style = 'width:500px; height:250px; border: 0px; overflow:hidden;'＞ ＜canvas id="cnv0" name="cnv0" width="500" height="250"＞＜/canvas＞ ＜/div＞
・Script section
＜script＞
window.addEventListener("DOMContentLoaded", init);
var TMan = new N6LTimerMan(); //Timer manager
function init() {
const width = 500;
const height = 250;
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector("#cnv0")
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
45,
width / height,
1,
10000
);
camera.position.set(0, 0, 20);
// create box
const geometry = new THREE.BoxGeometry(5, 5, 5);
const loader = new THREE.TextureLoader();
const texture = loader.load('./img/koala.jpg');
const textureF = loader.load('./img/koalaF.jpg');
// Add texture to material
const materials = [
new THREE.MeshStandardMaterial({map: textureF}),
new THREE.MeshStandardMaterial({map: texture}),
new THREE.MeshStandardMaterial({map: texture}),
new THREE.MeshStandardMaterial({map: texture}),
new THREE.MeshStandardMaterial({map: texture}),
new THREE.MeshStandardMaterial({map: texture})
];
// create mesh
const box = new THREE.Mesh(geometry, materials);
box.position.set(0, 0, 8);
scene.add(box);
// DirectionalLight
const light = new THREE.DirectionalLight(0xffffff);
light.intensity = 2; // Double the light intensity
light.position.set(1, 1, 1);
// add scene
scene.add(light);
TMan.add();
TMan.timer[0].setalerm(function() { Loop(0); }, 50); //set main loop
//main loop
function Loop(id) {
box.rotation.x += 1.0 * Math.PI / 180.0;//Rotate 1 degree around the x axis
box.rotation.y += 2.0 * Math.PI / 180.0;//Rotate 2 degree around the y axis
box.rotation.z += 3.0 * Math.PI / 180.0;//Rotate 3 degree around the z axis
// rendering
renderer.render(scene, camera);
TMan.timer[id].setalerm(function() { Loop(id); }, 50); //set main loop
}
＜!--
/*
// first run
Loop();
function Loop() {
requestAnimationFrame(Loop);
box.rotation.x += 1.0 * Math.PI / 180.0;//Rotate 1 degree around the x axis
box.rotation.y += 2.0 * Math.PI / 180.0;//Rotate 2 degree around the y axis
box.rotation.z += 3.0 * Math.PI / 180.0;//Rotate 3 degree around the z axis
renderer.render(scene, camera);
}
*/
//--＞
}
＜/script＞
・./mttest.htm (script part)
window.addEventListener("DOMContentLoaded", init);
var TMan = new N6LTimerMan(); //timer manager
var pos = [ new N6LVector(4, true), new N6LVector(4, true), new N6LVector(4, true), new N6LVector(4, true)];
var th = [0, 0, 0, 0];
var dt = [50, 100, 150, 500];
var spd = 5.0;
var cnt = 0;
var div = 72;
var sph3;
function init() {
const width = 500;
const height = 250;
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector("#cnv0")
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
45,
width / height,
1,
10000
);
camera.position.set(0, 0, 20);
// create sphere
const sph0geometry = new THREE.SphereGeometry(1, 128, 128);
// Set the color of the material
const sph0material = new THREE.MeshBasicMaterial({ color: '#ff0000'});
// create mesh
const sph0 = new THREE.Mesh(sph0geometry, sph0material);
sph0.position.set(0, 6, 0);
pos[0] = new N6LVector([1, 0, 6, 0], true);
// create sphere
const sph1geometry = new THREE.SphereGeometry(1, 128, 128);
// Set the color of the material
const sph1material = new THREE.MeshBasicMaterial({ color: '#00ff00'});
// create mesh
const sph1 = new THREE.Mesh(sph1geometry, sph1material);
sph1.position.set(0, 2, 0);
pos[1] = new N6LVector([1, 0, 2, 0], true);
// create sphere
const sph2geometry = new THREE.SphereGeometry(1, 128, 128);
// Set the color of the material
const sph2material = new THREE.MeshBasicMaterial({ color: '#0000ff'});
// create mesh
const sph2 = new THREE.Mesh(sph2geometry, sph2material);
sph2.position.set(0, -2, 0);
pos[2] = new N6LVector([1, 0, -2, 0], true);
// create spher
const sph3geometry = new THREE.SphereGeometry(1, 128, 128);
// Set the color of the material
const sph3material = new THREE.MeshBasicMaterial({ color: '#808080'});
// create mesh
sph3 = new THREE.Mesh(sph3geometry, sph3material);
sph3.position.set(0, -6, 0);
pos[3] = new N6LVector([1, 0, -6, 0], true);
scene.add(sph0);
scene.add(sph1);
scene.add(sph2);
scene.add(sph3);
// DirectionalLight
const light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1);
// add scene
scene.add(light);
//add timer
TMan.add();
TMan.add();
TMan.add();
TMan.add();
TMan.add();
//first run
Loop0(0);
Loop1(1);
Loop2(2);
Loop3(3);
RDLoop(4);
//Implementing multiple main loops
function RDLoop(id) {
// rendering
renderer.render(scene, camera);
TMan.timer[id].setalerm(function() { RDLoop(id); }, 50);
}
function Loop0(id) {
th[id] += spd * Math.PI / 180.0;
sph0.position.set(5 * Math.sin(th[id]) + pos[id].x[1], 6, 0);
TMan.timer[id].setalerm(function() { Loop0(id); }, dt[id]);
}
function Loop1(id) {
th[id] += spd * Math.PI / 180.0;
sph1.position.set(5 * Math.sin(th[id]) + pos[id].x[1], 2, 0);
TMan.timer[id].setalerm(function() { Loop1(id); }, dt[id]);
}
function Loop2(id) {
th[id] += spd * Math.PI / 180.0;
sph2.position.set(5 * Math.sin(th[id]) + pos[id].x[1], -2, 0);
TMan.timer[id].setalerm(function() { Loop2(id); }, dt[id]);
}
function Loop3(id) {
th[id] += spd * Math.PI / 180.0;
var col1 = new N6LHsv(0, [255, 255, 0, 0]);
var col2 = new N6LHsv(0, [255, 255, 0, 0]);
var col = col1.HsvGrd(div, cnt, col2.ahsv, 1);
var str = col.Str();
cnt++;
sph3.material.color.set(str);
sph3.position.set(5 * Math.sin(th[id]) + pos[id].x[1], -6, 0);
var c = (Math.cos(th[id]) + 1.0) / 2.0;
dt[id] = 50 + c * 450; //Variable timer from 50 to 500 [ms]
TMan.timer[id].setalerm(function() { Loop3(id); }, dt[id]);
}
}
var TMan = new N6LTimerMan(); //timer manager var pos = [ new N6LVector(4, true), new N6LVector(4, true), new N6LVector(4, true)]; var th = [0, 0, 0]; var dt = [50, 100, 150, 500]; var spd = 5.0;
var cnt = 0; var div = 72; var sph3;
//add timer TMan.add(); TMan.add(); TMan.add(); TMan.add(); TMan.add();
//first run Loop0(0); Loop1(1); Loop2(2); Loop3(3); RDLoop(4);
function RDLoop(id) {
// rendering
renderer.render(scene, camera);
TMan.timer[id].setalerm(function() { RDLoop(id); }, 50);
}
function Loop0(id) {
th[id] += spd * Math.PI / 180.0;
sph0.position.set(5 * Math.sin(th[id]) + pos[id].x[1], 6, 0);
TMan.timer[id].setalerm(function() { Loop0(id); }, dt[id]);
}
function Loop3(id) {
th[id] += spd * Math.PI / 180.0;
var col1 = new N6LHsv(0, [255, 255, 0, 0]);
var col2 = new N6LHsv(0, [255, 255, 0, 0]);
var col = col1.HsvGrd(div, cnt, col2.ahsv, 1);
var str = col.Str();
cnt++;
sph3.material.color.set(str);
sph3.position.set(5 * Math.sin(th[id]) + pos[id].x[1], -6, 0);
var c = (Math.cos(th[id]) + 1.0) / 2.0;
dt[id] = 50 + c * 450; //50～500[ms]の可変タイマー
TMan.timer[id].setalerm(function() { Loop3(id); }, dt[id]);
}
window.addEventListener("DOMContentLoaded", init);
var TMan = new N6LTimerMan(); //timer manager
var boxies = [];
var renderer;
var camera;
var scene;
function init() {
const width = 500;
const height = 250;
renderer = new THREE.WebGLRenderer({
canvas: document.querySelector("#cnv0")
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
45,
width / height,
1,
10000
);
camera.position.set(0, 0, 20);
// create box
const geometry = new THREE.BoxGeometry(5, 5, 5);
const loader = new THREE.TextureLoader();
const texture = loader.load('./img/koala.jpg');
const textureF = loader.load('./img/koalaF.jpg');
// Set the texture on the material
const materials = [
new THREE.MeshStandardMaterial({map: textureF}),
new THREE.MeshStandardMaterial({map: texture}),
new THREE.MeshStandardMaterial({map: texture}),
new THREE.MeshStandardMaterial({map: texture}),
new THREE.MeshStandardMaterial({map: texture}),
new THREE.MeshStandardMaterial({map: texture})
];
for(i = 0; i ＜ 9; i++) {
var box = new THREE.Mesh( geometry, materials );
box.position.set(((i % 3) - 1) * 500, 0, Math.floor(i / 3) * 500);
scene.add( box );
boxies.push( box );
}
path = "./img/skybox";
format = '.jpg';
urls = [
path + 'px' + format, path + 'nx' + format,
path + 'py' + format, path + 'ny' + format,
path + 'pz' + format, path + 'nz' + format
];
tCube = new THREE.CubeTextureLoader().load( urls );
scene.background = tCube;
// DirectionalLight
const light = new THREE.DirectionalLight(0xffffff);
light.intensity = 2; //Double the light intensity
light.position.set(1, 1, 1);
// add scene
scene.add(light);
TMan.add();
TMan.timer[0].setalerm(function() { Loop(0); }, 50); //set main loop
//main loop
function Loop(id) {
var i;
for(i = 0; i ＜ 9; i++) {
boxies[i].rotation.x += 1.0 * Math.PI / 180.0;//Rotate 1 degree around the x axis
boxies[i].rotation.y += 2.0 * Math.PI / 180.0;//Rotate 2 degree around the y axis
boxies[i].rotation.z += 3.0 * Math.PI / 180.0;//Rotate 3 degree around the z axis
}
moveobj();
// rendering
renderer.render(scene, camera);
TMan.timer[id].setalerm(function() { Loop(id); }, 50); //set main loop
}
}
//Object position information
//Position 4*4 matrix (continuous parameter)
var A = false;
//Speed (continuation parameter)
var V = 0.1;
var a = 0;
var pyr = new N6LVector([1, 0, 0, 0], true);
var la = new N6LVector(4, true).UnitVec(3);
var up = new N6LVector(4, true).UnitVec(2);
//After initializing as above, keep calling the function below
//Acceleration a, (scalar quantity) (new parameter)
//Pitch yaw roll (1, θp, θy, θr) (new parameter)
function moveobj() {
if(!A) {
var Proj = camera.projectionMatrix;
A = new N6LVector([Proj.elements[15], Proj.elements[12], Proj.elements[13], Proj.elements[14]], true);
}
var B = la.Mul(a); //Camera translation row
var az = new N6LVector(la); //Camera Z-axis row
var ay = new N6LVector(up); //Camera Y-axis row
var ax = az.Cross(ay); //Camera X-axis row
//Camera world matrix
var matWK = new N6LMatrix([B,ax,ay,az]);
matWK = matWK.NormalMat();
//Yaw pitch roll rotation
matWK = matWK.RotAxis(az, pyr.x[3] * -1.0);
matWK = matWK.RotAxis(ay, pyr.x[2] * -1.0);
matWK = matWK.RotAxis(ax, pyr.x[1] * -1.0);
//update
B = new N6LVector(matWK.x[0]);
B = B.SetHomo(true);
la = new N6LVector(matWK.x[3]);
la = la.SetHomo(true);
up = new N6LVector(matWK.x[2]);
up = up.SetHomo(true);
//C = camera position + camera Z axis + updated camera Z axis
A = A.Add(B);
var C = A.Add(la);
//reset
pyr = new N6LVector([1, 0, 0, 0], true);
//set up
camera.position.set(A.x[1], A.x[2], A.x[3]);
camera.up.set(up.x[1], up.x[2], up.x[3]);
camera.lookAt(C.x[1], C.x[2], C.x[3]);
}
/*
function moveobj() {
if(!A) {
var Proj = camera.projectionMatrix;
A = new N6LVector([Proj.elements[15], Proj.elements[12], Proj.elements[13], Proj.elements[14]], true);
}
var B = la.Mul(a); //Camera translation row
var az = new N6LVector(la); //Camera Z-axis row
var ay = new N6LVector(up); //Camera Y-axis row
var ax = az.Cross(ay); //Camera X-axis row
B = B.RotAxis(az, pyr.x[3]);
B = B.RotAxis(ay, pyr.x[2]);
B = B.RotAxis(ax, pyr.x[1]);
la = la.RotAxis(az, pyr.x[3]);
la = la.RotAxis(ay, pyr.x[2]);
la = la.RotAxis(ax, pyr.x[1]);
up = up.RotAxis(az, pyr.x[3]);
up = up.RotAxis(ay, pyr.x[2]);
up = up.RotAxis(ax, pyr.x[1]);
A = A.Add(B);
var C = A.Add(la);
pyr = new N6LVector([1, 0, 0, 0], true);
camera.position.set(A.x[1], A.x[2], A.x[3]);
camera.up.set(up.x[1], up.x[2], up.x[3]); // set up
camera.lookAt(C.x[1], C.x[2], C.x[3]);
}
*/
//input keyboard
var KBLock7 = 0;
var KBLock9 = 0;
var KBIntvl = 5;
function chkKeyBoard(){
if(KeyB.keystate[KeyB.indexof(KeyB.ToReal('VK_N1'))]) {//N1Key
pyr.x[3] -= 1 * (Math.PI / 180);
}
if(KeyB.keystate[KeyB.indexof(KeyB.ToReal('VK_N2'))]) {//N2Key
pyr.x[1] += 1 * (Math.PI / 180);
}
if(KeyB.keystate[KeyB.indexof(KeyB.ToReal('VK_N3'))]) {//N3Key
pyr.x[3] += 1 * (Math.PI / 180);
}
if(KeyB.keystate[KeyB.indexof(KeyB.ToReal('VK_N4'))]) {//N4Key
pyr.x[2] += 1 * (Math.PI / 180);
}
if(KeyB.keystate[KeyB.indexof(KeyB.ToReal('VK_N5'))]) {//N5Key
a = 0;
}
if(KeyB.keystate[KeyB.indexof(KeyB.ToReal('VK_N6'))]) {//N6Key
pyr.x[2] -= 1 * (Math.PI / 180);
}
if(KeyB.keystate[KeyB.indexof(KeyB.ToReal('VK_N7'))]) {//N7Key
if(KBIntvl ＜ KBLock7) KBLock7 = 0;
if(KBLock7 == 0) {
a -= 0.5;
if(a ＜ -50) a = -50;
}
KBLock7++;
}
else KBLock7 = 0;
if(KeyB.keystate[KeyB.indexof(KeyB.ToReal('VK_N8'))]) {//N8Key
pyr.x[1] -= 1 * (Math.PI / 180);
}
if(KeyB.keystate[KeyB.indexof(KeyB.ToReal('VK_N9'))]) {//N9Key
if(KBIntvl ＜ KBLock9) KBLock9 = 0;
if(KBLock9 == 0) {
a += 0.5;
if(50 ＜ a) a = 50;
}
KBLock9++;
}
else KBLock9 = 0;
};
0xYX | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | A | B | C | D | E | F | |
0x0X | VK_$00 | VK_LBUTTON | VK_RBUTTON | VK_CANCEL : Break | VK_MBUTTON | VK_XBUTTON1 | VK_XBUTTON2 | VK_$07 |
VK_BACK : BackSpace | VK_TAB : Tab | VK_$0A | VK_$0B | VK_CLEAR | VK_RETURN : Enter | VK_$0E | VK_$0F | |
0x1X | VK_SHIFT : Shift | VK_CONTROL : Ctrl | VK_MENU : Alt | VK_PAUSE | VK_CAPITAL | VK_KANA | VK_$16 | VK_JUNJA |
VK_FINAL | VK_KANJI | VK_$1A | VK_ESCAPE : Esc | VK_CONVERT : 変換 | VK_NONCONVERT : 無変換 | VK_ACCEPT | VK_MODCHANGE | |
0x2X | VK_SPACE : Space | VK_PRIOR : PgUp | VK_NEXT : PgDn | VK_END : End | VK_HOME : Home | VK_LEFT : ← | VK_UP : ↑ | VK_RIGHT : → |
VK_DOWN : ↓ | VK_SELECT | VK_PRINT | VK_EXECUTE | VK_SNAPSHOT : Print Screen | VK_INSERT : Ins | VK_DELETE : Del | VK_HELP | |
0x3X | VK_0 | VK_1 | VK_2 | VK_3 | VK_4 | VK_5 | VK_6 | VK_7 |
VK_8 | VK_9 | VK_$3A | VK_$3B | VK_$3C | VK_$3D | VK_$3E | VK_$3F | |
0x4X | VK_$40 | VK_A | VK_B | VK_C | VK_D | VK_E | VK_F | VK_G |
VK_H | VK_I | VK_J | VK_K | VK_L | VK_M | VK_N | VK_O | |
0x5X | VK_P | VK_Q | VK_R | VK_S | VK_T | VK_U | VK_V | VK_W |
VK_X | VK_Y | VK_Z | VK_LWIN | VK_RWIN | VK_APPS | VK_$5E | VK_SLEEP | |
0x6X | VK_NUMPAD0 | VK_NUMPAD1 | VK_NUMPAD2 | VK_NUMPAD3 | VK_NUMPAD4 | VK_NUMPAD5 | VK_NUMPAD6 | VK_NUMPAD7 |
VK_NUMPAD8 | VK_NUMPAD9 | VK_MULTIPLY : numpad * | VK_ADD : numpad + | VK_SEPARATOR : numpad enter | VK_SUBTRACT : numpad - | VK_DECIMAL : numpad . | VK_DIVIDE : numpad / | |
0x7X | VK_F1 | VK_F2 | VK_F3 | VK_F4 | VK_F5 | VK_F6 | VK_F7 | VK_F8 |
VK_F9 | VK_F10 | VK_F11 | VK_F12 | VK_F13 | VK_F14 | VK_F15 | VK_F16 | |
0x8X | VK_F17 | VK_F18 | VK_F19 | VK_F20 | VK_F21 | VK_F22 | VK_F23 | VK_F24 |
VK_$88 | VK_$89 | VK_$8A | VK_$8B | VK_$8C | VK_$8D | VK_$8E | VK_$8F | |
0x9X | VK_NUMLOCK : Num Lock | VK_SCROLL : Scroll Lock | VK_$92 | VK_$93 | VK_$94 | VK_$95 | VK_$96 | VK_$97 |
VK_$98 | VK_$99 | VK_$9A | VK_$9B | VK_$9C | VK_$9D | VK_$9E | VK_$9F | |
0xAX | VK_LSHIFT | VK_RSHIFT | VK_LCONTROL | VK_RCONTROL | VK_LMENU | VK_RMENU | VK_BROWSER_BACK | VK_BROWSER_FORWARD |
VK_BROWSER_REFRESH | VK_BROWSER_STOP | VK_BROWSER_SERCH | VK_BROWSER_FAVORITES | VK_BROWSER_HOME | VK_VOLUME_MUTE | VK_VOLUME_DOWN | VK_VOLUME_UP | |
0xBX | VK_MEDIA_NEXT_TRACK | VK_MEDIA_PREV_TRACK | VK_MEDIA_STOP | VK_MEDIA_PLAY_PAUSE | VK_LAUNCH_MAIL | VK_LAUNCH_MEDIA_SELECT | VK_LAUNCH_APP1 | VK_LAUNCH_APP2 |
VK_$B8 | VK_$B9 | VK_OEM_1 : [:;] | VK_OEM_PLUS : [+] | VK_OEM_COMMA : [,] | VK_OEM_MINUS : [-] | VK_OEM_PERIOD : [.] | VK_OEM_2 : [/?] | |
0xCX | VK_OEM_3 : [`~] | VK_$C1 | VK_$C2 | VK_$C3 | VK_$C4 | VK_$C5 | VK_$C6 | VK_$C7 |
VK_$C8 | VK_$C9 | VK_$CA | VK_$CB | VK_$CC | VK_$CD | VK_$CE | VK_$CF | |
0xDX | VK_$D0 | VK_$D1 | VK_$D2 | VK_$D3 | VK_$D4 | VK_$D5 | VK_$D6 | VK_$D7 |
VK_$D8 | VK_$D9 | VK_$DA | VK_OEM_4 : [[{] | VK_OEM_5 : [\|] | VK_OEM_6 : []}] | VK_OEM_7 : ['] | VK_OEM_8 | |
0xEX | VK_$E0 | VK_OEM_AX | VK_OEM_102 : [\_] | VK_ICO_HELP | VK_ICO_00 | VK_PROCESSKEY | VK_ICO_CLEAR | VK_PACKET |
VK_$E8 | VK_OEM_RESET | VK_OEM_JUMP | VK_OEM_PA1 | VK_OEM_PA2 | VK_OEM_PA3 | VK_OEM_WSCTRL | VK_OEM_CUSEL | |
0xFX | VK_OEM_ATTN | VK_OEM_FINISH | VK_OEM_COPY | VK_OEM_AUTO | VK_OEM_ENLW | VK_OEM_BACKTAB | VK_ATTN | VK_CRSEL |
VK_EXSEL | VK_EREOF | VK_PLAY | VK_ZOOM | VK_NONAME | VK_PA1 | VK_OEM_CLEAR | VK_$FF |
VK_RETURN, VK_ENTER | VK_ESCAPE, VK_ESC | VK_OEM_MINUS, VK_- | VK_OEM_7, VK_^ | VK_NUMPAD1, VK_N1 | VK_NUMPAD2, VK_N2 | VK_NUMPAD3, VK_N3 | VK_NUMPAD4, VK_N4 |
VK_NUMPAD5, VK_N5 | VK_NUMPAD6, VK_N6 | VK_NUMPAD7, VK_N7 | VK_NUMPAD8, VK_N8 | VK_NUMPAD9, VK_N9 | VK_NUMPAD0, VK_N0 | VK_DECIMAL, VK_N. | VK_ADD, VK_N+ |
VK_SUBTRACT, VK_N- | VK_MULTIPLY, VK_N* | VK_DIVIDE, VK_N/ | VK_NUMLOCK, VK_NLK | VK_OEM_5, VK_| | VK_OEM_3, VK_@ | VK_OEM_4, VK_[ | VK_OEM_PLUS, VK_; |
VK_OEM_1, VK_: | VK_OEM_6, VK_] | VK_OEM_COMMA, VK_, | VK_OEM_PERIOD, VK_. | VK_OEM_2, VK_/ | VK_OEM_102, VK__ | VK_CONTROL, VK_CTRL | VK_MENU, VK_ALT |
VK_CONVERT, VK_CNVT | VK_NONCONVERT, VK_NONCNVT | VK_PRIOR, VK_PGUP | VK_NEXT, VK_PGDN | VK_LEFT, VK_← | VK_UP, VK_↑ | VK_RIGHT, VK_→ | VK_DOWN, VK_↓ |
VK_INSERT, VK_INS | VK_DELETE, VK_DEL | VK_SCROLL, VK_SLK | VK_SNAPSHOT, VK_PRTSCRN | VK_OEM_ATTN, VK_CLK | VK_OEM_COPY, VK_KANA | VK_OEM_ENLW, VK_ZEN | VK_OEM_AUTO, VK_ZEN2 |
VK_PAUSE, VK_BRK | VK_CLEAR, VK_CLS | －－－ | －－－ | －－－ | －－－ | －－－ | －－－ |