How can I replace the hearts with the leaf provided?
I'm working on a web app that involves falling objects using Three.JS. I began with a heart shape, but now I need to swap it out with an autumn leaf (that's the only change needed).
This is the image:
I'm not quite sure how shapes function in this context.
Try it yourself:
'use strict';
var container, stats;
var camera, scene, renderer;
var group,
shapes = [];
init();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 150, 500);
scene.add(camera);
var light = new THREE.DirectionalLight(0x9955ff, 2);
light.position.x = -500;
light.position.y = 500;
camera.add(light);
var light = new THREE.DirectionalLight(0x9955ff, 1);
light.position.x = 500;
light.position.y = -500;
light.position.z = -150;
camera.add(light);
scene.background = new THREE.Color('#993355');
var x = -25,
y = -250;
// Leaf shape code would be placed here
var extrudeSettings = { amount: 1, bevelEnabled: true, bevelSegments: 20, steps: 2, bevelSize: 20, bevelThickness: 10 };
/* Loop for positioning and adding leaf shapes would go here */
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
render();
}
// Remaining functions, such as addShape(), animate(), and render(), remain unchanged
body{
margin: 0;
padding: 0;
overflow: hidden;
}<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js'></script>It needs to be the same, exactly the same. Only the hearts need to be replaced by leaves.