Public
Edited
Jan 2
4 forks
2 stars
height = 650
// create renderer
renderer = {
const renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
});
renderer.setSize(width, height);
// renderer.setClearColor(0xb9d3ff, 1);
renderer.setPixelRatio(devicePixelRatio);
// initial controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, camera));
invalidation.then(() => (controls.dispose(), renderer.dispose()));
window.addEventListener('keyup', (e) => {
if (e.code === 'Space') {
controls.reset();
}
});
return renderer;
}
// create scene
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
// scene.add(cube);
// initial light
const point = new THREE.PointLight(0xffffff);
point.position.set(20, 20, 20);
scene.add(point);
const ambient = new THREE.AmbientLight(0xdddddd);
scene.add(ambient);
const axisHelper = new THREE.AxesHelper(300);
const gridHelper = new THREE.GridHelper(100, 30, 0x2c2c2c, 0x888888);
scene.add(axisHelper);
scene.add(gridHelper);
return scene;
}
// create camera
camera = {
const fov = 45;
const aspect = width / height;
const near = 1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(10, 5, 20);
camera.lookAt(scene.position);
return camera;
}
cube = {
const material = new THREE.MeshNormalMaterial();
const geometry = new THREE.BoxGeometry(3, 3, 3);
const cube = new THREE.Mesh(geometry, material);
cube.position.setX(-10)
return cube;
}
externalModel = {
const loader = new THREE.GLTFLoader();
const loadPromise = () => new Promise((resolve, reject) => {
loader.load(
// 'https://iaosee-resource.oss-cn-beijing.aliyuncs.com/model/Soldier.glb',
// 'https://iaosee-resource.oss-cn-beijing.aliyuncs.com/model/Parrot.glb',
'https://iaosee-resource.oss-cn-beijing.aliyuncs.com/model/RobotExpressive.glb',
// 'https://iaosee-resource.oss-cn-beijing.aliyuncs.com/model/DJI-Mavic-3-Pro.glb',
(model) => {
resolve(model);
},
undefined,
(error) => {
reject(error);
},
);
});
const result = await loadPromise().catch((e) => { console.warn(e) });
console.log(result);
return result;
}
{
scene.add(cube);
scene.add(externalModel.scene);
}
modelAnimation = {
// model animation
const clock = new THREE.Clock();
const mixer = new THREE.AnimationMixer(externalModel.scene);
const names = [];
const actionMap = new Map(); // save Action
for (let i = 0; i < externalModel.animations.length; i++) {
const clipItem = externalModel.animations[i];
names[i] = clipItem.name;
actionMap.set(clipItem.name, mixer.clipAction(clipItem));
}
return { actionMap, names, mixer, clock };
}
currentAnimate.addEventListener('change', (v) => {
console.log('Play: ', currentAnimate.value);
modelAnimation?.mixer?.stopAllAction();
const animateAction = modelAnimation?.actionMap.get(currentAnimate.value);
animateAction?.play();
});
{
while (true) {
cube.rotation.x += 0.01;
renderer.render(scene, camera);
modelAnimation.mixer?.update(modelAnimation.clock.getDelta());
yield null;
}
}
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.
