html`<div id="WebGL-output"></div>
<div id="Stats-output"></div>`
{
document.getElementById("WebGL-output")
.appendChild(renderer.domElement);// divに追加
renderScene();
// イベントリスナー登録
window.addEventListener("resize", onResize, false);
renderer.render(scene, camera);
}
scene = new THREE.Scene();
camera = {
// innerWidthだと、表示幅の方が小さいのでダメ？ -> ただ、widthだと画面幅変えたときに再度呼ばれるので、面倒
const camera = new THREE.PerspectiveCamera(45, (window.innerWidth- 20)/height, 0.1, 1000);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
return camera;
}
width
window.innerWidth
renderer = {
const renderer = new THREE.WebGLRenderer();// SVG, Canvas, cssの描画もあるらしい（CPUの負荷はえぐいらしいが。。。）
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth -20, height)//window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
return renderer;
}
axes = {
const axes = new THREE.AxisHelper(20);
scene.add(axes);
return axes;
}
plane = {
const planeGeometry = new THREE.PlaneGeometry(60, 20);
//const planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
const planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
plane.receiveShadow = true;
scene.add(plane);
return plane;
}
cube = {
const cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
//const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
const cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
cube.castShadow = true;
scene.add(cube);
return cube;
}
sphere = {
const sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
//const sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
const sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
sphere.castShadow = true;
scene.add(sphere);
return sphere;
}
height = 600
spotLight = {
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-20, 30, -5);
spotLight.castShadow = true;
scene.add(spotLight);
return spotLight;
}
step_obj = ({step: 0});// mutableでも良いが、cellが発火するのであまりよろしくない気がする...
function renderScene(){
my_stats.update();//frame数の統計的表示
// 立方体回転
cube.rotation.x += controls.rotationSpeed;
cube.rotation.y += controls.rotationSpeed;
cube.rotation.z += controls.rotationSpeed;
// ボールの移動
step_obj.step += controls.bouncingSpeed;//外部変数に代入
sphere.position.x = 20 + (10 * (Math.cos(step_obj.step)));
sphere.position.y = 2 + (10 * Math.abs(Math.sin(step_obj.step)));
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
my_stats = initStats();// renderScene上でアップデートしていくための変数
function initStats(){
const _stats = new Stats();
_stats.setMode(0);
//stats.showPanel(0);//0が fps
_stats.domElement.style.position = "absolute";
_stats.domElement.style.left = "0px";
_stats.domElement.style.top = "0px";
document.getElementById("Stats-output")
.appendChild(_stats.domElement);
return _stats;
}
controls = new function(){// 昔のobject記入方法？？
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03;
}
gui = {
const gui = new datGUI.GUI();
// 各プロパティの範囲を指定する
gui.add(controls, "rotationSpeed", 0, 0.5);
gui.add(controls, "bouncingSpeed", 0, 0.5);
return gui;
}
function onResize(){
camera.aspect = (window.innerWidth - 20) / height;// innerHeightにするとひどい目に合うので注意
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth -20, height);
}
new Stats()//要素の確認
Stats = require("stats-js")//1秒ごとのフレーム数などを教えてくれるもの
datGUI = require("dat.gui")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
