THREE = require("three/build/three.min.js")
height = 600;
md`
## 创建一条线`
line = {
const points = [];
points.push( new THREE.Vector3( - 10, 0, 0 ) );
points.push( new THREE.Vector3( 0, 10, 0 ) );
points.push( new THREE.Vector3( 10, 0, 0 ) );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
const line = new THREE.Line( geometry, material );
return line;
}
scene = {
const scene = new THREE.Scene();
scene.add(line);
return scene;
}
md`## 创建一个相机`
// 相机（透视摄像机）
camera = {
// fov（field of view）：指定垂直视角，即可视空间顶面和底面的夹角，必须大于 0
const fov = 45;
// aspect：指定近裁剪面的宽高比：宽度/高度
const aspect = width / height;
// near，far：指定近裁剪面和远裁剪面的位置
const near = 1;
const far = 500;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );
return camera;
}
{
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.render( scene, camera );
return renderer.domElement;
}
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.
