html`
<div id="Stats-output" style="height: 0px;">
</div>
<div id="datGUI" style="height: 0px;"></div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>`
{
document.getElementById("WebGL-output")
.appendChild(renderer.domElement);
render();
}
document.getElementById("WebGL-output")
height = 600
scene ={
// Sceneは THREE.Object3Dを継承している
const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xffffff, 0.015, 100);// 0.015(nearプロパティ), 100(farプロパティ): かかり始める場所と、濃くなる速さを指定らしい
//scene.fog = new THREE.FogExp2(0xffffff, 0.015);//指数的にfogが強くなる
scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});//materialの強制(個別のmaterialが無視させる)
return scene;
}//
axis = {
const axis = new THREE.AxesHelper(20);
scene.add(axis);
return axis;
}
renderer = {
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth-20, height);
renderer.shadowMap.enabled = true;
return renderer;
}
camera = {
const camera = new THREE.PerspectiveCamera(45, (window.innerWidth-20)/height, 0.1, 1000);
camera.position.x = -30;
camera.position.y = 30;
camera.position.z = 50;
camera.lookAt(scene.position);
scene.add(camera);
return camera;
}
plane = {
const planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
const planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
plane.receiveShadow = true;
scene.add(plane);
return plane;
}
plane.material
ambientLight = {
const ambientLight = new THREE.AmbientLight(0x0c0c0c);
//ambientLight.castShadow = true;//しないらしい（無いのかも？？）
scene.add(ambientLight);
return ambientLight;
}
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})
function render(){// render = functionだと 再帰できないっぽい
stats.update();
// sceneの traverse: 子要素を引数とした関数を利用できる
scene.traverse(function (obj){
// planeは Mesh要素なので、別に検出させる
if(obj instanceof THREE.Mesh && obj !== plane){
obj.rotation.x += controls.rotationSpeed;
obj.rotation.y += controls.rotationSpeed;
obj.rotation.z += controls.rotationSpeed;
}
});
requestAnimationFrame(render);
renderer.render(scene, camera);
}
renderer.render(scene, camera)
stats = initStats()
function initStats(){
const stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.top = "0px";
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
gui = {
const gui = new datGUI.GUI();
gui.add(controls, "rotationSpeed", 0, 0.5);
gui.add(controls, "addCube");
gui.add(controls, "removeCube");
gui.add(controls, "outputObjects");
gui.add(controls, "numberOfObjects").listen();//listen(): ボタンではなく、動的に変換させる？
document.getElementById("datGUI").appendChild(gui.domElement);// 表示を上につける
return gui;
}
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.
