webgl入门学习踩坑之路，学习资料分享

最新推荐文章于 2024-05-24 11:41:27 发布

滚动小人人

最新推荐文章于 2024-05-24 11:41:27 发布

阅读量987

点赞数 1

分类专栏： webGL学习文章标签： webGL入门 webGL学习资料 OrbitControls控制模型坑

本文链接：https://blog.csdn.net/WWW_share8/article/details/101444957

版权

webGL学习专栏收录该内容

4 篇文章 11 订阅

订阅专栏

学习资料

1，webGL中文网：http://www.hewebgl.com/article/articledir/1

2 郭隆邦博客：http://www.yanhuangxueyuan.com/WebGL_course.html

3，模型学习

https://threejs.org/examples/#webgl_animation_keyframes，有许多的模型并有代码

最新的代码three，下载方法如下

cnpm install three ，不要通过npm下载，

旧版本的three也能用但当你先使用 OrbitControls去做控制相机时就会报各种未定义和未找到的错误。所以版本一定要使用最新的。

首先，先说一下自己的学习资料来源吧，最开始我是在
http://www.hewebgl.com/article/articledir/1 webGL中文网学完了基础资料，只里面你一定要记住，重点在理论基础和简单的使用。它的一个坑是所使用的three.js本版太低了。

在这一个webGL中，通过学习你就可以了解最基本的webGL中构建3D模型的几个关键点，
3大组件，场景（scene）,相机（camera）,渲染器（renderer）,

引用webGL中文网中基础教程中的场景，相机，渲染器之间的关系，如图

首先我们需要将我们的材料放入场景中，在通过相机将其放入到渲染器中也就是浏览器中。

对于着三者基础代码如下

  //初始化场景
    function initScene() {
        scene = new THREE.Scene()
    }
    //初始化相机
    function initCamera() {
        //透视相机
        //PerspectiveCamera( fov, aspect, near, far )视角，纵横比，近，远
        //正投影
        //OrthographicCamera( left, right, top, bottom, near, far )
        camera = new THREE.PerspectiveCamera(45,  window.innerWidth / window.innerHeight, 0.1, 1000)

        camera.position.x = 600;
        camera.position.y = 500;
        camera.position.z = 600;
        camera.up.x = 0;
        camera.up.y = 1;
        camera.up.z = 0;
        camera.lookAt(0, 0, 0);
    }
//初始化渲染器
    function initRenderer() {
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);//渲染大小
        document.body.appendChild( renderer.domElement );
        renderer.setClearColor(0xFFFFFF, 1.0);//渲染背景颜色
    }

除了这三者之外还有，光线和物体如下

//初始化光线
    function initLight() {
        //环境光
        light = new THREE.AmbientLight(0x00ff00);
        scene.add(light);

        //方向光
        light = new THREE.DirectionalLight(0xff0000, 1);
        light.position.set(0, -150, 500)
        scene.add(light)

        //点光源
        // light = new THREE.PointLight(0xFF0000);
        // light.position.set(0, 0, 25);
        // scene.add(light);

    }
//构建物体
    function initObject() {
        let geometry = new THREE.BoxGeometry(150, 150, 150);//构建一个正方体
        let material = new THREE.MeshLambertMaterial({color: 0xffffff});//材质
        mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(0, 0, 0)
        scene.add(mesh)
    }

在场景中添加到物体和光线，这样就可以产生阴影之类的。

最简单的构建的一个3D 模型的完整代码是

代码是，这个里面使用的是最新的 three和OrbitControls，这个里面添加了鼠标控制摄像机进行转动添加了动画。代码都可以通过 cnpm install three来下载 js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webgl入门</title>
    <script src="./build/three.js" type="text/javascript"></script>
    <script src="./examples/js/controls/OrbitControls.js"></script>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body  onload="main();">
<script>
    let scene, camera, renderer, light, mesh,controls

    //初始化渲染器
    function initRenderer() {
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);//渲染大小
        document.body.appendChild( renderer.domElement );
        renderer.setClearColor(0xFFFFFF, 1.0);//渲染背景颜色
    }

    //初始化相机
    function initCamera() {
        //透视相机
        //PerspectiveCamera( fov, aspect, near, far )视角，纵横比，近，远
        //正投影
        //OrthographicCamera( left, right, top, bottom, near, far )
        camera = new THREE.PerspectiveCamera(45,  window.innerWidth / window.innerHeight, 0.1, 10000)

        camera.position.x = 600;
        camera.position.y = 500;
        camera.position.z = 600;
        camera.up.x = 0;
        camera.up.y = 1;
        camera.up.z = 0;
        camera.lookAt(0, 0, 0);
    }

    //初始化场景
    function initScene() {
        scene = new THREE.Scene()
    }

    //初始化光线
    function initLight() {
        //环境光
        light = new THREE.AmbientLight(0x00ff00);
        scene.add(light);

        //方向光
        light = new THREE.DirectionalLight(0xff0000, 1);
        light.position.set(0, -150, 500)
        scene.add(light)

        //点光源
        // light = new THREE.PointLight(0xFF0000);
        // light.position.set(0, 0, 25);
        // scene.add(light);

    }


    //构建物体
    function initObject() {
        let geometry = new THREE.BoxGeometry(150, 150, 150);//构建一个正方体
        let material = new THREE.MeshLambertMaterial({color: 0xffffff});//材质
        mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(0, 0, 0)
        scene.add(mesh)
    }

    //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
    function initControls() {
        controls = new THREE.OrbitControls( camera, renderer.domElement );

        // 如果使用animate方法时，将此函数删除
        //controls.addEventListener( 'change', render );
        // 使动画循环使用时阻尼或自转 意思是否有惯性
        controls.enableDamping = true;
        //动态阻尼系数 就是鼠标拖拽旋转灵敏度
        //controls.dampingFactor = 0.25;
        //是否可以缩放
        controls.enableZoom = true;
        //是否自动旋转
        controls.autoRotate = true;
        //设置相机距离原点的最远距离
        controls.minDistance  = 200;
        //设置相机距离原点的最远距离
        controls.maxDistance  = 600;
        //是否开启右键拖拽
        controls.enablePan = true;
    }



    function animate() {
         // mesh.rotation.x += 0.01;
         // mesh.rotation.y += 0.01;
        //更新控制器
        controls.update();
        requestAnimationFrame(animate)
        renderer.render(scene, camera)

    }

    function main() {
        initRenderer();//渲染器
        initCamera();//相机
        initScene();//场景
        initLight();//光线
        initObject();//物体
        initControls();
        animate();//动画
    }

</script>


</body>
</html>

滚动小人人

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
webgl入门学习踩坑之路，学习资料分享

学习资料1，webGL中文网：http://www.hewebgl.com/article/articledir/12郭隆邦博客：http://www.yanhuangxueyuan.com/WebGL_course.html3，模型学习https://threejs.org/examples/#webgl_animation_keyframes，有许多的模型并有代码...
复制链接

扫一扫

专栏目录