webgl学习系列--2 初识three.js

最新推荐文章于 2022-07-08 08:51:10 发布

A873054267

最新推荐文章于 2022-07-08 08:51:10 发布

阅读量181

点赞数 1

分类专栏： webgl

本文链接：https://blog.csdn.net/A873054267/article/details/90573247

版权

webgl 专栏收录该内容

35 篇文章 8 订阅

订阅专栏

依据第一节的原理，可以看出基于three.js的三维与纯webgl的逻辑大致是相同的，但是three.js帮我们省去了很多工作，这就是框架的意义。

构建顺序：

获取canvas元素；

创建three渲染器

创建三维场景

设置画图区域及容器大小。

创建相机、光源、纹理

渲染场景，加载下一帧。

requestAnimationFrame()函数目前还不能理解，将此函数放在onload中，反复刷新网页，

会发现贴图交替变换，刷新的越快，有可能会前后两次不变（与电脑刷新频率有关）,在控制台加上一句打印之后，发现这个run函数在无限循环执行，此后的动画效果应该也是这么做的。

<!DOCTYPE html>
<html>
<head>
<title>Welcome to WebGL</title>
   <script src="../libs/Three.js"></script>
   <script>
   
   var renderer = null, 
      scene = null, 
      camera = null,
      cube = null,
      animating = false;
   
   function onLoad()
   {
      //获取canvas元素
        var container = document.getElementById("container");

        // 创建three.js渲染器
       renderer = new THREE.WebGLRenderer( { antialias: true } );
       //设置画图的大小为容器的大小，并将渲染器追加到元素中
       renderer.setSize(container.offsetWidth, container.offsetHeight);
       container.appendChild( renderer.domElement );

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

       // 创建相机，设置相机的位置
        camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 4000 );
        camera.position.set( 0, 0, 3 );

        // 创建一个光源，光源的位置放在相机的正上方
      var light = new THREE.DirectionalLight( 0xffffff, 1.5);
      light.position.set(0, 0, 1);
      scene.add( light );


        // 创建一个纹理
        var mapUrl = "../images/molumen_small_funny_angry_monster.jpg";
        var map = THREE.ImageUtils.loadTexture(mapUrl);
        
        // 将纹理赋值给材质
        var material = new THREE.MeshPhongMaterial({ map: map });

        // 创建立方体
        var geometry = new THREE.CubeGeometry(1, 1, 1);

        // 将几何体和材质放到一个网格中
        cube = new THREE.Mesh(geometry, material);

        // 设置网格的朝向，否则看不到立方体的形状
        cube.rotation.x = Math.PI / 5;
       cube.rotation.y = Math.PI / 5;

        // 将三维模型添加到场景之中
        scene.add( cube );

        // Run our render loop
        run();
   }

   function run()
   {
     //渲染场景
      renderer.render( scene, camera );

console.log("xr")

      // 请求下一帧，此函数为h5的知识，不属于webgl范畴，可以去了解一下。
       requestAnimationFrame(run);    
   }


   </script>

</head>
<body onLoad="onLoad();" style="">
   <h1>Welcome to WebGL!</h1>
    <div id="container" style="width:95%; height:80%; position:absolute;"></div>
   <div id="prompt" style="width:95%; height:6%; bottom:0; text-align:center; position:absolute;">Click to animate the cube</div>

</body>
</html>

A873054267

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webgl学习系列--2 初识three.js

依据第一节的原理，可以看出基于three.js的三维与纯webgl的逻辑大致是相同的，但是three.js帮我们省去了很多工作，这就是框架的意义。构建顺序：获取canvas元素；创建three渲染器创建三维场景设置画图区域及容器大小。创建相机、光源、纹理渲染场景，加载下一帧。requestAnimationFrame()函数目前还不能理解，将此函数放在onload中...
复制链接

扫一扫

专栏目录