Threejs学习03——实现随机多个三角形随机位置随机颜色展示效果

实现随机多个三角形随机位置随机颜色展示效果

这是一个非常简单基础的threejs的学习应用！本节主要介绍的是随机，随机位置以及随机颜色，我们使用的物体是三角形，通过一个三角形三个顶点每一个顶点通过xyz坐标来确定，则一个三角形为9个坐标！利用随机数坐标生成50个三角形就可以看到好看的图形！

实现效果

在这里插入图片描述

准备工作

使用vue创建项目，然后实现以上功能需要安装一些插件：threejs

yarn add three

在index.html中引入main.js

<script src="./main/main.js" type="module"></script>

然后我们编写的Threejs代码都在main.js中编写！

设计效果

引入OrbitControls鼠标控制插件

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

创建一个场景

//创建一个场景
const scene = new THREE.Scene();

创建一个透视相机

/**
 * 创建一个相机(透视相机)
 * fov — 摄像机视锥体垂直视野角度
    aspect — 摄像机视锥体长宽比
    near — 摄像机视锥体近端面
    far — 摄像机视锥体远端面
 */
const camera = new THREE.PerspectiveCamera(90,window.innerWidth/window.innerHeight,1,1000);

设置相机对象位置以及将相机加入场景中

//设置相机对象 x y z
camera.position.set(0,0,10); 
//相机加入场景中
scene.add(camera);

接下来我们循环创建物体对象，这里创建50个对象，对象坐标Float32Array数组组成，一个Float32Array中存9个值，取坐标的时候定义每三个值为一个坐标即可！然后设计颜色为three的颜色的RGB随机生成值！

//添加物体
//创建几何体
for(let i=0;i<50;i++){
    //每一个三角形都有三个点  每一个点都有三个左值
    const geometry = new THREE.BufferGeometry();
    const postionArray = new Float32Array(9);
    for(let j=0;j<9;j++){
    		//坐标的值在-2.5 ~ 2.5之前   集中在坐标系中间位置
        postionArray[j] = Math.random()*5 - 2.5;
    }
    //将随机生成的坐标按照每三个值为一个坐标设置geometry的位置
    geometry.setAttribute('position',new THREE.BufferAttribute(postionArray,3));
    //随机RGB颜色值
    let color = new THREE.Color(Math.random(),Math.random(),Math.random())
    //创建材质
    const mater = new THREE.MeshBasicMaterial({color:color,transparent:true,opacity:0.6})
    //根据几何体和材质创建物体
    const cube = new THREE.Mesh(geometry,mater);
    //将几何体添加到场景中
    scene.add(cube);
}

设置three渲染器并初始化渲染器大小并把渲染器添加到场景中！

//初始化渲染器
const render = new THREE.WebGLRenderer();
//设置渲染尺寸大小
render.setSize(window.innerWidth,window.innerHeight);

//将webgl渲染的canvas内容添加到body
document.body.appendChild(render.domElement)

最后我们添加坐标轴辅助器，并加入场景中！以及我们的控制器可以使得鼠标能够转动场景内容！

//创建坐标轴辅助器
const axes = new THREE.AxesHelper(5);
scene.add(axes);

//添加控制器
const control = new OrbitControls(camera,render.domElement)
control.update();

//设置时钟
render.render(scene,camera);
function animate(){
    requestAnimationFrame(animate)
    //使用渲染器  通过相机将场景渲染
    render.render(scene,camera);
}
animate()

完整代码如下：

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
//了解three最基本用法

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

/**
 * 2.创建一个相机(透视相机)
 * fov — 摄像机视锥体垂直视野角度
    aspect — 摄像机视锥体长宽比
    near — 摄像机视锥体近端面
    far — 摄像机视锥体远端面
 */
const camera = new THREE.PerspectiveCamera(90,window.innerWidth/window.innerHeight,1,1000);

//设置相机对象 x y z
camera.position.set(0,0,10); 
//相机加入场景中
scene.add(camera);

//添加物体
//创建几何体
for(let i=0;i<50;i++){
    //每一个三角形都有三个点  每一个点都有三个左值
    const geometry = new THREE.BufferGeometry();
    const postionArray = new Float32Array(9);
    for(let j=0;j<9;j++){
        postionArray[j] = Math.random()*5 - 2.5;
    }
    geometry.setAttribute('position',new THREE.BufferAttribute(postionArray,3));
    let color = new THREE.Color(Math.random(),Math.random(),Math.random())
    //创建材质
    const mater = new THREE.MeshBasicMaterial({color:color,transparent:true,opacity:0.6})
    //根据几何体和材质创建物体
    const cube = new THREE.Mesh(geometry,mater);
    //将几何体添加到场景中
    scene.add(cube);
}
//3.添加物体 
//初始化渲染器
const render = new THREE.WebGLRenderer();
//设置渲染尺寸大小
render.setSize(window.innerWidth,window.innerHeight);

//将webgl渲染的canvas内容添加到body
document.body.appendChild(render.domElement)

//创建坐标轴辅助器
const axes = new THREE.AxesHelper(5);
scene.add(axes);


//添加控制器
const control = new OrbitControls(camera,render.domElement)
control.update();

//设置时钟
render.render(scene,camera);
function animate(){
    requestAnimationFrame(animate)
    //使用渲染器  通过相机将场景渲染
    render.render(scene,camera);
}
animate()