three.js生成圣诞树

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的33天，点击查看活动详情

由于圣诞节没有准备礼物，所以自己创建了一个圣诞树作为补偿 关键代码 new Float32Array(9),这个9是必须要传的，否则后面赋值无效，然后给生成随机值，

数组的每3位元素代表一个点的坐标，分别代表x,y,z,生成的输的大小是-5到5之间，然后利用这个材质的缓冲对象和点的坐标，生成几材质，再通过材质和随机的颜色透明度生成几何体，最终加入到场景中。

import * as THREE from 'three'
// 导入轨道控制器

import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'
// 导入动画库
import gsap from 'gsap';
import * as dat from 'dat.gui'

//1 创建场景
const scene = new THREE.Scene()

// 2创建相机 new 一个透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10)

// 相机添加到场景里
scene.add(camera)




// 创建物体
// 创建几何体
for (let i = 0; i < 20; i++) {
    const geometry = new THREE.BufferGeometry();
    let positionArray = new Float32Array(9);
    for (let j = 0; j < 9; j++) {
        positionArray[j] = Math.random() * 10-5;
    }
    geometry.setAttribute('position', new THREE.BufferAttribute(positionArray, 3))
    // 几何体材质
    let color = new THREE.Color(Math.random(), Math.random(), Math.random())
    const material = new THREE.MeshBasicMaterial({
        color,
        transparent: true,
        opacity: Math.random()
    });
    // 根据几何体创建物体
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube)
}
// 创建几何体
// const geometry = new THREE.BufferGeometry();

// let vertices = new Float32Array(
//     [
//         -1.0, -1.0, 1.0,
//         1.0, -1.0, 1.0,
//         1.0, 1.0, 1.0,
//         1.0, 1.0, 1.0,
//         -1.0, 1.0, 1.0,
//         -1.0, -1.0, 1.0

//     ])

// geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
// // 几何体材质
// const material = new THREE.MeshBasicMaterial({
//     color: 0x00ffff
// });
// // 根据几何体创建物体
// const cube = new THREE.Mesh(geometry, material);
// scene.add(cube)


//初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);


// 将webFl渲染的canvas内容添加到body中
document.body.appendChild(renderer.domElement)

// 使用渲染器通过相机将场景渲染到dom上
renderer.render(scene, camera)

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

const clock = new THREE.Clock();


window.addEventListener('dblclick', () => {
    let fullscreenElement = window.document.fullscreenElement;
    if (fullscreenElement) {
        document.exitFullscreen();
    } else {
        renderer.domElement.requestFullscreen();

    }
})

function render() {
    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(render)
}
render()

window.addEventListener('resize', () => {
    // 更新摄像头
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    // 更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.setSize(window.innerWidth, window.innerHeight)

    // 设置像素比
    renderer.setPixelRatio(window.devicePixelRatio)
})