import * as THREE from "https://esm.sh/three";
import {OrbitControls} from "https://esm.sh/three/examples/jsm/controls/OrbitControls";
const textureLoader = new THREE.TextureLoader()
let controls;
let scene: THREE.Scene, camera: THREE.PerspectiveCamera, renderer: THREE.WebGLRenderer;
let clock = new THREE.Clock();
const uniforms = {
uTime: {value: 0},
uFrequency: {value: new THREE.Vector4(10, 10, .1, .1)},
uColor: new THREE.Color(),
uTexture: {value: textureLoader.load('https://3d-eosin.vercel.app/static/media/flag.8486dd6104d28379fbe9.png')}
}
// 初始化webgl
function init() {
let w = window.innerWidth;
let h = window.innerHeight;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, w / h, 0.01, 1000);
camera.position.set(0, 0, 1.5);
camera.lookAt(new THREE.Vector3());
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(w, h);
renderer.setClearColor(0xe6fcf5, 1);
document.getElementById("app").appendChild(renderer.domElement);
controls = new OrbitControls(camera, renderer.domElement);
render();
initShader()
window.addEventListener("resize", resize);
}
// 初始化shader
function initShader() {
const vertex = /* GLSL */ `
// uniform mat4 projectionMatrix;
// uniform mat4 viewMatrix;
// uniform mat4 modelMatrix;
// attribute vec3 position;
attribute float aRandom;
varying float vRandom;
uniform float uTime;
uniform vec4 uFrequency;
// attribute vec2 uv;
varying vec2 vUv;
void main(){
vUv = uv;
vec4 modelPosition = modelMatrix * vec4(position, 1.0);
// modelPosition.y += 1.0;
modelPosition.z += aRandom * .01;
modelPosition.z += aRandom * .01;
modelPosition.z += sin(modelPosition.x * uFrequency.x+uTime) * uFrequency.z*modelPosition.x;
modelPosition.y += sin(modelPosition.x * uFrequency.x+uTime) * uFrequency.w*modelPosition.x;
vec4 viewPosition = viewMatrix * modelPosition;
vec4 projectedPosition = projectionMatrix * viewPosition;
vRandom = modelPosition.z*5.0;
gl_Position = projectedPosition;
}
`;
const fragment = /* GLSL */ `
// precision mediump float;
uniform vec3 uColor;
uniform sampler2D uTexture;
varying vec2 vUv;
varying float vRandom;
void main() {
// 红色
gl_FragColor = vec4(vRandom, 0.6, 0.3, 1.0);
// vec4 textureColor = texture2D(uTexture, vUv)* vec4(vRandom*10.0, 1, 0.5, 1.0);
// gl_FragColor = textureColor;
}
`;
const geometry = new THREE.PlaneGeometry(1, 1, 32, 32);
geometry.translate(.5, 0, 0)
const count = geometry.attributes.position.count
const randoms = new Float32Array(count)
// 使用随机数填充数组
for (let i = 0; i < count; i++) {
randoms[i] = Math.random()
}
// 添加到几何体的属性中
geometry.setAttribute('aRandom', new THREE.BufferAttribute(randoms, 1))
// const material = new THREE.MeshBasicMaterial({
// color: 0x0ca678,
// // wireframe: true
// });
// const material = new THREE.RawShaderMaterial({
const material = new THREE.ShaderMaterial({
vertexShader: vertex,
fragmentShader: fragment,
// wireframe: true,
transparent: true,
side: 2,
uniforms,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
// 渲染
function render() {
uniforms.uTime.value += .1
renderer.render(scene, camera);
requestAnimationFrame(render);
}
// 响应式3d窗口
function resize() {
const w = window.innerWidth;
const h = window.innerHeight;
renderer.setSize(w, h);
camera.aspect = w / h;
camera.updateProjectionMatrix();
}
init()
2、第一步初始化基本的three.js 代码结构
1、导入模块初始化变量
import * as THREE from "https://esm.sh/three";
import {OrbitControls} from "https://esm.sh/three/examples/jsm/controls/OrbitControls";
const textureLoader = new THREE.TextureLoader()
let controls;
let scene: THREE.Scene, camera: THREE.PerspectiveCamera, renderer: THREE.WebGLRenderer;
let clock = new THREE.Clock();
const uniforms = {
uTime: {value: 0},
uFrequency: {value: new THREE.Vector4(10, 10, .1, .1)},
uColor: new THREE.Color(),
uTexture: {value: textureLoader.load('https://3d-eosin.vercel.app/static/media/flag.8486dd6104d28379fbe9.png')}
}
3、第二步初定义three.js基本的方法
// 初始化webgl
function init() {
let w = window.innerWidth;
let h = window.innerHeight;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, w / h, 0.01, 1000);
camera.position.set(0, 0, 1.5);
camera.lookAt(new THREE.Vector3());
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(w, h);
renderer.setClearColor(0xe6fcf5, 1);
document.getElementById("app").appendChild(renderer.domElement);
controls = new OrbitControls(camera, renderer.domElement);
render();
initShader()
window.addEventListener("resize", resize);
}
// 渲染
function render() {
uniforms.uTime.value += .1
renderer.render(scene, camera);
requestAnimationFrame(render);
}
// 响应式3d窗口
function resize() {
const w = window.innerWidth;
const h = window.innerHeight;
renderer.setSize(w, h);
camera.aspect = w / h;
camera.updateProjectionMatrix();
}
