// https://github.com/mrdoob/three.js/blob/master/examples/svg_sandbox.html
svgRenderer = {
const renderer = new THREE.SVGRenderer();
renderer.setSize(width, height);
renderer.setQuality( 'high' );
const L_renderer = new THREE.SVGRenderer();
L_renderer.setSize(width, height);
L_renderer.setQuality( 'high' );
const R_renderer = new THREE.SVGRenderer();
R_renderer.setSize(width, height);
R_renderer.setQuality( 'high' );
//const effect = effectFn(renderer)
const effect = new THREE.AnaglyphEffect( renderer );
/*
const controls = new THREE.OrbitControls(camera, renderer.domElement);
invalidation.then(() => (controls.dispose(), renderer.dispose()));
controls.addEventListener('change', render);
*/
const _stereo = new THREE.StereoCamera();
let output = html`<p>Hello World</p>`
function render() {
// https://github.com/mrdoob/three.js/blob/master/examples/jsm/effects/AnaglyphEffect.js
_stereo.update( camera );
renderer.render(scene, camera);
L_renderer.render( stereoScene.sceneL, _stereo.cameraL );
R_renderer.render( stereoScene.sceneR, _stereo.cameraR );
const wrapper = R_renderer.domElement.cloneNode()
const L_group = svg`<g></g>`
const R_group = svg`<g></g>`
wrapper.appendChild(L_group)
wrapper.appendChild(R_group)
L_group.append(...L_renderer.domElement.childNodes)
R_group.append(...R_renderer.domElement.childNodes)
output = wrapper
}
render();
yield output
}
// Original Code from Victor
renderer = {
const renderer = new THREE.WebGLRenderer({ antialias: true });
const effect = effectFn(renderer)
const controls = new THREE.OrbitControls(camera, renderer.domElement);
invalidation.then(() => (controls.dispose(), renderer.dispose()));
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
controls.addEventListener('change', render);
function render() {
// renderer.render(scene, camera);
effect.render(scene, camera);
}
render();
yield renderer.domElement;
}
stereoScene = {
const sceneL = new THREE.Scene();
const sceneR = new THREE.Scene();
const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set( -4, 5, 5 ).normalize();
sceneL.add(directionalLight);
sceneR.add(directionalLight);
sceneL.add(lineL);
sceneR.add(lineR);
return {
sceneL,
sceneR
}
}
lineL = lineFn('LEFT')
lineR = lineFn('RIGHT')
lineFn = (side) => {
const line = new THREE.LineSegments( wireframe );
line.material.depthTest = false;
line.material.opacity = 1;
line.material.transparent = true;
if (side === 'LEFT') {
line.material.color.setStyle('#ff0000');
} else {
line.material.color.setStyle('#00ff00');
}
return line
}
scene = {
const scene = new THREE.Scene();
//scene.background = new THREE.Color(0xf2f7f9);
//scene.add(new THREE.AxesHelper(10));
const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set( -4, 5, 5 ).normalize();
scene.add(directionalLight);
//scene.add(mesh);
scene.add(line);
return scene;
}
effectFn = (renderer) => {
return new THREE.OutlineEffect( renderer, {
defaultThickness: 0.0,
defaultColor: [ 0, 0, 0 ],
defaultAlpha: 0.8,
defaultKeepAlive: true // keeps outline material in cache even if material is removed from scene
});
}
material = {
const material = new THREE.MeshPhongMaterial({ color: 0xff0000});
//const material = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 1 });
return material;
}
camera = {
const fov = 45;
const aspect = width / height;
const near = 1;
const far = 100000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(3, 3, 3);
return camera;
}
line = {
const line = new THREE.LineSegments( wireframe );
line.material.depthTest = false;
line.material.opacity = 1;
line.material.transparent = true;
line.material.color.setStyle('#ff0000');
return line
}
wireframe = new THREE.WireframeGeometry( geometry );
geometry = {
const geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
return geometry;
}
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.
