Three.js简单编程

在这里记录几个常用的threejs的方法，以便以后查找

 //监听鼠标移动拾取物体
    function ray() {
        var Sx = event.clientX;//鼠标单击位置横坐标
        var Sy = event.clientY;//鼠标单击位置纵坐标
        //屏幕坐标转标准设备坐标
        var x = ( Sx / window.innerWidth ) * 2 - 1;//标准设备横坐标
        var y = -( Sy / window.innerHeight ) * 2 + 1;//标准设备纵坐标
        var standardVector  = new THREE.Vector3(x, y, 0.5);//标准设备坐标
        //标准设备坐标转世界坐标
        var worldVector = standardVector.unproject(camera);
        //射线投射方向单位向量(worldVector坐标减相机位置坐标)
        var ray = worldVector.sub(camera.position).normalize();
        //创建射线投射器对象
        var raycaster = new THREE.Raycaster(camera.position, ray);
        //返回射线选中的对象
        var intersects = raycaster.intersectObjects(scene.children);
        if (intersects.length > 0) {
            let mesh3D=intersects[0].object;

            if(mesh3D.type=THREE.Mesh)
            {
                console.log(mesh3D);
            }
        }
    }
    addEventListener('click',ray);// 监听窗口鼠标单击事件

//定义常用方法接口
let interface= {
    // 计算两点间的距离
    calcDistance: function (pos1, pos2) {
        let xDiff = pos1.x - pos2.x;
        let yDiff = pos1.y - pos2.y;
        let zDiff = pos1.z - pos2.z;

        return Math.sqrt(xDiff * xDiff + yDiff * yDiff + zDiff * zDiff);
    },
    //世界坐标转屏幕坐标
    transPosition:function(position){
        let world_vector = new THREE.Vector3(position.x,position.y,position.z);
        let vector =world_vector.project(camera);
        let halfWidth = window.innerWidth / 2,
            halfHeight = window.innerHeight / 2;
        return {
            x: Math.round(vector.x * halfWidth + halfWidth),
            y: Math.round(-vector.y * halfHeight + halfHeight)
        };
    }

}

 //加载json
    var loader = new THREE.ObjectLoader();
    var mesh=[];
    loader.load('./model/model-a2-1.json', function (obj) {
        obj.scale.x = obj.scale.y = obj.scale.z = 0.01;
        mesh.push(obj);
        scene.add(obj);
        obj.castShadow=true;
        obj.rotation.x=-0.5*Math.PI;

    });

//监听窗口大小变化
window.addEventListener('resize', onResize, false); //添加窗口大小监听事件
function onResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}