Three.js Plane wrap
Attempting to wrap a plane around a sphere with three.js
HTML
<script src="https://rawgithub.com/mrdoob/three.js/dev/build/three.js"></script>
<div id="Text"></div>
JavaScript
var camera, scene, renderer, geometry, material, mesh;
var geometry2, material2, mesh2;
var frame;
init();
animate();
function init() {
frame = 0;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
scene.add(camera);
geometry = new THREE.PlaneGeometry(800, 100, 8000, 1);
geometry2 = new THREE.PlaneGeometry(800, 100, 8000, 1);
//console.log("gl="+geometry.vertices.length); // 16,002
for(var i=0; i <= 8000; i ++) {
var y = 50*Math.sin(i/100)+1
geometry.vertices[i].y = y;
geometry2.vertices[i+8001].y = y;
geometry2.vertices[i].y = y+30*Math.sin(i/500)+30;
}
material = new THREE.MeshBasicMaterial({color: "#800080"});
material2 = new THREE.MeshBasicMaterial({color: "#a0a040"});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh2 = new THREE.Mesh(geometry2, material2);
scene.add(mesh2);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
render();
frame += 1;
}
function render() {
mesh.position.x = 300*Math.sin(frame/500);
mesh.scale.x = 1.0 + 0.2*Math.sin(frame/200);
mesh2.position.x = 300*Math.sin(frame/500);
mesh2.scale.x = 1.0 + 0.2*Math.sin(frame/200);
//mesh.translation.x += 0.1;
//mesh.rotation.z += 0.01;
renderer.render(scene, camera);
}