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;
}
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.