奇奇怪怪的three.js特效（一）

最新推荐文章于 2024-04-16 08:57:44 发布

海边梦之城

最新推荐文章于 2024-04-16 08:57:44 发布

阅读量413

点赞数

分类专栏： three.js 文章标签： js three.js

本文链接：https://blog.csdn.net/nicheng91/article/details/118523442

版权

three.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

随便做了个龙卷风特效，好烂啊

效果如图：

代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>test0004</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body onload="init()">
<script src="../jslib/three.js" type="text/javascript" charset="utf-8"></script>
<script src="../jslib/stats.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../jslib/dat.gui.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    //声明一些全局变量
    var renderer, camera, scene,group,geometry,material;
	var side=10;
	var totalSide=300;
	var rotationRate=0.02
	
	//性能监视
	var stats = new Stats();
	document.body.appendChild(stats.dom)
	//调试器
	// var controls={
	// 	positionX:0,
	// 	positionY:0,
	// 	positionZ:0
	// }
	// var gui=new dat.GUI();
	// gui.add(controls,"positionX",-50,50).onChange(updatePosition)
	// gui.add(controls,"positionY",-50,50).onChange(updatePosition)
	// gui.add(controls,"positionZ",-50,50).onChange(updatePosition)
	// function updatePosition(){
	// 	mesh.position.set(controls.positionX,controls.positionY,controls.positionZ)
	// }


    //初始化渲染器
    function initRenderer() {
        renderer = new THREE.WebGLRenderer(); //实例化渲染器
        renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
        document.body.appendChild(renderer.domElement); //添加到dom
    }

    //初始化场景
    function initScene() {
        scene = new THREE.Scene(); //实例化场景
		
		//坐标轴
		var  axesHelper = new THREE.AxesHelper( 1000 );
		scene.add( axesHelper );
    }

    //初始化相机
    function initCamera() {
        camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 10, 1000); //实例化相机
        camera.position.set(0, 100, 400);
		camera.lookAt(scene.position);
    }

    //创建模型
    function initMesh() {
		group = new THREE.Group()
        geometry = new THREE.BoxGeometry( side, side, side ); //创建几何体
        material = new THREE.MeshNormalMaterial(); //创建材质
        for(let i=0 ;i<100;i++){
			let mesh = new THREE.Mesh( geometry, material ); //创建网格
			let x=THREE.Math.randFloatSpread(totalSide*2)
			let z=Math.sqrt(totalSide*totalSide-x*x)*(Math.round(Math.random())==0?-1:1)
			mesh.position.set(x,0,THREE.Math.randFloatSpread(z*2))
			group.add(mesh)
		}
		
		scene.add( group ); //将网格添加到场景
    }
	
	function createMesh(){
		for(let i=0;i<1;i++){
			let mesh = new THREE.Mesh( geometry, material );
			let x=THREE.Math.randFloatSpread(totalSide*2)
			let z=Math.sqrt(totalSide*totalSide-x*x)*(Math.round(Math.random())==0?-1:1)
			mesh.position.set(x,0,THREE.Math.randFloatSpread(z*2))
			// console.log(mesh.position)
			group.add(mesh)
		}
	}
	
	function createMesh2(){
		for(let i=0;i<1;i++){
			let mesh = new THREE.Mesh( geometry, material );
			let x=THREE.Math.randFloatSpread(totalSide)
			let z=Math.sqrt(totalSide*totalSide-x*x)*(Math.round(Math.random())==0?-1:1)
			mesh.position.set(x,0,z)
			// console.log(mesh.position)
			group.add(mesh)
		}
	}
	
	function createMesh3(){
		for(let i=0;i<1;i++){
			let mesh = new THREE.Mesh( geometry, material );
			let x=THREE.Math.randFloatSpread(totalSide)
			let z=Math.sqrt(totalSide*totalSide-x*x)*(Math.round(Math.random())==0?-1:1)
			mesh.position.set(z,0,x)
			// console.log(mesh.position)
			group.add(mesh)
		}
	}
	
	function createMesh4(){
		for(let i=0;i<1;i++){
			let mesh = new THREE.Mesh( geometry, material );
			let x=THREE.Math.randFloatSpread(totalSide*2)
			let z=Math.sqrt(totalSide*totalSide-x*x)*(Math.round(Math.random())==0?-1:1)
			mesh.position.set(x,0,z)
			// console.log(mesh.position)
			group.add(mesh)
		}
	}
	
	function change(){
		createMesh()
		createMesh2()
		// createMesh3()
		for (let i = 0; i < group.children.length; i++) {
			let mesh=group.children[i]
			mesh.scale=mesh.scale.multiplyScalar(0.9999)
			
			let positionA=new THREE.Vector3(mesh.position.x,0,mesh.position.z)
			let lenth=positionA.length()
			let ratio=(lenth-0.5)/lenth
			mesh.position.x*=ratio
			mesh.position.z*=ratio
			
			let rotationR=rotationRate*lenth/totalSide
			mesh.position=mesh.position.applyMatrix4(new THREE.Matrix4().makeRotationY(rotationR))
			mesh.position.y-=10/Math.pow(1.03,lenth)+0.1
						
			mesh.rotation.y += rotationR; 
			
			if(mesh.position.y<-500){
				mesh.geometry.dispose()
				mesh.material.dispose()
				group.remove(mesh)
			}
		}
		
		
	}

    //运行动画
    function animate() {
        requestAnimationFrame(animate); //循环调用函数
		
		change();
        
		stats.update();
        renderer.render( scene, camera ); //渲染界面
    }

    //初始化函数，页面加载完成是调用
    function init() {
        initRenderer();
        initScene();
        initCamera();
        initMesh();

        animate();
    }
	
	
	
</script>
</body>
</html>

海边梦之城

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
奇奇怪怪的three.js特效（一）

随便做了个龙卷风特效，好烂啊效果如图：代码如下<!DOCTYPE html><html><head> <meta charset=utf-8> <title>test0004</title> <style> body { margin: 0; } canvas { width: ..
复制链接

扫一扫