Three.JS 发光球体,材质纹理,缩放移动动画,教程

最新推荐文章于 2024-05-27 09:11:29 发布

燕大溜

最新推荐文章于 2024-05-27 09:11:29 发布

阅读量5.9k

点赞数 3

文章标签： Three.js Threejs Three

本文链接：https://blog.csdn.net/sinat_30352293/article/details/78331293

版权

一开始接触Three.js是非常蒙的，结合网上的一些教程以及自身对3dmax的一点点了解，开始了Three.js的探索。

注：引用的是three.min.js

发光球体的辉光效果

//导入纹理
var texture = THREE.ImageUtils.loadTexture('mt4.png', {}, function () {//引入图片为mt4.png，该图片是半透明的，类似辉光效果
    renderer.render(scene, camera);
});
var material = new THREE.MeshLambertMaterial({//设置texture纹理
    map: texture,
    material: 0.5,//透明度 取值0-1；
    transparent: true,//设置是否为透明
});

//设置球3，该球效果是辉光效果
var sphere3 = new THREE.Mesh(new THREE.SphereGeometry(5, 110, 140),//半径是5,多边形拟合数,多边形拟合数
    material);//引入上面声明的材质
sphere3.position.set(0, 0, 10);//球心的坐标位置
var pivotPoint = new THREE.Object3D();//3d效果
sphere3.add(pivotPoint);//向球球3 添加3d效果
scene.add(sphere3);//添加到场景中

//设置球4
var sphere4 = new THREE.Mesh(new THREE.SphereGeometry(4, 40, 20),//半径是4,多边形拟合数,多边形拟合数
    new THREE.MeshLambertMaterial({//改材质是自发光球体，没有阴影的白色球体
        emissive: 0xffffff,
    }));
sphere4.overdraw = true;//这个没啥用
sphere4.position.set(0, 0, 10);//球心的坐标位置，和上一个球的位置一样，
scene.add(sphere4);//添加到场景中

设置相机的位置：
camera.position.z = 80;//设置相机位置，x=0 y=0 z=80
camera.lookAt(scene.position);
document.body.appendChild(renderer.domElement);

缩放、移动动画：

render();

var i = 1;//动画判断参数

function render() {
    //动画变大缩小
    if (i < 100) {
        sphere3.scale.x += 0.001;//球球3的x,y,z宽度统统增加
        sphere3.scale.y += 0.001;
        sphere3.scale.z += 0.001;
     
    } else if (i < 200) {
        sphere3.scale.x -= 0.001;//当到了200的时候，缩小，免得变得越来越大
        sphere3.scale.y -= 0.001;
        sphere3.scale.z -= 0.001;
    } else i = 0;
    i++;

	sphere3.position.x += 0.01;//球球3的x坐标增加，可以实现平移效果

    renderer.render(scene, camera);//渲染场景
    requestAnimationFrame(render);//回到render方法重新渲染，得以实现上面的动画效果
}

接下来是完整代码（如需运行，需要three.min.js，和mt4.png 材质纹理图片）（←可以直接下载这张图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>燕小溜的教程</title>
    <script src="three.min.js"></script>
    <style>
        body {
            background: #000;
        }

        a {
            color: #fff;
        }
    </style>
</head>
</head>
<a href="http://blog.csdn.net/yangnianbing110/article/details/51306653">http://blog.csdn.net/yangnianbing110/article/details/51306653</a><br>
<body>
<script type="text/javascript">
    var scene = new THREE.Scene();
    //    scene.fog=new THREE.Fog(0xffffff,0.045,100);//启用场景雾化

    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0x000000, 1.0);//设置背景是黑的
    renderer.setSize(window.innerWidth, window.innerHeight);

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);//眼镜(相机)的视野大小设置

    //点光源
    var light = new THREE.DirectionalLight();
    light.position.set(0, 0, 80);//点光源位置，注意：这里与相机的位置是一致的
    scene.add(light);

    //导入纹理
    var texture = THREE.ImageUtils.loadTexture('mt4.png', {}, function () {//引入图片为mt4.png，该图片是半透明的，类似辉光效果
        renderer.render(scene, camera);
    });
    var material = new THREE.MeshLambertMaterial({//设置texture纹理
        map: texture,
        material: 0.5,//透明度 取值0-1；
        transparent: true,//设置是否为透明
    });

    //设置球3，该球效果是辉光效果
    var sphere3 = new THREE.Mesh(new THREE.SphereGeometry(5, 110, 140),//半径是5,多边形拟合数,多边形拟合数
        material);//引入上面声明的材质
    sphere3.position.set(0, 0, 10);//球心的坐标位置
    var pivotPoint = new THREE.Object3D();//3d效果
    sphere3.add(pivotPoint);//向球球3 添加3d效果
    scene.add(sphere3);

    //设置球4
    var sphere4 = new THREE.Mesh(new THREE.SphereGeometry(4, 40, 20),//半径是4,多边形拟合数,多边形拟合数
        new THREE.MeshLambertMaterial({//改材质是自发光球体，没有阴影的白色球体
            emissive: 0xffffff,
        }));
    sphere4.overdraw = true;//这个没啥用
    sphere4.position.set(0, 0, 10);//球心的坐标位置，和上一个球的位置一样，
    scene.add(sphere4);


    camera.position.z = 80;//设置相机位置，x=0 y=0 z=80
    camera.lookAt(scene.position);
    document.body.appendChild(renderer.domElement);

    render();

    var i = 1;//动画判断参数

    function render() {
        //动画变大缩小
        if (i < 100) {
            sphere3.scale.x += 0.001;
            sphere3.scale.y += 0.001;
            sphere3.scale.z += 0.001;
            sphere4.scale.x += 0.001;
            sphere4.scale.y += 0.001;
            sphere4.scale.z += 0.001;
        } else if (i < 200) {
            sphere3.scale.x -= 0.001;
            sphere3.scale.y -= 0.001;
            sphere3.scale.z -= 0.001;
            sphere4.scale.x -= 0.001;
            sphere4.scale.y -= 0.001;
            sphere4.scale.z -= 0.001;
        } else i = 0;
        i++;

        renderer.render(scene, camera);//渲染场景
        requestAnimationFrame(render);//回到render方法重新渲染，得以实现上面的动画效果
    }

</script>
<canvas width="1242" height="609" style="width: 1242px; height: 609px;"></canvas>
</body>
</html>

燕大溜

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Three.JS 发光球体,材质纹理,缩放移动动画,教程

一开始接触Three.js是非常蒙的，结合网上的一些教程以及自身对3dmax的一点点了解，开始了Three.js的探索。注：只引入了three.min.js发光球体的辉光效果//导入纹理var texture = THREE.ImageUtils.loadTexture('mt4.png', {}, function () {//引入图片为mt4.png，该图片是
复制链接

扫一扫