代码资源（8-21）

枭飞

于 2022-08-21 18:32:19 发布

阅读量144

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_43955005/article/details/126453871

版权

以下是通过three.js实现plant(平面)物体的渲染，并实现通过四元数旋转相机。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长方体</title>
    <script src="three.js"></script>
    <script src="OrbitControls.js"></script>
    <script type="text/javascript" src="stats.min.js"></script>
    <style>
        #button{

            width:100px;
            
            height: 100px;
            
            background-color: palevioletred;
            
            }
    </style>
</head>

<body>
    <button id ="button" onclick="bu()"  >

    </button>
<canvas id="canvasId" width="640" height="480"></canvas>
    <script>
    
     // 创建场景对象Scene
    var scene = new THREE.Scene();
 
//---------------------------------------------------------------------------------------------------------
    var width = 640; //窗口宽度
    var height = 480; //窗口高度

    var planeGeometry = new THREE.BufferGeometry();
    var vertices = new Float32Array([
    -200, 200, 0, //顶点1坐标
    200,200, 0, //顶点2坐标
    200, -200, 0, //顶点3坐标
    -200,-200, 0, //顶点4坐标
]);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标
// 设置几何体attributes属性的位置属性
planeGeometry.attributes.position = attribue;
    // Uint16Array类型数组创建顶点索引数据
var indexes = new Uint16Array([
// 0对应第1个顶点位置数据、第1个顶点法向量数据
// 1对应第2个顶点位置数据、第2个顶点法向量数据
// 索引值3个为一组，表示一个三角形的3个顶点
0, 1, 2,
0, 2, 3,
])

// 索引数据赋值给几何体的index属性
planeGeometry.index = new THREE.BufferAttribute(indexes, 1); //1个为一组
const uvs = new Uint16Array([
0, 0,
1, 0,
1, 1,
0,1,

]);
//设置UV
planeGeometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));
    var planeTexture = new THREE.TextureLoader().load('t.jpg');
    // 背景材料
    var planeMaterial = new THREE.MeshBasicMaterial({
        map: planeTexture,vertexColors: THREE.VertexColors, //使用缓存中的颜色
        side: THREE.DoubleSide
    });
    // 背景网格
  
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    
    // 将背景添加到场景
    scene.add(plane);
  


    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 camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
 camera.position.set(0, 0, 800); //设置相机位置
 
 camera.useQuaternion = true;
    //-----------------------------------------------------------------------------------------------------------

     //创建渲染器对象
     //renderer = new THREE.WebGLRenderer();
     var renderer = new THREE.WebGLRenderer({canvas:document.getElementById("canvasId")});
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xEEEEEE, 0.0); //设置背景颜色
   //body元素中插入canvas对象
   
    //执行渲染操作   指定场景、相机作为参数


    function render() {
        renderer.render(scene,camera);//执行渲染操作
      }
      
//var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象*/

function bu(){
    var t=[100,100,0];
    var vector = new THREE.Vector3(0,0,1);
    var matrix = new THREE.Matrix4().makeRotationAxis(vector, Math.PI/2)
    const m = new THREE.Matrix4();

    m.elements=[0.27021536231040955, 0.9580873847007751, -0.09514313191175461,0,
    0.9568670392036438, -0.2562824487686157, 0.13683857023715973,0,
    0.10671985149383545, -0.1280152052640915, -0.986013650894165,0,
               0,0,0,1];
    var qm = new THREE.Quaternion().setFromRotationMatrix(m);
   
    //camera.position.set(100,100,400)
camera.applyQuaternion(qm); // Apply Quaternion

    camera.quaternion.normalize()
    console.log(camera.quaternion,matrix)
    render();

}
 render();
      var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
      controls.addEventListener('change', render);//监听鼠标、键盘事件
    </script>
</body>
</html>