Published
Edited
Sep 4, 2019
1 fork
Importers
Insert cell
md`# ThreeJS Simple Camera Example`
Insert cell
THREE = require("three@0.99.0/build/three.min.js")
Insert cell
dim = ({ width: 400, height: 400})
Insert cell
// Position and orient the camera
cameraAttr = ({
view_angle: 45,
aspect: dim.width / dim.height,
near: 0.1, // I think this is the distance at which whatever is viewed disappears
far: 10000 // Conversely, we don't see things farther than this
})
Insert cell
camera = {
return new THREE.PerspectiveCamera(
cameraAttr.view_angle,
cameraAttr.aspect,
cameraAttr.near,
cameraAttr.far
)
}
Insert cell
sphereAttr = {
const sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x0000cc });
const sphereAttr = {
radius: 50,
segments:16,
rings: 16,
material: sphereMaterial
};
return sphereAttr;
}
Insert cell
deg2rad = (deg) => (deg*Math.PI/180)
Insert cell
makeSphere = function() {
let sp = new THREE.Mesh(
new THREE.SphereGeometry(
sphereAttr.radius,
sphereAttr.segments,
sphereAttr.rings),
sphereAttr.material);
sp.rotation.x = deg2rad(45);

//sp.position.z = spPos;
return sp;
}
Insert cell
renderer = { return new THREE.WebGLRenderer }
Insert cell
scene = {
const scene = new THREE.Scene();
camera.position.z = cameraZ;
camera.quaternion.x = cameraAngle*.1;
scene.background = new THREE.Color( 0xffffff );
let light = new THREE.AmbientLight( 0xa0a0a0 ); // soft white light
let pointLight = new THREE.PointLight(0xFFFFFF);
scene.add( light );
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
scene.add(pointLight);
scene.add(makeSphere());
scene.add(camera);
renderer.setSize(dim.width, dim.height);
renderer.render(scene, camera);
return renderer.domElement
}
Insert cell
viewof cameraZ = slider({min: -300, max: 1000, value: 300, step: 20})
Insert cell
//viewof cameraAngle = slider({min: -1.5, max: 1.5, value: 0, step: 0.01})
cameraAngle = Object.assign(.2)
Insert cell
import {slider, color, radio} from "@jashkenas/inputs"
Insert cell

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.
Learn more