Three.js base
A base/starter fiddle for Three.js
HTML
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
CSS
body {
padding: 0;
margin: 0;
}
canvas {
display: block;
}
JavaScript
var camera, scene, renderer, mesh, material, stats, positionArray;
init();
animate();
function init() {
// Renderer.
renderer = new THREE.WebGLRenderer();
//renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// Add renderer to page
document.body.appendChild(renderer.domElement);
// Create camera.
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 3;
// Create scene.
scene = new THREE.Scene();
createCircle(1);
// Add listener for window resize.
window.addEventListener('resize', onWindowResize, false);
// Add stats to page.
stats = new Stats();
document.body.appendChild(stats.dom);
}
function createCircle(radius){
radius = radius || 1;
const points = [
new THREE.Vector3(radius,0.1,0),
new THREE.Vector3(radius,0.0,0),
new THREE.Vector3(radius,0.1,0),
new THREE.Vector3(radius,0.15,0)
]
const closeSpline = new THREE.CatmullRomCurve3(points);
const closeSplinePoints = closeSpline.getPoints(64);
const geometry = new THREE.LatheGeometry(closeSplinePoints,128);
const material = new THREE.MeshBasicMaterial({color:'white',side: THREE.DoubleSide})
mesh = new THREE.Mesh(geometry,material);
mesh.rotation.x += (3.14/2);
mesh.rotation.y += (3.14/2);
scene.add(mesh);
positionArray = mesh.geometry.attributes.position.array.map(x=>x); // makes a copy
}
function updateGeometry() {
if (mesh != null) {
//console.log("here to update fftMesh child");
let m = mesh;
let g = m.geometry;
let geomPosAttr = g.attributes.position.array;
let l = geomPosAttr.length;
//console.log(geomPosAttr);
for (let i = l - 4; i > -1; i -= 1) {
geomPosAttr[i] = positionArray[i] + positionArray[i] * Math.random()*100;
}
//console.log(geomPosAttr);
...