three.js入门3

Posted 2020-08-16 缘琪梦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了three.js入门3相关的知识，希望对你有一定的参考价值。

为什么要用three.js

Three.js为我们封装了底层的WebGl接口，使我们在无需掌握繁冗的图形学知识的基础下可以轻松的创建三维场景。相比较使用底层的WebGL我们可以使用更少的代码，大大的降低了学习成本，使开发变的更高效。

新建html页面

首先新建一个HTML页面，引入Three.js文件。

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="UTF-8"> 
        <title>three.js</title> 
    </head> 
    <body> 
        <script type="text/javascript" src="js/Three/three.js"></script> 
        <script> 
          
        </script> 
    </body> 
  
</html>

创建一个三维场景

  var scene = new THREE.Scene();

添加一个渲染器

Three.js为我们提供了如：canvas,SVG,CSS3..众多渲染器，但是WebGL渲染器相较比较灵活，所以均以WebGL为例。

    var render = new THREE. THREE.WebGLRenderer({  
                    //抗锯齿属性，WebGLRenderer常用的一个属性
                    antialias: true  
                });  
                
        //设置背景色为白色(0xffffff)
        render.setClearColor(0xffffff);  
        
        //设置渲染尺寸为页面大小
        render.setSize(window.innerWidth, window.innerHeight); 
        
        //使用WebGLRenderer生成canvas元素。
        document.body.appendChild(render.domElement);

当然也可以自己定义一个canvas

canvas <canvas id="myCanvas" width="400px" height="300px" ></canvas>

并将WebGLRenderer定义改为

var render = new THREE.WebGLRenderer({
canvas: document.getElementById(‘myCanvas‘),
antialias: true
});

三维场景中重要的组件

三维场景中重要的组件包括 camera,light,object。

three.js使用的右手坐标系。

技术分享

camera

camera(相机)，决定了你开始看到三维场景的位置，朝向和角度等信息。

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);  
   
       //设置相机朝向位置为(20,0,20) 
        camera.lookAt(new THREE.Vector3(20, 0, 20));

light

light(光源)，决定了你的场景拥有的光源类型和会产生的光照效果。

    var light = new THREE.AmbientLight(0xffffff);
    
        //使用 Scene()的add方法将light添加到Scene中  
        scene.add(light);

object

object(物体)，你想要添加到场景中的各式各样的物体。

    //物体三维图形
    var geometry = new THREE.CubeGeometry(4, 4, 4); 
    
    //物体材质 
    var material = new THREE.MeshBasicMaterial({  
                    color: 0x4d6dad  
                });  
                
    //生成三维物体
    var mesh = new THREE.Mesh(geometry, material);  
    
        mesh.position.set(10, 0, 10);  
        
        //使用 Scene()的add方法将mesh添加到Scene中
        scene.add(mesh);

渲染场景

定时刷新场景，调用WebGLRenderer的render函数刷新场景。

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

添加动画

我们可以通过在render()函数中对object(物体)的position(位置)，rotation(旋转)和scale(缩放)属性进行控制来实现简单地动画效果。渲染的FPS为60，也就意味着一秒钟会变化60次。

   mesh.rotation.y += Math.PI / 180 * 1;

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>three-basic</title>
        <style>
            body {
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>

    <body>
        <script type="text/javascript" src="libs/three.js"></script>
        <script>
            var scene, renderer, camera, mesh;
            function init() {
                scene = new THREE.Scene();
                renderer = new THREE.WebGLRenderer({
                    antialias: true
                });
                renderer.setClearColor(0xffffff);
                renderer.setSize(window.innerWidth, window.innerHeight);
                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
                camera.lookAt(new THREE.Vector3(20, 0, 20));
                var light = new THREE.AmbientLight(0xffffff);
                scene.add(light);
                var geometry = new THREE.CubeGeometry(4, 4, 4);
                var material = new THREE.MeshBasicMaterial({
                    color: 0x4d6dad
                });
                mesh = new THREE.Mesh(geometry, material);
                mesh.position.set(10, 0, 10);
                scene.add(mesh);
                document.body.appendChild(renderer.domElement);
                render();
            }
            function render() {
                mesh.rotation.y += Math.PI / 180 * 1;
                renderer.render(scene, camera);
                requestAnimationFrame(render);
            }
            init();
        </script>
        <script type="text/javascript" src="../js/cjy_info.js"></script>
    </body>

</html>

技术分享

原文https://chenjy1225.github.io/2016/08/08/three-js-basic/

以上是关于three.js入门3的主要内容，如果未能解决你的问题，请参考以下文章

There.js入门系列之React中使用Three.js

three.js入门系列之材质

Hello Three.js and TypeScript

webGL之three.js入门3--材料篇

Three.js 中的自定义纹理着色器

three.js - (入门二)