<h1>NRデジタルリーダーシップ1期生共有</h1>
<h2>
立体
</h2>
```
// サイズを指定
width = 300;
height = 200;
// シーンを作成
scene = new THREE.Scene();
// グループを作成
group = new THREE.Group();
scene.add(group);
// 図形を作成
for(i = 0; i < 100; i++){
geometry = new THREE.PlaneGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({color: 0x3333FF,wireframe:true});
box = new THREE.Mesh(geometry, material);
box.position.set(0,0,i);
group.add(box);
}
// ライトを作成
light = new THREE.DirectionalLight(0xFFFFFF, 1);
light.position.set( 10, 10, 20);
light.intensity = 2;
scene.add(light);
light = new THREE.DirectionalLight(0xFFFFFF, 1);
light.position.set( -10, -10, -20);
light.intensity = 1;
scene.add(light);
// カメラを作成
camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, +1000);
// レンダラーを作成
renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#cnv')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
// アニメーションの開始
tick();
// 毎フレーム時に実行されるループイベントです
function tick() {
group.rotation.x += 0.01;
group.rotation.y += 0.01;
renderer.render(scene, camera); // レンダリング
requestAnimationFrame(tick);
}
```
```
// サイズを指定
width = 300;
height = 200;
// シーンを作成
scene = new THREE.Scene();
// グループを作成
group = new THREE.Group();
scene.add(group);
/*
for(i = 0; i < 100; i++){
geometry = new THREE.PlaneGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({color: 0x3333FF,wireframe:true});
box = new THREE.Mesh(geometry, material);
box.position.set(0,0,i);
group.add(box);
}
*/
createBox(group, 0, 0);
createBox(group, 100, 100);
createBox(group, 200, 300);
createBox(group, 100, 500);
createBox(group, 000, 600);
createBox(group, -100, 100);
createBox(group, -200, 300);
createBox(group, -100, 500);
createBox(group, 000, 600);
function createBox(group, x, y){
for(let i = 0; i < 100; i++){
geometry = new THREE.PlaneGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({color: 0x3333FF,wireframe:true});
box = new THREE.Mesh(geometry, material);
box.position.set(x,y,i);
group.add(box);
}
}
// ライトを作成
light = new THREE.DirectionalLight(0xFFFFFF, 1);
light.position.set( 10, 10, 20);
light.intensity = 2;
scene.add(light);
light = new THREE.DirectionalLight(0xFFFFFF, 1);
light.position.set( -10, -10, -20);
light.intensity = 1;
scene.add(light);
// カメラを作成
camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, +2000);
// レンダラーを作成
renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#cnv')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
// アニメーションの開始
tick();
// 毎フレーム時に実行されるループイベントです
function tick() {
group.rotation.x += 0.01;
group.rotation.y += 0.01;
renderer.render(scene, camera); // レンダリング
requestAnimationFrame(tick);
}
```
<h2>
３回目
</h2>
```
select
sp.speech_date
,st.name
,sp.title
from
speech as sp
inner join student as st
on sp.speaker_id = st.id
```
```
for(i = 0; i < 100; i++){
geometry = new THREE.PlaneGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({color: 0x3333FF,wireframe:true});
box = new THREE.Mesh(geometry, material);
box.position.set(0,0,i);
group.add(box);
}
```
```
// 団子 1 個目を作成
geometry = new THREE.SphereGeometry( 100,20,20 );
material = new THREE.MeshPhongMaterial({color: 0xFFFFFF});
shape = new THREE.Mesh( geometry, material );
shape.position.set(0,0,0);
group.add(shape);
// 団子 2 個目を作成
geometry = new THREE.SphereGeometry( 100,20,20 );
material = new THREE.MeshPhongMaterial({color: 0xFFFFFF});
shape = new THREE.Mesh( geometry, material );
shape.position.set(200,0,0);
group.add(shape);
// 団子 3 個目を作成
geometry = new THREE.SphereGeometry( 100,20,20 );
material = new THREE.MeshPhongMaterial({color: 0xFFFFFF});
shape = new THREE.Mesh( geometry, material );
shape.position.set(400,0,0);
group.add(shape);
// 棒を作成
geometry = new THREE.CylinderGeometry( 10, 10, 500, 30);
material = new THREE.MeshStandardMaterial({color: 0xFF6633});
shape = new THREE.Mesh( geometry, material );
shape.position.set(500,0,0);
shape.rotation.z = Math.PI/2;
group.add(shape);
```
<h2>
２回目
</h2>
```
material = new THREE.MeshBasicMaterial( {map: texture,side: THREE.DoubleSide} );
```
```
loader = new THREE.TextureLoader();
texture = loader.load('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/crate.gif');
```
```
// サイズを指定
width = 300;
height = 200;
// シーンを作成
scene = new THREE.Scene();
// グループを作成
group = new THREE.Group();
scene.add(group);
// 図形を作成
geometry = new THREE.PlaneGeometry( 200, 200, 200 ); //平面
//geometry = new THREE.RingGeometry( 150, 120, 10 ); //輪っか
//geometry = new THREE.ConeGeometry(150,200,10); //コーン
//geometry = new THREE.BoxGeometry(150,200,100); //立方体
//geometry = new THREE.CylinderGeometry( 150, 150, 120, 30); //円柱
//geometry = new THREE.SphereGeometry( 150,20,20 ); //球
//ometry = new THREE.TorusKnotGeometry(150,30,100,100);
material = new THREE.MeshBasicMaterial({color: 0x3333FF,wireframe:true});
//terial = new THREE.MeshStandardMaterial({color: 0x3333FF,wireframe: true});
//material = new THREE.MeshNormalMaterial({color: 0x3333FF,wireframe: true});
//material = new THREE.MeshPhongMaterial({color: 0x3333FF});
//material = new THREE.MeshToonMaterial({color: 0x3333FF});
box = new THREE.Mesh( geometry, material );
// 図形をグループに追加
group.add(box);
// ライトを作成
light = new THREE.DirectionalLight(0xFFFFFF, 1);
light.position.set( 10, 10, 20);
light.intensity = 2;
scene.add(light);
light = new THREE.DirectionalLight(0xFFFFFF, 1);
light.position.set( -10, -10, -20);
light.intensity = 1;
scene.add(light);
// カメラを作成
camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, +1000);
// レンダラーを作成
renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#cnv')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
// アニメーションの開始
tick();
// 毎フレーム時に実行されるループイベントです
function tick() {
group.rotation.x += 0.01;
group.rotation.y += 0.01;
renderer.render(scene, camera); // レンダリング
requestAnimationFrame(tick);
}
```
```
<canvas id="cnv">
</canvas>
```
<p>
今までの流れ<br>
点⇒線⇒面<b>⇒立体</b>
</p>
```
```
</h2>
<h2>
初回分
</h2>
```
<p>
こんにちは
</p>
<input type="button" id="btn-exec" value="実行">
```
```
#btn-exec{
background-color:red;
}
```
```
<p>
こんにちは
</p>
<input type="button" id="btn-exec" value="実行" onclick="exec()">
```
```
#btn-exec{
background-color:red;
}
```
```
function exec(){
alert("さようなら");
}
```
```
<canvas id="cnv">
</canvas>
```
```
#cnv{
background-color:#ddd;
}
```
```
canvas = document.querySelector("#cnv");
context = canvas.getContext("2d");
context.fillRect(20,10,10,30);
```
```
canvas = document.querySelector("#cnv");
context = canvas.getContext("2d");
tenWoKaku(20,10);
function tenWoKaku(x, y){
context.fillRect(x, y, 1, 1);
}
```
```
canvas = document.querySelector("#cnv");
context = canvas.getContext("2d");
for(i = 20; i < 30; i++){
tenWoKaku(i,10);
}
function tenWoKaku(x, y){
context.fillRect(x, y, 1, 1);
}
```
```
canvas = document.querySelector("#cnv");
context = canvas.getContext("2d");
yokosenWoKaku(10,20,50);
yokosenWoKaku(20,50,100);
function yokosenWoKaku(x, y, len){
for(let i = x; i < x + len; i++){
tenWoKaku(i,y);
}
}
function tenWoKaku(x, y){
context.fillRect(x, y, 1, 1);
}
```
```
canvas = document.querySelector("#cnv");
context = canvas.getContext("2d");
tatesenWoKaku(10,20,100);
yokosenWoKaku(10,20,100);
function tatesenWoKaku(x, y, len){
for(let i = y; i < y + len; i++){
tenWoKaku(x,i);
}
}
function yokosenWoKaku(x, y, len){
for(let i = x; i < x + len; i++){
tenWoKaku(i,y);
}
}
function tenWoKaku(x, y){
context.fillRect(x, y, 1, 1);
}
```
```
canvas = document.querySelector("#cnv");
context = canvas.getContext("2d");
for(let i = 20; i < 100; i++){
yokosenWoKaku(10,i,100);
}
function tatesenWoKaku(x, y, len){
for(let i = y; i < y + len; i++){
tenWoKaku(x,i);
}
}
function yokosenWoKaku(x, y, len){
for(let i = x; i < x + len; i++){
tenWoKaku(i,y);
}
}
function tenWoKaku(x, y){
context.fillRect(x, y, 1, 1);
}
```
Google Drive
Gist
Clipboard
Sign in with Wallet
