webgl学习笔记(一)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/three.min.js"></script>
    <script id="shader-vs"> // 全拼 vertext shader
            attribute vec3 v3Positon;  //输入变量
        void main(void)  //负责处理顶点
            {
                gl_Position =  vec4(v3Positon,1.0); //内置变量
            }
    </script>
    <script id="shader-fs">  // webgl中是fragment shader   DirectX中称为PX;
        void main(void)  //负责绘色
        {
            gl_FragColor = vec4(1.0,1.0,1.0,1.0); //绘制颜色
        }
    </script>
    <script>
        function getShaderSource(scriptId) {
            var shaderScript = document.getElementById(scriptId);
            if(shaderScript == null) return "";
            var sourceCode = "";
            var child = shaderScript.firstChild;
            while (child){
                    if(child.nodeType == child.TEXT_NODE) sourceCode += child.textContent;
                    child= child.nextSibling;
            }
            return sourceCode;
        }
        var webgl = null;
        var vertexShaderObj = null;
        var fragmentShaderObj = null;
        var programObject = null;
        var triangleBuffer = null;
        var v3PositionIndex=0;
        function Init() {
            var canvas= document.getElementById("myCanvas");
            webgl = canvas.getContext("webgl");  //获取webgl上下文
            webgl.viewport(0,0,canvas.clientWidth,canvas.clientHeight);//设置视图大小


            vertexShaderObj = webgl.createShader(webgl.VERTEX_SHADER);  //创建顶点shader
            fragmentShaderObj = webgl.createShader(webgl.FRAGMENT_SHADER); // 创建fragmentShader

            webgl.shaderSource(vertexShaderObj,getShaderSource("shader-vs"));  //指定数据原
            webgl.shaderSource(fragmentShaderObj,getShaderSource("shader-fs"));// 指定数据源

            webgl.compileShader(vertexShaderObj);  //编译上述代码为显卡可以识别的二进制或者汇编语言
            webgl.compileShader(fragmentShaderObj);

            if(!webgl.getShaderParameter(vertexShaderObj,webgl.COMPILE_STATUS)){  //获取编译参数状态,如果错误返回
                alert("error:vertexShaderObj");
                return;
            }
            if(!webgl.getShaderParameter(fragmentShaderObj,webgl.COMPILE_STATUS)){
                alert("error:fragmentShaderObj");
                return;
            }

            programObject   = webgl.createProgram();  //创建程序

            webgl.attachShader(programObject, vertexShaderObj);//将上面两个编译代码导入程序中
            webgl.attachShader(programObject, fragmentShaderObj);

            webgl.bindAttribLocation(programObject,v3PositionIndex,"v3Position");
            //参数说明:bindAttribLocation指的是上面"shader-vs"中attribute,v3PositionIndex指的是索引,v3Positon指的是上面相应的变量
            //bind之后通过给索引赋值,给v3Position赋值

            webgl.linkProgram(programObject);  //链接将程序,形成可执行体
            if(!webgl.getProgramParameter(programObject,webgl.LINK_STATUS)){    //链接程序处理
                alert("error:programObject");
                return;
            }

            webgl.useProgram(programObject); //使用程序

            var jsArrayData = [
                    0.0,1.0,0.0, //上顶点
                    -1.0,-1.0,0.0,//左顶点
                    1.0,-1.0,0.0//右定点
            ];

            //将应用程序的参数传到显卡中,首先在显卡中创建缓冲区
            triangleBuffer = webgl.createBuffer();
            webgl.bindBuffer(webgl.ARRAY_BUFFER,triangleBuffer);//指定缓冲区对象的类型
            webgl.bufferData(webgl.ARRAY_BUFFER,new Float32Array(jsArrayData),webgl.STATIC_DRAW);//将应用数据传到显卡中(webgl.STATIC_DRAW指参数是静态的)

            webgl.clearColor(0.0,0.0,0.0,1.0); //请颜色 背景
            webgl.clear(webgl.COLOR_BUFFER_BIT);

            webgl.bindBuffer(webgl.ARRAY_BUFFER,triangleBuffer);  //使用缓冲区

            webgl.enableVertexAttribArray(v3PositionIndex); //绑定启用,需要给顶点赋值(对应上面的v3PositionIndex变量)

            webgl.vertexAttribPointer(v3PositionIndex,3,webgl.FLOAT,false,0,0);
            //变量赋值,参数说明:1.属性变量attribute变量名称,2.这里是三维,3.变量类型浮点,4.是否规格化,
            // 5.变量之间的间隔。6.指顶点缓冲区的取值位置,如果是0的话,参数v3PositionIndex就是指jsArrayData

            webgl.drawArrays(webgl.TRIANGLES,0,3);  //执行绘画,三角形,从第0个开始绘制,绘制三个

        }
    </script>
</head>
<body οnlοad="Init()">
<canvas id="myCanvas" style="border: 1px solid red;" width="600" height="600"></canvas>
</body>
</html>
最后效果图如下:


                
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,我会为您解答关于WebGL three.js的阴影与实现物体动画的问题。首先,让我们来了解一下WebGL three.js是什么。 WebGL three.js是一款基于WebGL的JavaScript 3D库,可以帮助我们快速搭建3D场景和应用。接下来我们来讲解阴影和实现物体动画的方法。 一、阴影 阴影是模拟物体之间的阴影效果,让3D场景更加真实。在three.js中,我们可以通过设置Mesh的castShadow和receiveShadow属性来实现阴影效果。 1. 首先,我们需要在场景中添加光源,例如SpotLight或DirectionalLight。 2. 然后,在需要投射阴影的物体上设置castShadow为true。 3. 最后,在需要接收阴影的物体上设置receiveShadow为true。 代码示例: ```javascript // 添加光源 const light = new THREE.SpotLight(0xffffff); light.position.set(0, 100, 0); light.castShadow = true; scene.add(light); // 添加需要投射阴影的物体 const cube = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshLambertMaterial({ color: 0xff0000 })); cube.castShadow = true; scene.add(cube); // 添加需要接收阴影的物体 const plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200, 1, 1), new THREE.MeshLambertMaterial({ color: 0xffffff })); plane.receiveShadow = true; plane.rotation.x = -Math.PI / 2; scene.add(plane); ``` 二、物体动画 在three.js中,我们可以通过Tween.js库来实现物体的动画效果。Tween.js是一款JavaScript动画库,可以帮助我们实现非常丰富的动画效果。 1. 首先,我们需要在HTML文件中引入Tween.js库文件。 2. 然后,在需要动画的物体上设置初始状态。 3. 最后,通过Tween.js库来设置物体的目标状态和动画效果,例如缓动动画(ease)或弹跳动画(bounce)。 代码示例: ```javascript // 引入Tween.js库文件 <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.min.js"></script> // 添加需要动画的物体 const cube = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshLambertMaterial({ color: 0xff0000 })); cube.position.set(0, 0, 0); scene.add(cube); // 设置初始状态 const start = { x: 0, y: 0, z: 0 }; // 设置目标状态 const end = { x: 50, y: 50, z: 50 }; // 设置动画效果 const tween = new TWEEN.Tween(start) .to(end, 1000) .easing(TWEEN.Easing.Quadratic.InOut) .onUpdate(() => { cube.position.set(start.x, start.y, start.z); }) .start(); ``` 以上是关于WebGL three.js阴影与实现物体动画的方法,希望能够对您有所帮助。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值