Threejs学习-循环生成三角形

最新推荐文章于 2023-11-20 13:39:47 发布

qq_34706774

最新推荐文章于 2023-11-20 13:39:47 发布

阅读量172

点赞数

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/qq_34706774/article/details/127320092

版权

Threejs学习

循环生成三角形

import * as THREE from "three";

import { OrbitControls } from "three/examples/jsm/controls/orbitcontrols";

//scene
let scene =new THREE.Scene();

//camera
let camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    1,
    1000
);
camera.position.set(0,0,10);
scene.add(camera);
// 循环生成三角形
for(let i=0;i<100;i++){
    let boxsize = new THREE.BufferGeometry();
    let pointArr = new Float32Array(9);
    for(let n=0;n<9;n++){
        pointArr[n]=Math.random() * 10 - 5;
    }
    let color=new THREE.Color(Math.random(),Math.random(),Math.random());
    boxsize.setAttribute("position",new THREE.BufferAttribute(pointArr,3));
    let boxColor = new THREE.MeshBasicMaterial({
        color:color,
        transparent:true,
        opacity:0.5
    });
    let box = new THREE.Mesh(boxsize,boxColor);
    scene.add(box);
}

let renderer=new THREE.WebGL1Renderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
// renderer.render(scene,camera);

// 轨道控制器
let orbitcontrols = new OrbitControls(camera,renderer.domElement);
// 设置控制器阻尼
orbitcontrols.enableDamping = true;

let axes=new THREE.AxesHelper(5);
scene.add(axes);

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