您的位置:首页 > 房产 > 家装 > three.js 实现围墙效果

three.js 实现围墙效果

2024/12/23 5:51:03 来源:https://blog.csdn.net/guang2586/article/details/141955505  浏览:    关键词:three.js 实现围墙效果

import * as THREE from “three”;
import { OrbitControls } from “three/addons/controls/OrbitControls.js”;

const { innerWidth, innerHeight } = window;
const aspect = innerWidth / innerHeight;

class Base {
constructor() {
this.init();
this.main();
}
main() {
const geometry = new THREE.CylinderGeometry(30, 30, 20, 4, 64, true);
const material = new THREE.ShaderMaterial({
side: THREE.DoubleSide,
transparent: true,
depthWrite: false,
uniforms: {
uTime: this.deltaTime,
},
vertexShader: varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); } ,
fragmentShader: `
uniform float uTime;
varying vec2 vUv;
#define PI 3.14159265

                    void main(){vec4 baseColor = vec4(0.0,1.,0.5,1.);vec4 finalColor;float amplitude = 1.;float frequency = 10.;float x = vUv.x;float y = sin(x * frequency) ;float t = 0.01*(-uTime*130.0);y += sin(x*frequency*2.1 + t)*4.5;y += sin(x*frequency*1.72 + t*1.121)*4.0;y += sin(x*frequency*2.221 + t*0.437)*5.0;y += sin(x*frequency*3.1122+ t*4.269)*2.5;y *= amplitude*0.06;y /= 3.;y += 0.55;vec4 color = gl_FragColor.rgba;float r = step(0.5, fract(vUv.y - uTime));baseColor.a = step(vUv.y,y) * (y-vUv.y)/y;gl_FragColor = baseColor;}`,});const cylinder = new THREE.Mesh(geometry, material);cylinder.position.y += 10;this.scene.add(cylinder);
}
init() {this.clock = new THREE.Clock();this.renderer = new THREE.WebGLRenderer({antialias: true,logarithmicDepthBuffer: true,});this.renderer.setPixelRatio(window.devicePixelRatio);this.renderer.setSize(innerWidth, innerHeight);this.renderer.setAnimationLoop(this.animate.bind(this));document.body.appendChild(this.renderer.domElement);this.camera = new THREE.PerspectiveCamera(60, aspect, 0.01, 10000);this.camera.position.set(0, 40, 40);this.scene = new THREE.Scene();this.controls = new OrbitControls(this.camera, this.renderer.domElement);this.deltaTime = {value: 0,};const grid = new THREE.GridHelper(100);this.scene.add(grid);const light = new THREE.AmbientLight(0xffffff, 0.5);this.scene.add(light);
}
animate() {this.controls.update();this.renderer.render(this.scene, this.camera);this.deltaTime.value = this.clock.getElapsedTime();
}

}
new Base();

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com