three.js从入门到放弃（四）

风舞红枫

已于 2022-01-31 15:55:11 修改

阅读量211

点赞数 2

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

于 2021-03-07 10:56:01 首次发布

本文链接：https://blog.csdn.net/qq_42231248/article/details/114383890

版权

three 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了如何使用three.js为光源添加纹理（Lensflare）效果，并展示了如何在场景中创建多个点光源，以及如何用随机生成的立方体填充空间。通过Lensflare.js和TextureLoader，增强了光照表现，适合初学者了解three.js的基本光照控制。

摘要由CSDN通过智能技术生成

系列文章
three.js从入门到放弃（一）
three.js从入门到放弃（二）
three.js从入门到放弃（三）
three.js从入门到放弃（四）
three.js从入门到放弃（五）

接下来我们为光源添加一些纹理，让其更炫一点
Lensflare.js文件地址点击这里
 图片资源下载

<!DOCTYPE html>
<html>
<head>
    <title>three.js初探</title>
    <script type="text/javascript" src="three.js"></script>
    <script type="text/javascript" src="Lensflare.js"></script>
    <style type="text/css">
        *{margin:0;padding:0;}
        canvas{display:block;}
    </style>
</head>
<body>
<div id="fwhf"></div>
<script type="text/javascript">
    //创建一个渲染器       即默认创建一个canvas     antialias: true圆滑效果
    var renderer = new THREE.WebGLRenderer({antialias: true});
    //渲染器宽高     即canvas宽高
    renderer.setSize(window.innerWidth,window.innerHeight);
    //渲染器颜色     即canvas的底色  参数： 颜色 (rgb也行), 透明度
    renderer.setClearColor('#333',.5);
    //将渲染器添加到fwhf标签中    即将canvas添加至div中
    document.getElementById("fwhf").append(renderer.domElement);

    //创建一个场景
    var scene=new THREE.Scene();

    //生成一个坐标轴，辅助线，坐标轴的参数    rgb色对应xyz坐标轴
    var axes=new THREE.AxisHelper(20);
    //将辅助线添加至场景中
    scene.add(axes);

	var light = new THREE.PointLight( '#f1b018', 1.5, 300 );
	light.position.set(-200,100,200);
	//引入纹理  由于此处，本程序一定要走服务，即localhost之类，fill协议会报错
	var textureLoader = new THREE.TextureLoader();
	var textureFlare0 = textureLoader.load( "lensflare0.png" );
	//炫光镜头
	var lensflare = new THREE.Lensflare();
	lensflare.addElement( new THREE.LensflareElement( textureFlare0, 512, 0 ) );
	lensflare.position.copy(light.position);
	light.add( lensflare );
	scene.add(light);

	var light1 = new THREE.PointLight( '#f1b018', 1.5, 300 );
	light1.position.set(200,100,200);
	var lensflare1 = new THREE.Lensflare();
	lensflare1.addElement( new THREE.LensflareElement( textureFlare0, 512, 0 ) );
	lensflare1.position.copy(light1.position);
	light1.add( lensflare1 );
	scene.add(light1);

	var light2 = new THREE.PointLight( '#f1b018', 1.5, 300 );
	light2.position.set(0,0,-200);
	var lensflare2 = new THREE.Lensflare();
	lensflare2.addElement( new THREE.LensflareElement( textureFlare0, 512, 0 ) );
	lensflare2.position.copy(light2.position);
	light2.add( lensflare2 );
	scene.add(light2);

	var light3 = new THREE.PointLight( '#f1b018', 1.5, 100 );
	light3.position.set(0,0,0);
	var lensflare3 = new THREE.Lensflare();
	lensflare3.addElement( new THREE.LensflareElement( textureFlare0, 512, 0 ) );
	lensflare3.position.copy(light3.position);
	light3.add( lensflare3 );
	scene.add(light3);

    //创建一个物体    正方体+材质
    for(var i = 0 ; i < 800 ; i++){
        var length = rand(4,9);
        var cube = new THREE.Mesh(
            new THREE.CubeGeometry(length,length,length),
            new THREE.MeshLambertMaterial({color:0xffffff})
            )
        //设置物体的位置
        cube.position.x=rand(-200,200);
        cube.position.y=rand(-200,200);
        cube.position.z=rand(-200,200);
        //为物体添加旋转
        var deg = rand(0,9);
        cube.rotation.x += deg;
        cube.rotation.y += deg;
        cube.rotation.z += deg;
        //将物体添加至场景
        scene.add(cube);
    }
    
    //创建一个相机    PerspectiveCamera透视相机   参数：视角，纵横比，进平面的距离，远平面的距离
    var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,3000);
    //设置相机的位置
    camera.position.x=20;
    camera.position.y=20;
    camera.position.z=200;

    //通过修改照相机的位置来实现画面旋转的效果
    var deg = 0;
    var offsetX = -1;
    fwhf.onmousemove = function(e){
        var e = e || event;
        offsetX = e.offsetX;
    }
    var animate = function () {
        requestAnimationFrame( animate );
        if(offsetX > 0){
            if(offsetX > window.innerWidth/2+100){
                deg += 0.01;
            }else if(offsetX < window.innerWidth/2-100){
                deg += -0.01;
            }else{
                deg += 0;
            }
        }
        //实现沿Y轴旋转的效果，可将Y轴忽略看作是照相机在x与z轴所在的平面内的圆周运动
        camera.position.x = 20*Math.sin(deg)- 200*Math.cos(deg);
        camera.position.z = 200*Math.sin(deg) + 20*Math.cos(deg);
        camera.lookAt(scene.position);
        renderer.render( scene, camera );
    };

    animate();

    function rand(n,m){
        var c = m - n + 1;
        return Math.floor(Math.random() * c + n);
    }
</script>
</body>
</html>

静态效果图如下
在这里插入图片描述

风舞红枫

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
three.js从入门到放弃（四）

接下来我们为光源添加一些纹理，让其更炫一点<!DOCTYPE html><html><head> <title>three.js初探</title> <script type="text/javascript" src="three.js"></script> <script type="text/javascript" src="Lensflare.js"></script&
复制链接

扫一扫