Three.js 顶点着色学习
https://threehub.cn/#/codeMirror?navigation=ThreeJS&classify=basic&id=gradientTriangle
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'const box = document.getElementById('box')const scene = new THREE.Scene()const camera = new THREE.PerspectiveCamera(75, box.clientWidth / box.clientHeight, 0.1, 1000)camera.position.set(0, 0, 500)const renderer = new THREE.WebGLRenderer()renderer.setSize(box.clientWidth, box.clientHeight)new OrbitControls(camera, renderer.domElement)window.onresize = () => {renderer.setSize(box.clientWidth, box.clientHeight)camera.aspect = box.clientWidth / box.clientHeightcamera.updateProjectionMatrix()}box.appendChild(renderer.domElement)initObject();
function initObject() {let geometry = new THREE.BufferGeometry(); // 使用BufferGeometrylet vertices = new Float32Array([0, 0, 0, // 顶点p10, 200, 0, // 顶点p2200, 0, 0 // 顶点p3]);geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));let colors = [1.0, 0.0, 0.0, // 颜色1 (红色)0.0, 1.0, 0.0, // 颜色2 (绿色)0.0, 0.0, 1.0 // 颜色3 (蓝色)];// 创建顶点颜色属性let colorAttribute = new THREE.BufferAttribute(new Float32Array(colors), 3);geometry.setAttribute('color', colorAttribute);// 定义索引，创建三角形面let indices = [0, 1, 2 // 索引0, 1, 2 表示顶点数组中的p1, p2, p3];let indexAttribute = new THREE.BufferAttribute(new Uint16Array(indices), 1);geometry.setIndex(indexAttribute);let material = new THREE.MeshBasicMaterial({vertexColors: true,side: THREE.DoubleSide,wireframe: false});let obj = new THREE.Mesh(geometry, material);scene.add(obj);
}
function animate() {requestAnimationFrame(animate)renderer.render(scene, camera)}animate()/*** 名称: 渐变三角形* 作者: giser2017 https://gitee.com/giser2017
*/
