preface

I was still typing code when I got a message from my girlfriend.

Others have, I am sure to give her better, just these two days to learn three. Js, write a 3D Christmas tree 🎄 to give her a surprise

Project Experience Address

Model is a bit big, loading will need some time for the first time: demo.huabyte.com/christmas/

The preparatory work

In order to arrange a romantic scene for my girlfriend, first of all, we go to 3DWarehouse to find a beautiful Christmas tree model, of course, if you want to express the sincerity of their own modeling I dare not say what ah (humble 😂), note that I download the model here for GLTF format.

Feel the scene drab point is not, can not reflect my romantic feelings, so have to go online to receive a luoSnowflake and scene map materials.

We are almost ready for the work, of course, and Christmas songs… Now start typing code

Code implementation

With the scene, camera, lights, and renderer all ready, we import our model

// New three.rgbeloader ().load('./winter_evening_1k.hdr', (texture) => { texture.mapping = THREE.EquirectangularReflectionMapping scene.background = texture scene.environment = Const loader = new three.gltfloader () loader.load('./scene.gltf', (gltf) => { overplay.remove() loading.remove() gltf.scene.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) { child.material.emissive = child.material.color child.material.emissiveMap = child.material.map child.receiveShadow = true child.castShadow = true } }); Gltf.scene.position. y -= 2 scene.add(gltf.scene) gltf.scene.scale.set(0.008, 0.008, 0.008) animate()})Copy the code

Of course, can not lose the snowflakes ❄️

// let textureOrgin = new three.textureLoader ().load('./fl.png') i< 5000; i++) { const spriteMaterial = new THREE.SpriteMaterial({ map: TextureOrgin}) const Sprite = new three.sprite (spriteMaterial) group.add(Sprite) // Adjust the size of sprite.scale.set(0.1, Let k1 = math.random () -0.5 let k2 = math.random () -0.5 sprite.position.set(k1 * 100, 20 * (math.random ()-0.1), 100 * k2)} scene.add(group)Copy the code

To achieve the effect of the snowflake falling, we set its position to fall continuously, while the whole scene starts to spin, and it sounds romantic.

Function animate() {// Animate group.children. ForEach (Sprite => {// animate group.children If (sprite.position.y < -5) {sprite.position.y = 20}}) camera) requestAnimationFrame(animate) }Copy the code

Finally add music and controller, let girlfriend in listening to the rhythm of the cheerful music, watch the Christmas tree prepared for her. 🎉

function controler() { control = new THREE.OrbitControls(camera, renderer.domElement) control.addEventListener('change', Control. enablePan = false window.addEventListener('resize', onWindowResize) }Copy the code

conclusion

Project open source address: github.com/AirHua-byte… (star 🌟 genuflect is begged)

This is the implementation of 3d Christmas tree, see here again for a thumbs up and star.

You can also visit my blog at huabyte.com to learn more about ducks