viewof test = targetArrow.rotation
// Continuously updates
{
while (true) {
updateArrow();
renderer.render(scene, camera);
rendererIso.render(scene, cameraIso);
yield null;
}
}
cameraArrow = arrowHelper("green");
targetArrow = arrowHelper("yellow");
finalArrow = arrowHelper("red")
function updateArrow() {
var cameraVector = new THREE.Vector3();
camera.getWorldDirection(cameraVector);
cameraArrow.position.set(
camera.position.x,
camera.position.y,
camera.position.z
);
cameraArrow.setDirection(cameraVector);
//position
backgroundPlane.position.copy(camera.position);
backgroundPlane.position.add(cameraVector.multiplyScalar(7));
const towardsCamera = new THREE.Vector3();
towardsCamera
.subVectors(camera.position, backgroundPlane.position)
.normalize();
targetArrow.setDirection(towardsCamera);
targetArrow.position.copy(backgroundPlane.position);
//console.log(towardsCamera);
const finalVec = new THREE.Vector3(
towardsCamera.x,
0,
towardsCamera.z
).normalize();
//backgroundPlane.rotation.setFromVector3(finalVec);
//backgroundPlane.lookAt(towardsCamera.x, 0, towardsCamera.z);
const axis = new THREE.Vector3(0, 0, 1).normalize();
finalArrow.setDirection(finalVec);
finalArrow.position.copy(backgroundPlane.position);
backgroundPlane.quaternion.setFromUnitVectors(axis, finalVec.clone());
//console.log(finalVec);
//backgroundPlane.rotation.setFromVector3(finalVec, "xyz");
//backgroundPlane.lookAt(finalVec);
}
function arrowHelper(color) {
const dir = new THREE.Vector3(1, 2, 0);
//normalize the direction vector (convert to vector of length 1)
dir.normalize();
const origin = new THREE.Vector3(0, 0, 0);
const length = 1;
const arrowHelper = new THREE.ArrowHelper(dir, origin, length, color);
scene.add(arrowHelper);
return arrowHelper;
}
gradientTexture = {
return new THREE.CanvasTexture(
drawSplineGradient([
[9, 9, 9],
[178, 180, 193]
])
);
}
backgroundPlane = {
const planeObj = new THREE.Object3D();
// base plane geo
const geometry = new THREE.PlaneGeometry(4, 2);
const material = new THREE.MeshBasicMaterial({
map: gradientTexture,
side: THREE.DoubleSide
});
const plane = new THREE.Mesh(geometry, material);
const materialUpper = new THREE.MeshBasicMaterial({
color: new THREE.Color(`rgb(${9}, ${9}, ${9})`),
side: THREE.DoubleSide
});
const planeUpper = new THREE.Mesh(geometry, materialUpper);
planeUpper.position.set(0, 2, 0);
const materialLower = new THREE.MeshBasicMaterial({
color: new THREE.Color(`rgb(${178}, ${180}, ${193})`),
side: THREE.DoubleSide
});
const planeLower = new THREE.Mesh(geometry, materialLower);
planeLower.position.set(0, -2, 0);
planeObj.add(planeUpper);
planeObj.add(planeLower);
planeObj.add(plane);
const s = 5;
planeObj.scale.set(s, s, s);
// planeObj.rotation.eulerOrder = "XYZ";
scene.add(planeObj);
return planeObj;
}
cameraIso = {
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, 2, -2);
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
rendererIso = {
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
const controls = new THREE.OrbitControls(cameraIso, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, cameraIso));
invalidation.then(() => (controls.dispose(), renderer.dispose()));
return renderer;
}
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, camera));
invalidation.then(() => (controls.dispose(), renderer.dispose()));
return renderer;
}
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.
