Public
Edited
Feb 28, 2023
Paused
1 fork
1 star
{
//レンダラーを設置
const renderer = new THREE.WebGLRenderer({antialias: false});
renderer.setSize(width,height)
//シーン生成
const scene = new THREE.Scene()
//カメラ設定
const fov = 75;
const aspect = width/height; // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2;
//ライト設定
const ambientLight = new THREE.AmbientLight(new THREE.Color("white"), 1.0);
scene.add(ambientLight);
//オブジェクトを追加
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshPhongMaterial({color:0xff0000, wireframe:false})
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)
//アニメーションループ開始
const animate = (time)=>{
time *= 0.0001;
cube.rotation.x = time;
cube.rotation.y = time;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
//オービットコントローラーを追加
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, camera));
//GUIを設置
const wrapper = addGui(renderer.domElement, (event)=>{
console.log(event.property, event.value);
cube.position.x = event.value
});
return wrapper
}
function addGui(renderElm, callback) {
//render.domElemntを包む
const wrapper = document.createElement("div")
wrapper.append(renderElm)
//guiのスタイリング（セルの右上に固定）
const gui = new lil_gui.GUI( { autoPlace:false, container:wrapper } );
gui.domElement.style.position = "absolute"
gui.domElement.style.top = 0
gui.domElement.style.right = 0
//パラメータ初期設定
const obj = {
title:"lil-gui example",
x:0,
}
gui.add( obj, 'title');
gui.add( obj, 'x', -10, 10 );
//値変更時のコールバック
gui.onChange(callback);
return wrapper
}
lil_gui = import("lil-gui")
THREE = import("three@0.150.0")
OrbitControls = (await import("three@0.150.0/examples/jsm/controls/OrbitControls.js")).OrbitControls
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.
