使用 three.js和 shader 实现一个五星红旗飘扬得着色器

最新推荐文章于 2025-05-15 13:39:57 发布

原创

最新推荐文章于 2025-05-15 13:39:57 发布 · 617 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #着色器 #智慧城市 #前端 #webgl #threejs #js

使用 three.js和 shader 实现一个五星红旗飘扬得着色器
在这里插入图片描述

源链接：https://threehub.cn/#/codeMirror?navigation=ThreeJS&classify=shader&id=chinaFlag

国内站点预览：http://threehub.cn

github地址: https://github.com/z2586300277/three-cesium-examples

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.5, -0.5, 3)

const renderer = new THREE.WebGLRenderer()

renderer.setSize(box.clientWidth, box.clientHeight