Webgl(一)three入门篇

最新推荐文章于 2025-06-20 13:29:21 发布

风痕依旧

最新推荐文章于 2025-06-20 13:29:21 发布

阅读量311

点赞数

CC 4.0 BY-SA版权

分类专栏： Webgl 文章标签： webgl

本文链接：https://blog.youkuaiyun.com/qq_29507011/article/details/103040766

Webgl 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍使用three.js在浏览器中渲染3D物体的过程，包括创建相机、场景和渲染器，以及如何实现线和几何体的创建。同时，文章还介绍了如何添加动画效果和阴影，为3D场景增添真实感。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在浏览器使用three.js 显示物体需要以下几步：
创建相机创建场景（物体容器）渲染(添加相机和场景)
1 创建相机
相机分两种正交相机（物体大小不变）透视相机（距离近的大，距离远的小）
position 设置相机位置
lookAt 设置相机观察点

/*相机透视相机与正交相机，透视相机距离远小，距离近大，最后两个参数都是可见范围，倒数第二为近范围*/
        /*camera = new THREE.PerspectiveCamera( 510, window.innerWidth / window.innerHeight, 0.01, 10 );
        */
        camera = new THREE.OrthographicCamera(-111, 111, 111, -111, -100, 500);
        camera.position.z = 55
        camera.position.x = 55
        camera.position.y = 55
        camera.lookAt(zeroPoint);

2 创建场景

scene = new THREE.Scene();

场景是容器，用于装物体
物体的创建分两种，一种是线，一种是几何体
线的创建分两步
一步是创建起点和终点
二获取点集
三创建几何体
四将点集添加到几何体
五创建材质
六组合物体

var splineX = new THREE.CatmullRomCurve3([
        new THREE.Vector3(111, 0, 0),
        new THREE.Vector3(0, 0, 0),
        ]);
        pointsX = splineX.getPoints(20);
        function objectline(points,linewidth)
    {
        var geometry = new THREE.Geometry()
        geometry.vertices = points
        var material = new THREE.LineBasicMaterial(
        {
            color:0xffffff,
            linewidth: linewidth,
        }
        )
        return new THREE.Line(geometry,material)
    }

创建几何体分两步
一创建几何体
二创建材质
三组合物体

function objectsphere()
    {
        /*第一个参数半径,第二个参数与第三个参数是多边形数量，越多越圆*/
        var geometry = new THREE.SphereGeometry(20, 33, 33)
        var material = new THREE.MeshBasicMaterial( { wireframe:true,color: 0x0fffff } )
        return new THREE.Mesh(geometry,material)
    }

3 渲染
渲染分三步
一创建渲染器
二设置渲染器大小
三将渲染器添加到某个元素
四将相机和物体放入渲染器中渲染

		renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.shadowMap.enabled = true;
        document.body.appendChild( renderer.domElement );
        renderer.render( scene, camera );

动画效果递归死循环函数根据渲染频率自动刷新，刷新后需要重新渲染相机和场景,可以将旋转，平移等放入渲染器中，显示动画效果

function animate() {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }

阴影

		//告诉平行光需要开启阴影投射
        directionalLight.castShadow = true;
        //告诉渲染器开启阴影
        renderer.shadowMap.enabled = true;
        //告诉地面开启阴影
        ground.receiveShadow = true;
        //告诉几何体开启阴影
        meshsphere.castShadow = true;