Published
Edited
Apr 29, 2021
1 star
md`# o_O`
render = {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x444444)
renderer.setSize(width, height);
// renderer.shadowMapEnabled = true;
var planeGeometry = new THREE.PlaneGeometry(60, 20, 20, 20)
var planeMetrial = new THREE.MeshLambertMaterial({color: 0xffffff})
var plane = new THREE.Mesh(planeGeometry, planeMetrial)
plane.receiveShadow = true;
// rotate and position the plane
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = -10;
plane.position.z = 0;
// scene.add(plane);
drawEye(scene, {x: 0, y: 0, k: 1})
drawEye(scene, {x: 16, y: 0, k: 0.2})
drawEye(scene, {x: 16 + 16 * 0.2, y: 0, k: 0.05})
drawEye(scene, {x: 16 + 16 * 0.2 + 16 * 0.05, y: 0, k: 0.01})
camera.position.x = 30;
camera.position.y = 15;
camera.position.z = 100;
camera.lookAt(new THREE.Vector3(10, 0, 0));
// add subtle ambient lighting
var ambiColor = "#ffffff";
var ambientLight = new THREE.AmbientLight(ambiColor);
scene.add(ambientLight);
var spotLight = new THREE.SpotLight(0xeeeeee);
spotLight.position.set(0, 0, -10);
spotLight.castShadow = true;
// scene.add(spotLight);
var pointColor = '#ccffcc'
var pointLight = new THREE.PointLight(pointColor)
pointLight.distance = 100
scene.add(pointLight)
// three ui
const controls1 = new THREE.OrbitControls(camera, renderer.domElement);
// dat gui
function render() {
// pointLight.position.copy(sphereLightMesh.position);
controls1.update()
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render()
return renderer.domElement
}
function drawEye(scene, transform) {
var geometry = new THREE.TorusGeometry( 6 * transform.k, 3 * transform.k, 16, 100);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff7777});
var torus1 = new THREE.Mesh(geometry, cubeMaterial);
torus1.castShadow = true;
// position the cube
torus1.position.x = applyX(-16, transform);
torus1.position.y = applyY(-4, transform);
torus1.position.z = 0;
// add the cube to the scene
scene.add(torus1);
var geometry = new THREE.TorusGeometry( 10 * transform.k, 3 * transform.k, 16, 100);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
var torus2 = new THREE.Mesh(geometry , sphereMaterial);
torus2.position.x = applyX(16, transform);
torus2.position.y = applyY(0, transform);
torus2.position.z = 0;
torus2.castShadow = true;
scene.add(torus2);
var geometry1 = new THREE.BoxGeometry( 14 * transform.k, 3 * transform.k, 3 * transform.k );
var material = new THREE.MeshLambertMaterial( {color: 0xF7BA01} );
var cube = new THREE.Mesh( geometry1, material );
scene.add( cube );
cube.position.x = applyX(0, transform);;
cube.position.y = applyY(-13, transform);
cube.position.z = 0;
cube.castShadow = true;
}
function applyX (x, transform) {
return transform.x + x * transform.k
}
function applyY (y, transform) {
return transform.y + y * transform.k
}
THREE = {
const THREE = await require("three@0.82.1/build/three.min.js");
if (!THREE.OrbitControls) { // If not previously loaded.
const module = window.module = {exports: undefined};
THREE.OrbitControls = await require("three-orbit-controls@82.1.0/index.js").catch(() => module.exports(THREE));
}
return THREE;
}
width = 900
height = 900
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.