light demo

最新推荐文章于 2023-05-02 09:28:07 发布

寒江孤影江湖故人GP

最新推荐文章于 2023-05-02 09:28:07 发布

阅读量309

点赞数

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

本文链接：https://blog.csdn.net/lpy9999/article/details/89711722

版权

webgl 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

lightmaterial.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Light&Material</title>
        <style type="text/css">
            #scr{
                width: 300px;
                height: 300px;
                margin: 20px;
                border:2px solid black;
            }
            #wor{
                width: 800px;
                height: 800px;
                margin: 20px;
                border:2px solid black;
            }
            #com{
                width: 500px;
                height:500px;
                margin: 10px;
                border:2px solid black;
            }
            
        </style>
        <script src="cuon-utils.js"></script>
        <script src="webgl-debug.js"></script>
        <script src="webgl-utils.js"></script>
        <script src="three.js"></script>
        <script src="OrbitControls.js"></script>
        <script src="spin.js"></script>
        <script src="ThreeBSP.js"></script>
        <script src="minMatrix.js"></script>
        <script src="reshape.js"></script>
        <script src="three.min.js"></script>
        <script src="OBJLoader.js"></script>
        <script src="OrbitControls.js"></script>
        <script src="stats.min.js"></script>
        <script src="dat.gui.min.js"></script>
        <!-- <script id="vs" type="x-shader/x-vertex">
            attribute vec3 position;
            uniform mat4 mvpMatrix;
             
            void main(void){
                gl_Position = mvpMatrix * vec4(position, 1.0);
            }
        </script>    
        <script id="fs" type="x-shader/x-fragment">
            void main(void){
                gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
            } 
           
        </script>-->
            
    </head>
</html>

<body onload="main()">
        
    <!-- <div id="scr">

    </div > -->

    <div id="wor">
       
    </div >

</body>

reshape.js

//************************************************************************************************** */
// //通过getElementById()方法获取canvas画布
//       // HelloPoint1.js (c) 2012 matsuda
// // Vertex shader program
// var VSHADER_SOURCE = 
// 'void main() {\n' +
// '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
// '  gl_PointSize = 10.0;\n' +                    // Set the point size
// '}\n';

// // Fragment shader program
// var FSHADER_SOURCE =
// 'void main() {\n' +
// '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
// '}\n';

// function main() {
// // Retrieve <canvas> element
// var canvas = document.getElementById('screen');

// // Get the rendering context for WebGL
// var gl = getWebGLContext(canvas);
// if (!gl) {
//   console.log('Failed to get the rendering context for WebGL');
//   return;
// }

// // Initialize shaders
// if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
//   console.log('Failed to intialize shaders.');
//   return;
// }

// // Specify the color for clearing <canvas>
// //gl.clearColor(0.0, 0.0, 0.0, 1.0);

// // Clear <canvas>
// gl.clear(gl.COLOR_BUFFER_BIT);

// // Draw a point
// gl.drawArrays(gl.POINTS, 0, 1);
// }
//****************************************************************************************** */

function gasket(){
  var b=document.getElementById("scr");
  var width= b.clientWidth;
  var height= b.clientHeight;
  
  var scene=new THREE.Scene();//场景

  // //模型（几何 材质）
  // var shape=new THREE.Shape();
  // shape.arc(0,0,320,0,2*Math.PI);
  // var cicle=new THREE.Path();
  // cicle.arc(0,0,140,0,2*Math.PI);
  // shape.holes.push(cicle);
  
  var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
  //var gasket=new THREE.ExtrudeGeometry(geometry,extrudeSettings);
  var material = new THREE.MeshBasicMaterial({ 
    color: 0x6633FF,
    transparent:true,
    opacity:1,
    shininess:20
  
    });
  var torus = new THREE.Mesh( geometry, material );
  scene.add(torus);

  // //amount圈的数量,bevelSize内径与外径宽度，bevelThickness同amount,curveSegments组成的个数
  // var extrudeSettings = { amount: 40, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1,curveSegments:100};
  // var gasket=new THREE.ExtrudeGeometry(shape,extrudeSettings);
  // var material=new THREE.MeshPhongMaterial({
  //     color:0x4499ff,
  //     transparent:true,
  //     opacity:1,
  //     specular:0x4499ff,//金属
  //     //specular:0x222222,//塑料

  //     shininess:20
  //   });
  // var mesh=new THREE.Mesh(gasket,material);
  // scene.add(mesh);
  // //模型（几何 材质）

  // //灯光
  // var point=new THREE.PointLight(0xdddddd);//浅灰
  // point.position.set(400,200,300);
  // scene.add(point);

  // var point1=new THREE.PointLight(0x888888);//深灰
  // point1.position.set(-400,200,300);
  // scene.add(point1);
  // //灯光

  // var ambient=new THREE.AmbientLight(0x888888);//深灰
  // scene.add(ambient);

    //  //点光源
    //    var point=new THREE.PointLight(0xffffff);
    //    point.position.set(400,200,300);//点光源位置
    //    scene.add(point);//点光源添加到场景中
    //   //环境光
    //    var ambient=new THREE.AmbientLight(0x444444);
    //    scene.add(ambient);
    //    var direction = new THREE.DirectionalLight(0xffffff);
    //    scene.add(direction);

  //照相机
  var k=20;
  var camera=new THREE.OrthographicCamera(-width/k,width/k,height/k,-height/k,1,1000);
  camera.position.set(0,0,400);
  camera.lookAt(scene.position);
  //照相机

  //渲染器设置
  var renderer=new THREE.WebGLRenderer();
  renderer.setSize(width, height);
  renderer.setClearColor(0x3d3d3d,1);//背景色，深灰
  b.appendChild(renderer.domElement);
  //渲染器设置

  //设置渲染函数
  function render(){
      renderer.render(scene,camera);
  }
  //执行渲染器

  //调用渲染函数
  render();
  //调用渲染函数

  //鼠标缩放滚转零件,轨道控制器OrbitControls
  var controls=new THREE.OrbitControls(camera);
  controls.addEventListener('change', render);

}

寒江孤影江湖故人GP

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
light demo

lightmaterial.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>Light&Material</title> <style type="te...
复制链接

扫一扫