web3DExample

const scene = new THREE.Scene();

scene.add(xxx);

const group = new THREE.Group();
group.add(yyy);
group.add(zzz);

scene.add(group);

const scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xcccccc, 10, 15 );

const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
//构造函数参数
//fov：视场角，眼睛睁开的角度，即视角大小。如果设置为0，相当于闭上了眼睛，故什么也看不见；如果为180，看以认为视角很广阔。但是在180度时，物体会很小，因为物体在整个可视区域中的比例变小了。
//aspect：视场宽高比，窗口的纵横比，即宽度除以高度。这个值越大，表示宽度越大，那么看的就越宽；否则看的就越窄。（一般用 画布宽/画布 高即可）
//near：能看多近，眼睛距离近处的距离。不可以设置为负值。
//far：能看多远
//这几个参数决定了哪些scene里的三维顶点会被渲染/绘制出来

OrthographicCamera(left,right,top,bottom,near,far)
//left：左平面距离相机中心点的垂直距离。
//right：右平面距离相机中心点的垂直距离。
//top：顶平面距离相机中心点的垂直距离。
//bottom：底平面距离相机中心点的垂直距离。
//near：近平面距离相机中心点的垂直距离。
//far：远平面距离相机中心点的垂直距离。
var camera = new THREE.OrthographicCamera(width/-2,width/2,height/2,height/-2,1,1000);
//将浏览器窗口的高度和宽度作为了视景体的高度和宽度，相机正好在窗口的中心点上

//CubeCamera（near：Number，far：Number，cubeResolution：Number）
//近 - 近裁剪距离。
//远 - 裁剪距离
//cubeResolution - 设置立方体边缘的长度。

//可以通过renderTarget对象获取生成的立方体纹理。
//创建一个获取环境贴图的cubeCamera
cubeCamera = new THREE.CubeCamera(0.1, 1000, 256);
scene.add(cubeCamera);

var camera = new THREE.PerspectiveCamera(45,width/height,1,1000);
//表示相机的位置
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 600;
//表示相机以哪个方向为上方，相当于真实相机的快门朝向
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
//相机看向的坐标，即相机的中心镜头对准哪里
camera,lookAt({
    x:0,
    y:0,
    z:0
});

推导相机朝向方向
相机朝向A(x0,y0,z0),圆点O,AO垂直夹角(纬度lat)y,水平夹角(经度lon)x
x0=r在x轴上投影=r在xz平面投影在x轴上投影=rsin(y)cos(x)
y0=r在y轴上投影=rsin(y)
z0=r在z轴上投影=r在xz平面投影在z轴上投影=rsin(y)sin(x)

lat = Math.max(- 85, Math.min(85, lat));//纬度限制在[-85°,85°]
phi = THREE.Math.degToRad(90 - lat);//与y轴夹角，y轴正方向为90°
theta = THREE.Math.degToRad(lon);//与x轴夹角
//相机旋转
camera.target.x = scene_radius * Math.sin(phi) * Math.cos(theta);//r在x轴上投影=r在xz平面投影在x轴上投影=rsin(y)cos(x)
camera.target.y = scene_radius * Math.cos(phi);//r在y轴上投影=rsin(y)
camera.target.z = scene_radius * Math.sin(phi) * Math.sin(theta);//r在z轴上投影=r在xz平面投影在z轴上投影=rsin(y)sin(x)
camera.lookAt(camera.target);

// 初始化一个加载器
const loader = new THREE.AnimationLoader();

// 加载资源
loader.load(
	// 资源URL
	'animations/animation.js',

	// onLoad回调
	function ( animations ) {
		// animations时一个AnimationClips组数
	},

	// onProgress回调
	function ( xhr ) {
		console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
	},

	// onError回调
	function ( err ) {
		console.log( 'An error happened' );
	}
);

// 初始化一个监听
const audioListener = new THREE.AudioListener();

// 把监听添加到camera
camera.add( audioListener );

// 初始化音频对象
const oceanAmbientSound = new THREE.Audio( audioListener );

// 添加一个音频对象到场景中
scene.add( oceanAmbientSound );

// 初始化一个加载器
const loader = new THREE.AudioLoader();

// 加载资源
loader.load(
	// 资源URL
	'audio/ambient_ocean.ogg',

	// onLoad回调
	function ( audioBuffer ) {
		// 给一个加载器对象设置音频对象的缓存
		oceanAmbientSound.setBuffer( audioBuffer );

		// 播放音频
		oceanAmbientSound.play();
	},

	// onProgress回调
	function ( xhr ) {
		console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
	},

	// onError回调
	function ( err ) {
		console.log( 'An error happened' );
	}
);

// 初始化一个加载器
const loader = new THREE.BufferGeometryLoader();

// 加载资源
loader.load(
	// 资源URL
	'models/json/pressure.json',

	// onLoad回调
	function ( geometry ) {
		const material = new THREE.MeshLambertMaterial( { color: 0xF5F5F5 } );
		const object = new THREE.Mesh( geometry, material );
		scene.add( object );
	},

	// onProgress回调
	function ( xhr ) {
		console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
	},

	// onError回调
	function ( err ) {
		console.log( 'An error happened' );
	}
);

const scene = new THREE.Scene();
scene.background = new THREE.CubeTextureLoader()
	.setPath( 'textures/cubeMaps/' )
	.load( [
				'px.png',
				'nx.png',
				'py.png',
				'ny.png',
				'pz.png',
				'nz.png'
			] );

const loader = new THREE.FileLoader();

//加载一个文本文件，并把结果输出到控制台上
loader.load(
	// resource URL
	'example.txt',

	// onLoad回调
	function ( data ) {
		// output the text to the console
		console.log( data )
	},

	// onProgress回调
	function ( xhr ) {
		console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
	},

	// onError回调
	function ( err ) {
		console.error( 'An error happened' );
	}
);
//必须启用缓存THREE.Cache.enabled = true;

// 初始化一个加载器
const loader = new THREE.ImageBitmapLoader(); 
// set options if needed
loader.setOptions( { imageOrientation: 'flipY' } );
// 加载一个图片资源 
loader.load(
    // 资源的URL
    'textures/skyboxsun25degtest.png',
    // onLoad回调
    function ( imageBitmap ) {
        const texture = new THREE.CanvasTexture( imageBitmap );
        const material = new THREE.MeshBasicMaterial( { map: texture } );
    },
    // 目前暂不支持onProgress的回调 undefined,
    // onError回调
    function ( err ) {
        console.log( 'An error happened' );
    }
);

// 初始化一个加载器
const loader = new THREE.ImageLoader();

// 加载一个图片资源
loader.load(
	// 资源URL
	'textures/skyboxsun25degtest.png',

	// onLoad回调
	function ( image ) {
		// use the image, e.g. draw part of it on a canvas
		const canvas = document.createElement( 'canvas' );
		const context = canvas.getContext( '2d' );
		context.drawImage( image, 100, 100 );
	},

	// 目前暂不支持onProgress的回调
	undefined,

	// onError回调
	function () {
		console.error( 'An error happened.' );
	}
);

// 初始化一个加载器
const loader = new THREE.MaterialLoader();

// 加载资源
loader.load(
	// 资源URL
	'path/to/material.json',

	// onLoad回调
	function ( material ) {
		object.material = material;
	},

	// onProgress回调
	function ( xhr ) {
		console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
	},

	// onError回调
	function ( err ) {
		console.log( 'An error happened' );
	}
);

const loader = new THREE.ObjectLoader();

loader.load(
	// 资源的URL
	"models/json/example.json",

	// onLoad回调
	// Here the loaded data is assumed to be an object
	function ( obj ) {
		// Add the loaded object to the scene
		scene.add( obj );
	},

	// onProgress回调
	function ( xhr ) {
		console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
	},

	// onError回调
	function ( err ) {
		console.error( 'An error happened' );
	}
);


// 或者，解析先前加载的JSON结构
const object = loader.parse( a_json_object );

scene.add( object );

const texture = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );

// 立即使用纹理进行材质创建
const material = new THREE.MeshBasicMaterial( { map: texture } );

// 初始化一个加载器
const loader = new THREE.TextureLoader();

// 加载一个资源
loader.load(
	// 资源URL
	'textures/land_ocean_ice_cloud_2048.jpg',

	// onLoad回调
	function ( texture ) {
		// in this example we create the material when the texture is loaded
		const material = new THREE.MeshBasicMaterial( {
			map: texture
		 } );
	},

	// 目前暂不支持onProgress的回调
	undefined,

	// onError回调
	function ( err ) {
		console.error( 'An error happened.' );
	}
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );

const controls = new OrbitControls( camera, renderer.domElement );

//controls.update() must be called after any manual changes to the camera's transform
camera.position.set( 0, 20, 100 );
controls.update();

function animate() {

    requestAnimationFrame( animate );

    // required if controls.enableDamping or controls.autoRotate are set to true
    controls.update();

    renderer.render( scene, camera );

}

import { DragControls } from 'three/addons/controls/DragControls.js';
const controls = new DragControls( objects, camera, renderer.domElement );

// add event listener to highlight dragged objects
controls.addEventListener( 'dragstart', function ( event ) {
    event.object.material.emissive.set( 0xaaaaaa );
} );

controls.addEventListener( 'dragend', function ( event ) {
    event.object.material.emissive.set( 0x000000 );
} );

import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
const controls = new THREE.FirstPersonControls(camera);
controls.lookSpeed = 0.05;//转换方向的速度
controls.movementSpeed = 100;//移动的速度
controls.lookVertical = false;//禁止了纵向的转动

import { FlyControls } from 'three/addons/controls/FlyControls.js';

import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
const controls = new PointerLockControls( camera, document.body );

controls.maxPolarAngle = Math.PI * 0.5
controls.minPolarAngle = Math.PI * 0.5

// add event listener to show/hide a UI (e.g. the game's menu)
controls.addEventListener( 'lock', function () {
    menu.style.display = 'none';
});

controls.addEventListener( 'unlock', function () {
    menu.style.display = 'block';
});

document.addEventListener('mouseup', () => {
  if (!this.controls.isLocked) {
    this.controls.lock();  // 执行该方法后，鼠标将无法控制，转而控制摄像机的镜头，实现第一人称的操作
  }
});

function updateControls() {
    const time = performance.now();
    // 指针控制器锁定时计算方向和速度
    if (controls.isLocked === true) {

        const delta = (time - prevTime) / 1000;
        
        // 计算每次更新时的速度
        velocity.x -= velocity.x * 10.0 * delta;
        velocity.z -= velocity.z * 10.0 * delta;
        
        // 计算z轴方向数值 1向前，0站立，-1向后
        direction.z = Number(moveForward) - Number(moveBackward);
        
        // 将方向归一化
        direction.normalize(); // this ensures consistent movements in all directions
        
        // 如果按下向前或者向后，计算移动速度
        if (moveForward || moveBackward) velocity.z -= direction.z * 40.0 * delta;
        
        // 角色前后移动方向修改，z如果>0向前移动反之向后移动，如果为0站立
        controls.moveForward(velocity.z * delta);

    }

    prevTime = time;

}

import { TrackballControls } from 'three/addons/controls/TrackballControls.js';

import { TransformControls } from 'three/addons/controls/TransformControls.js';

var point1 = new THREE.Vector3(2,3,4);
//第二种方法
var point1 = new THREE.Vector3();
point1.set(1,2,3);

var geometry = new THREE.BufferGeometry();  //声明一个几何体
var material = new THREE.LineBasicMaterial({vertexColors:true});  //定义线条的材质
//定义两种颜色，分别表示线条两个端点的颜色
var color1 = new THREE.Color(0x444444),color2 = new THREE.Color(0xFF0000);

//线的材质可以由两点的颜色决定
//定义两个顶点的位置，并放在几何体重
var p1 = new THREE.Vector3(-100,0,100);
var p2 = new THREE.Vector3(100,0,-100);
geometry.vertices.push(p1,p2);
//geometry.vertices.push(p2);
geometry.colors.push(color1,color2); //为物体添加颜色

//定义一条线
var line = new THREE.Line(geometry,material,THREE.LineSegments);
scene.add(line);

function addMesh(){
    let texture = new THREE.TextureLoader().load('./sprite.png'); //读取精灵图(其实就是一张png,jpg图片)

    //创建精灵材质
    let spriteMaterial = new THREE.SpriteMaterial({
        map:texture
    });

    //创建精灵
    let sprite = new THREE.Sprite(spriteMaterial);

    // sprite.scale.setScalar(0.1); // scale仅有x和y对sprite生效，scale.z对sprite无效
    // sprite.position.z += 5;
    
    //将精灵添加到场景
    scene.add(sprite);
}

var camera,scene,renderer;
var mesh;
init();
animate();

function init(){
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(70,window.innerHeight/window.innerHeight,1,1000);
    camera.position.z = 400;
    scene = new THREE.Scene

    //x轴宽，y轴高，x轴分段数，y轴分段数
    var geometry = new THREE.PlaneGeometry(500,300,1,1);
    geometry.vertices[0].uv = new THREE.Vector2(0,0);
    geometry.vertices[1].uv = new THREE.Vector2(2,0);
    geometry.vertices[2].uv = new THREE.Vector2(2,2);
    geometry.vertices[3].uv = new THREE.Vector2(0,2);

    var texture = THREE.ImageUtils.loadTexture("index2.jpg",null,function(t){

    });

    var material = new THREE.MeshBasicMaterial({map:texture});
    var mesh = new THREE.Mesh(geometry,material);
    scene.add(mesh);

    window.addEventListener('resize',onwindowResize,false);
}

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

//radius — 圆的半径, 默认值 = 50.
//segments — 分割面数量 (三角形), 最低值 = 3, 默认值 = 8.
//thetaStart — 第一个分割面的开始角度, 默认值 = 0 (3点钟方向).
//thetaLength — 圆形扇形的圆心角通常称为θ。默认为2 * Pi，这形成了一个完整的圆
CircleGeometry(radius, segments, thetaStart, thetaLength)

//innerRadius — 内半径默认值为0, 但是当值设为0的时候并不能正常工作.
//outerRadius — 外半径默认值为50.
//thetaSegments — 分割面数量. 更高的值意味着更加的圆滑. 最小值为3. 默认值为8.
//phiSegments — 最小值为1. 默认值为8.
//thetaStart — 第一个分割面的开始角度. 默认值为0.
//thetaLength — 圆形扇形的圆心角通常称为θ. 默认值为Math.PI * 2.
RingGeometry(innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength)

var rectLength = 120, rectWidth = 40;

var rectShape = new THREE.Shape();
rectShape.moveTo( 0,0 );
rectShape.lineTo( 0, rectWidth );
rectShape.lineTo( rectLength, rectWidth );
rectShape.lineTo( rectLength, 0 );
rectShape.lineTo( 0, 0 );

var rectGeom = new THREE.ShapeGeometry( rectShape );
var rectMesh = new THREE.Mesh( rectGeom, new THREE.MeshBasicMaterial( { color: 0xff0000 } ) ) ;

scene.add( rectMesh );

//width — X轴上的面的宽度.
//height — Y轴上的面的高度.
//depth — Z轴上的面的深度.
//widthSegments — 可选参数. 沿宽度面的分割面数量. 默认值为1.
//heightSegments — 可选参数. 沿高度面的分割面数量. 默认值为1.
//depthSegments — 可选参数. 沿深度面的分割面数量. 默认值为1.
BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

//radius — 球体半径. 默认值为50.
//widthSegments — 水平分割面的数量. 最小值为3, 默认值为8.
//heightSegments — 垂直分割面的数量. 最小值为2, 默认值为6.
//phiStart — 指定水平起始角度. 默认值为0.
//phiLength — 指定水平扫描角度大小. 默认值为 Math.PI * 2.
//thetaStart — 指定垂直起始角度. 默认值为0.
//thetaLength — 指定垂直扫描角度大小. 默认值为Math.PI.
SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)

//radiusTop — 圆柱体顶端半径. 默认值为20.
//radiusBottom — 圆柱体底端半径. 默认值为20.
//height — 圆柱体高度. 默认值为100.
//radiusSegments — 围绕圆柱体周长的分割面数量. 默认值为8.
//heightSegments — 沿圆柱体高度的分割面数量. 默认值为1.
//openEnded — 指示圆柱体两端是打开还是覆盖的布尔值. 默认值为false, 意思是覆盖.
//thetaStart — 第一个分割面的开始角度, 默认值 = 0 (3点钟方向).
//thetaLength — 圆形扇形的圆心角通常称为θ。默认为2 * Pi，这形成了一个完整的圆柱体.
CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded, thetaStart, thetaLength)

//radius — 锥底半径. 默认值为20.
//height — 锥体高度. 默认值为100.
//radiusSegments — 围绕圆锥周长的分割面数量. 默认值为8.
//heightSegments — 沿圆锥高度的分割面数量. 默认值为1.
//openEnded — 指示锥底是打开还是覆盖的布尔值. 默认值为false, 意思是覆盖.
//thetaStart — 第一个分割面的开始角度, 默认值 = 0 (3点钟方向).
//thetaLength — 圆形扇形的圆心角通常称为θ。默认为2 * Pi，这形成了一个完整的锥体.
ConeGeometry(radius, height, radiusSegments, heightSegments, openEnded, thetaStart, thetaLength)

//radius — 半径, 默认值为100.
//tube — 管道直径. 默认值为40.
//radialSegments — 默认值为8
//tubularSegments — 默认值为6.
//arc — 圆心角. 默认值为Math.PI * 2.
TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)

//radius — 四面体半径. 默认值为1.
//detail — 默认值为0. 设置为大于0的值将添加顶点使之不再是一个四面体.
TetrahedronGeometry(radius, detail)

//radius — 八面体半径. 默认值为1.
//detail — 默认值为0. 如果此值设为大于0则不再是八面体.
OctahedronGeometry(radius, detail)

//radius — 十二面体的半径. 默认值为1.
//detail — 默认值为0. 设置为大于0的值将添加顶点使之不再是一个十二面体.
DodecahedronGeometry(radius, detail)

//radius — 默认值为1.
//detail — 默认值为0. 设置为大于0的值将添加顶点使之不再是一个二十面体. 当值大于1时它就成了一个球体.
IcosahedronGeometry(radius, detail)

var verticesOfCube = [
    -1,-1,-1,    1,-1,-1,    1, 1,-1,    -1, 1,-1,
    -1,-1, 1,    1,-1, 1,    1, 1, 1,    -1, 1, 1,
];

var indicesOfFaces = [
    2,1,0,    0,3,2,
    0,4,7,    7,3,0,
    0,1,5,    5,4,0,
    1,2,6,    6,5,1,
    2,3,7,    7,6,2,
    4,5,6,    6,7,4
];
//vertices — Array 以 [1,1,1, -1,-1,-1, ... ] 这种形式出现的点的数组
//faces — Array 以 [0,1,2, 2,3,0, ... ] 这种形式出现的构成各个面的指数数组
//radius — Float - 最终形状的半径
//detail — Integer - 把几何模型细分成多少层. 层越多形状越光滑.
//PolyhedronGeometry(vertices, faces, radius, detail)
var geometry = new THREE.PolyhedronGeometry( verticesOfCube, indicesOfFaces, 6, 2 );

//radius — 半径, 默认值为100.
//tube — 管道直径. 默认值为40.
//tubularSegments — 默认值为64.
//radialSegments — 默认值为8.
//p — 这个值决定了几何体绕旋转对称轴绕了多少圈. 默认值为2.
//q — 这个值决定了几何体绕环面的圆绕了多少圈. 默认值为3.
TorusKnotGeometry(radius, tube, tubularSegments, radialSegments, p, q)

var CustomSinCurve = THREE.Curve.create(
    function ( scale ) { //custom curve constructor
        this.scale = (scale === undefined) ? 1 : scale;
    },

    function ( t ) { //getPoint: t is between 0-1
        var tx = t * 3 - 1.5,
            ty = Math.sin( 2 * Math.PI * t ),
            tz = 0;

        return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
    }
);

var path = new CustomSinCurve( 10 );

var geometry = new THREE.TubeGeometry(
    path,  //path 从 Curve 基本类继承而来的路径
    20,    //segments 组成管道的分割面数量, 默认值为64
    2,     //radius 管道半径, 默认值为1
    8,     //radiusSegments 组成截面的分割面数量, 默认值为8
    false  //closed 管道是开放的还是闭合的, 默认值为false
);

//shapes — 形状或形状数组.
//options — 包括下面这些参数的对象.
//  curveSegments — int. 曲线上点的个数
//  steps — int. 用于细分拉伸的样条段数量
//  amount — int. 拉伸形状的深度
//  bevelEnabled — bool. 打开斜面
//  bevelThickness — float. 在原来的形状里面弄多深的斜面
//  bevelSize — float. 斜面离形状轮廓的距离
//  bevelSegments — int. 斜面层的数量
//  extrudePath — THREE.CurvePath. 沿3D样条路径拉伸形状. (创建帧（如果帧没有定义))
//  frames — THREE.TubeGeometry.FrenetFrames. 包含切线、法线、副法线的数组
//  material — int. 前面和后面的材质索引号
//  extrudeMaterial — int. 拉伸或斜化面的材质索引号
//  UVGenerator — Object. 提供UV生成器各功能的对象
ExtrudeGeometry(shapes, options)

var points = [];
for ( var i = 0; i < 10; i ++ ) {
points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
}
//points — Vector2s数组. X轴上每个点都必须大于0.
//segments — 生成圆周段的数目. 默认值为12.
//phiStart — 起始角度的弧度值. 默认值为0.
//phiLength — 弧度范围在0到2PI间的，2PI是闭合车床, 小于2PI的是部分。默认值为2PI.
//LatheGeometry(points, segments, phiStart, phiLength)
var geometry = new THREE.LatheGeometry( points );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var lathe = new THREE.Mesh( geometry, material );
scene.add( lathe );

//点：this.vertices = [];
//颜色：this.colors = [];
//面：this.faces = []
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(-100,100,0),
    new THREE.Vector3(100,-100,0),
    new THREE.Vector3(100.-100,0)
);

//func — 一个函数，接收介于0到1之间的 u 和 v 值，并返回一个 Vector3
//slices — 用于参数化函数的切片数量
//stacks — 用于参数化函数的堆栈数量
ParametricGeometry(func, slices, stacks)

//text — 要显示的文字
//parameters — 包含下面这些参数的对象
//  font — THREE. 字体.
//  size — Float. 大小.
//  height — Float. 文字厚度. 默认值为50.
//  curveSegments — Integer. 曲线上点的数量. 默认值为12.
//  bevelEnabled — Boolean. 是否打开斜面. 默认值为False.
//  bevelThickness — Float. 文本斜面的深度. 默认值为10.
//  bevelSize — Float. 斜面离轮廓的距离. 默认值为8.
TextGeometry(text, parameters)

import { ConvexGeometry } from 'three/addons/geometries/ConvexGeometry.js';
const geometry = new ConvexGeometry( points );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

import { DecalGeometry } from 'three/addons/geometries/DecalGeometry.js';
const geometry =  new DecalGeometry( mesh, position, orientation, size );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

import { ParametricGeometry } from 'three/addons/geometries/ParametricGeometry.js';
const geometry = new THREE.ParametricGeometry( THREE.ParametricGeometries.klein, 25, 25 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const klein = new THREE.Mesh( geometry, material );
scene.add( klein );

var ambientLight = new THREE.AmbientLight(0x523318);
scene.add(ambientLight);

//THREE.DirectionalLight(hex,intensity)
//hex：光的颜色，用16进制表示
//intensity：光线的强度，默认为1。因为RGB的三个值均在0-255之间，不能反映出光照的强度变化，光照越强，物体表面就更明亮。它的取值范围是0-1.如果为0，表示光线基本没有什么作用，那么物体就会显示会黑色。
//平行光的方向：方向由位置和原点（0,0,0）来决定，方向光只与方向有关，与离物体的远近无关。
var light = new THREE.DirectionalLight(0xff0000,1);
light.position.set(0,0,1);
scene.add(light);

//PointLight(color,intensity,distance)
var pointLight = new THREE.PointLight("#ccffcc");
pointLight.position.set(0,10,10);
scene.add(pointLight);
//color：光源的颜色
//distance：光源照射的距离。默认值为 0，意味着光的强度不会随着距离的增加而减少。
//intensity：光源照射的强度。默认值为 1。
//position：光源在场景中的位置。
//visible：设为 ture（默认值），光源就会打开。设为 false，光源就会关闭。

THREE.SpotLight(hex,intensity,distance,angle,exponent)
//hex：聚光灯发出的颜色，十六进制。
//intensity：光源的强度。默认是1.0，如果为0.5，则强度是一半，意思是颜色会淡一些。和点光源一样。
//distance：光线的强度，从最大值衰减到0需要的距离。默认为0，表示光不衰减，如果非0，则表示从光源的位置到Distance的距离，光都在线性衰减。到离光源距离distance时，光源强度为0
//angle：聚光灯着色的角度，用弧度作为单位，这个角度是和光源的方向形成的角度。
//exponent：光源模型中，衰减的一个参数，越大衰减越快

// HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )
// skyColor -（可选）一个表示颜色的 Color 的实例、字符串或数字，默认为一个白色（0xffffff）的 Color 对象。
// groundColor -（可选）一个表示颜色的 Color 的实例、字符串或数字，默认为一个白色（0xffffff）的 Color 对象。
// intensity -（可选）光照强度。默认值为 1。
const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
scene.add( light );

// RectAreaLight( color : Color, intensity : Float, width : Float, height : Float )
// color -（可选）一个表示颜色的 Color 的实例、字符串或数字，默认为一个白色（0xffffff）的 Color 对象。
// intensity -（可选）光源强度／亮度 。默认值为 1。
// width -（可选）光源宽度。默认值为 10。
// height -（可选）光源高度。默认值为 10。
const width = 10;
const height = 10;
const intensity = 1;
const rectLight = new THREE.RectAreaLight( 0xffffff, intensity,  width, height );
rectLight.position.set( 5, 5, 0 );
rectLight.lookAt( 0, 0, 0 );
scene.add( rectLight )

rectLightHelper = new RectAreaLightHelper( rectLight );
scene.add( rectLightHelper );

//image：这是一个图片的类型，基本上由 ImageUtils来加载
    //var image = THREE.ImageUtils.loadTexture(url);
    //url不能加载本地图片
    //加载的图片的大小必须是2的次方
//mapping：是一个THREE.UVMapping()类型，表示的是纹理坐标。
//wrapS：表示x轴的纹理的回环方式，就是当纹理的宽度小于需要贴图的平面的宽度时，平面剩下的部分应该以何种方式贴图的问题。
//wrapT：表示y轴的纹理回环方式。mapFilter和minFilter表示过滤的方式，这是OpenGL的基本概念。不设置时会取默认值。
//format：表示加载图片的格式，这个参数可以取值THREE.RGBAFormat,RGBFormat等。
    //THREE.RGBAFormat表示每个像素点要使用四个分量表示，分别是红、绿、蓝、透明表示。
    //RGBFormat表示不适用透明，也就是说纹理不会又透明的效果。
//type：表示存储纹理额的内存的每一个字节的格式，是有符号还是没有符号；是整形还是浮点型。默认是无符号型。
//anisotropy：各向异性过滤。使用各向异性过滤能够使纹理的效果更好，但是会消耗更多的内存、CPU、GPU时间。
THREE.Texture (image,mapping,wrapS,wrapT,magFilter,minFilter,format,type,anisotropy)

//纹理贴图
const cakeTexture1 = new THREE.TextureLoader().load('img/cake1.png');
const cakeMaterail1 = new THREE.MeshBasicMaterial({map: cakeTexture1});

//场景贴图
let urls = [
    './img/home.left.jpg',
    './img/home.right.jpg',
    './img/home.top.jpg',
    './img/home.bottom.jpg',
    './img/home.front.jpg',
    './img/home.back.jpg'
];
let cubeTexture = new THREE.CubeTextureLoader().load(urls);
scene.background = cubeTexture;

var allTexture;
function loadAllTexture(cb){
    allTexture = {};

    var loadIndex = 0;
    var textures = [
        "skymap",
        "shache_occ",
        "shache_nor",
        "shache_col",
        "neishi_occ",
        "neishi_nor",
        "mennei_col",
        "luntai_nor",
        "luntai_col",
        "lungu_occ",
        "lungu_nor",
        "lungu_col",
        "linjian_occ",
        "linjian_nor",
        "linjian_col",
        "floor",
        "deng_occ",
        "deng_nor",
        "deng_col",
        "cheshen_occ",
        "cheshen_nor",
        "chejia_occ",
        "chejia_nor",
        "chedengzhao_nor"
    ];

    function loadNextTexture(){
        var textureName = textures[loadIndex];
        loadTexture("images/textures/"+textureName+".jpg",function(texture){
            if(loadIndex<textures.length-1){
                allTexture[textureName] = {
                    texture:texture
                };

                loadIndex++;
                loadNextTexture();
            }else{
                if(cb)cb();
            }
        });
    }
    loadNextTexture();
}
function loadTexture(filepath,cb){
    const textureLoader = new THREE.TextureLoader();
    textureLoader.load(filepath,cb);
}

for(var i=0;i<gltf.scene.children[0].children.length;i++){
    var modelObj = gltf.scene.children[0].children[i];

    if(modelObj.name=="smart_lungu0"||modelObj.name=="smart_lungu1"||modelObj.name=="smart_lungu2"||modelObj.name=="smart_lungu3"){
        modelObj.material = new THREE.MeshStandardMaterial();
        modelObj.material.map = allTexture["lungu_col"].texture;
        modelObj.material.normalMap = allTexture["lungu_nor"].texture;
        modelObj.material.aoMap = allTexture["lungu_occ"].texture;
    }
}

Raycaster( origin, direction, near, far ) 

//origin — 射线的起点向量。
//direction — 射线的方向向量，应该归一标准化。
//near — 所有返回的结果应该比 near 远。Near不能为负，默认值为0。
//far — 所有返回的结果应该比 far 近。Far 不能小于 near，默认值为无穷大。

mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
    
推导过程：
设A点为点击点(x1,y1),x1=e.clintX, y1=e.clientY，原点在左上角，右x正半轴，下y正半轴
设A点在世界坐标中的坐标值为B(x2,y2)，原点在屏幕中心，右x正半轴，上y正半轴
A需要通过翻折平移等方法，求出相同位置不同坐标系对应坐标
先将坐标方向对齐：A的屏幕(第一象限)实际在B的第四象限，x不变，y翻折(x1,-y1)
然后x和y均需平移半个屏幕
x2' = x1 - innerWidth/2
y2' = innerHeight/2 - y1
又由于在世界坐标的范围是[-1,1],要得到正确的B值我们必须要将坐标标准化
x2 = (x1 -innerWidth/2)/(innerwidth/2) = (x1/innerWidth)*2-1
同理得 y2 = -(y1/innerHeight)*2 +1

//frame只是一个标记，叫什么都行
var poiPosArray=[
    {x:-1.47,y:0.87,z:-0.36,frame:1},
    {x:-1.46,y:0.49,z:-0.69,frame:2},
    {x:1.5,y:.7,z:0,frame:8},
    {x:0.33,y:1.79,z:0,frame:3},
    {x:0,y:0.23,z:0.96,frame:4},
    {x:0.73,y:1.38,z:-0.8,frame:5},
    {x:-.1,y:1.17,z:0.88,frame:6},
    {x:-1.16,y:0.16,z:0.89,frame:7}
],poiObjects=[];
function setupInfoPoint(){
    const pointTexture = new THREE.TextureLoader().load("images/point.png");

    var group = new THREE.Group();
    var materialC = new THREE.SpriteMaterial( { map: pointTexture, color: 0xffffff, fog: false } );
    for ( var a = 0; a < poiPosArray.length; a ++ ) {
        var x = poiPosArray[a].x;
        var y = poiPosArray[a].y-.5;
        var z = poiPosArray[a].z;

        var sprite = new THREE.Sprite( materialC );
        sprite.scale.set( .15, .15, 1 );
        sprite.position.set( x, y, z );
        sprite.idstr="popup_"+poiPosArray[a].frame;
        group.add( sprite );

        poiObjects.push(sprite);
    }
    scene.add( group );

    document.body.addEventListener("click",function (event) {
        event.preventDefault();

        var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2();
        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

        raycaster.setFromCamera( mouse, camera );

        var intersects = raycaster.intersectObjects( poiObjects );
        if(intersects.length>0){
            var popIndex=parseInt(intersects[ 0 ].object.idstr.substr(6,1));
            console.log(popIndex);
        }
    });
}

经度：lon，取值范围：[0,360]，纬度：lat，取值范围：[-90,90];

经纬度转换三维坐标

X = R * cos(lat)* sin(lon)
Y = R * sin(lat)
Z = R * cos(lat)*cos(lon)

ThreeJS中默认的坐标系是右手坐标系，X轴为左右，Y轴为上下，Z轴为前后。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>手把手教你制作酷炫Web全景</title>
    <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
</head>
<body>
    <div id="wrap" style="position: absolute;z-index: 0;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;overflow: hidden;">
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.js"></script>
    <script>
        const width = window.innerWidth, height = window.innerHeight // 屏幕宽高
        const radius = 50 // 球体半径

        // 第一步：创建场景
        const scene = new THREE.Scene()

        // 第二步：绘制一个球体
        const geometry = new THREE.SphereBufferGeometry(radius, 32, 32)
        geometry.scale(-1, 1, 1) // 球面反转，由外表面改成内表面贴图
        const material = new THREE.MeshBasicMaterial({
            map: new THREE.TextureLoader().load('./img/1.jpeg') // 上面的全景图片
        })
        const mesh = new THREE.Mesh(geometry, material)
        scene.add(mesh)

        // 第三步：创建相机，并确定相机位置
        const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100)
        camera.position.x = 0  // 确定相机位置移到球心
        camera.position.y = 0
        camera.position.z = 0

        camera.target = new THREE.Vector3(radius, 0, 0) // 设置一个对焦点
        

        // 第四步：拍照并绘制到canvas
        const renderer = new THREE.WebGLRenderer()
        renderer.setPixelRatio(window.devicePixelRatio)
        renderer.setSize(width, height) // 设置照片大小

        document.querySelector('#wrap').appendChild(renderer.domElement) // 绘制到canvas
        renderer.render(scene, camera)

        let lat = 0, lon = 0

        function render() {
            lon += 0.003 // 每帧加一个偏移量
            // 改变相机的对焦点，计算公式参考：2.2.2章节
            camera.target.x = radius * Math.cos(lat) * Math.cos(lon);
            camera.target.y = radius * Math.sin(lat);
            camera.target.z = radius * Math.cos(lat) * Math.sin(lon)
            camera.lookAt(camera.target) // 对焦

            renderer.render(scene, camera)
            requestAnimationFrame(render)
        }
        render()
    </script>
</body>

</html>

distanceX = clientX1 - clientX2   // X轴方向
distanceY = clientY1 - clientY2   // Y轴方向

// 其中R为球体半径，根据弧长公式：
lon = distanX / R
lat = distanY / R

// 增加touch事件监听
let lastX, lastY       // 上次屏幕位置
let curX, curY         // 当前屏幕位置
const factor = 1 / 10  // 灵敏系数

const $wrap = document.querySelector('#wrap')
// 触摸开始
$wrap.addEventListener('touchstart', function (evt) {
    const obj = evt.targetTouches[0] // 选择第一个触摸点
    startX = lastX = obj.clientX
    startY = lastY = obj.clientY
})

// 触摸中
$wrap.addEventListener('touchmove', function (evt) {
    evt.preventDefault()
    const obj = evt.targetTouches[0]
    curX = obj.clientX
    curY = obj.clientY

    // 参考：弧长公式
    lon -= ((curX - lastX) / radius) * factor // factor为了全景旋转平稳，乘以一个灵敏系数
    lat += ((curY - lastY) / radius) * factor

    lastX = curX
    lastY = curY
})

const camera = new THREE.PerspectiveCamera( fov , aspect , near , fear )
near：取默认值：0.1即可
fear：只要大于球体半径就可，取值为：球体半径R
aspect：在全景的场景已经确定了，照片的长宽比：屏幕宽度 / 屏幕高度
fov：视场，缩放是通过修改它的值来完成全景图片的缩放；

// 其中，（clientX1，clientY1）和（clientX2，clientY2）为双指在屏幕的当前位置

// 计算距离，简化运输不用平方计算
const distance = Math.abs(clientX1 - clientX2) + Math.abc(clientY1 - clientY)
// 计算缩放比
const scale = distance / lastDiance 
// 计算新的视角
fov = camera.fov / scale

// 视角范围取值
camera.fov = Math.min(90, Math.max(fov,60)) // 90 > fov > 60 ,从参数说明中选取

// 视角需要主动更新
camera.updateProjectionMatrix()

const A = new THREE.Vector3(0, 30, 0);//A点
const B = new THREE.Vector3(80, 0, 0);//B点

// 绿色小球可视化A点位置
const AMesh = createSphereMesh(0x00ff00,2);
AMesh.position.copy(A);
// 红色小球可视化B点位置
const BMesh = createSphereMesh(0xff0000,2);
BMesh.position.copy(B);

const group = new THREE.Group();
group.add(AMesh,BMesh);

function createSphereMesh(color,R) {
    const geometry = new THREE.SphereGeometry(R);
    const material = new THREE.MeshLambertMaterial({
        color: color,
    });
    const mesh = new THREE.Mesh(geometry, material);
    return mesh;
}

// 绘制一个从A指向B的箭头
const AB = B.clone().sub(A);
const L = AB.length();//AB长度
const dir = AB.clone().normalize();//单位向量表示AB方向

// 生成箭头从A指向B
const arrowHelper = new THREE.ArrowHelper(dir, A, L)
group.add(arrowHelper);

const geometry = new THREE.BoxGeometry(50, 50, 50);
const material = new THREE.MeshLambertMaterial({
    color: 0x00ffff,
});
const mesh = new THREE.Mesh(geometry, material);

const p = mesh.geometry.attributes.position;
const n = mesh.geometry.attributes.normal;
const count = p.count;//顶点数量
for (let i = 0; i < count; i++) {
    // 顶点位置O
    const O = new THREE.Vector3(p.getX(i), p.getY(i), p.getZ(i));
    // 顶点位置O对应的顶点法线
    const dir = new THREE.Vector3(n.getX(i), n.getY(i), n.getZ(i));
    // 箭头可视化顶点法线
    const arrowHelper = new THREE.ArrowHelper(dir, O, 20);
    mesh.add(arrowHelper);
}

window.onload=initCSS3D;

function initCSS3D(){
    var s = new C3D.Stage();
    s.size(window.innerWidth, window.innerHeight).update();
    document.getElementById('container').appendChild(s.el);

    var box = new C3D.Skybox();
    box.size(954).position(0, 0, 0).material({
        front: {image: "images/scene_front.jpeg"},
        back: {image: "images/scene_back.jpeg"},
        left: {image: "images/scene_right.jpeg"},
        right: {image: "images/scene_left.jpeg"},
        up: {image: "images/scene_top.jpeg"},
        down: {image: "images/scene_bottom.jpeg"},

    }).update();
    s.addChild(box);

    function loop() {
        angleX += (curMouseX - lastMouseX + lastAngleX - angleX) * 0.3;
        angleY += (curMouseY - lastMouseY + lastAngleY - angleY) * 0.3;

        s.camera.rotation(angleY, -angleX, 0).updateT();
        requestAnimationFrame(loop);
    }

    loop();

    var lastMouseX = 0;
    var lastMouseY = 0;
    var curMouseX = 0;
    var curMouseY = 0;
    var lastAngleX = 0;
    var lastAngleY = 0;
    var angleX = 0;
    var angleY = 0;

    document.addEventListener("mousedown", mouseDownHandler);
    document.addEventListener("mouseup", mouseUpHandler);

    function mouseDownHandler(evt) {
        lastMouseX = curMouseX = evt.pageX;
        lastMouseY = curMouseY = evt.pageY;
        lastAngleX = angleX;
        lastAngleY = angleY;

        document.addEventListener("mousemove", mouseMoveHandler);
    }

    function mouseMoveHandler(evt) {
        curMouseX = evt.pageX;
        curMouseY = evt.pageY;
    }

    function mouseUpHandler(evt) {
        curMouseX = evt.pageX;
        curMouseY = evt.pageY;

        document.removeEventListener("mousemove", mouseMoveHandler);
    }
}

var hotPoints=[
    {
        position:{
            x:0,
            y:0,
            z:-476
        },
        detail:{
            "title":"信息点1"
        }
    },
    {
        position:{
            x:0,
            y:0,
            z:476
        },
        detail:{
            "title":"信息点2"
        }
    }
];
function initPoints(){
    var poiObjects = [];
    for(var i=0;i<hotPoints.length;i++){
        var _p = new C3D.Plane();

        _p.size(207, 162).position(hotPoints[i].position.x,hotPoints[i].position.y,hotPoints[i].position.z).material({
            image: "images/hot.png",
            repeat: 'no-repeat',
            bothsides: true,//注意这个两面贴图的属性
        }).update();
        s.addChild(_p);

        _p.el.detail = hotPoints[i].detail;

        _p.on("click",function(e){
            console.log(e.target.detail.title);
        })
    }
}

var r = Math.atan2(hotPoints[i].position.z-0,0-0) * 180 / Math.PI+90;
_p.size(207, 162).position(hotPoints[i].position.x,hotPoints[i].position.y,hotPoints[i].position.z).material({
            image: "images/hot.png",
            repeat: 'no-repeat',
            bothsides: false,
        }).update();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>http://www.webgl3d.cn/</title>
</head>

<body>
    <script type="module">
        if(navigator.gpu){
            console.log('你的浏览器支持WebGPU。');
        }else{
            console.log('你的浏览器不支持WebGPU，请更换新版本浏览器。');
        }
    </script>
</body>

</html>

// 浏览器请求GPU适配器
const adapter = await navigator.gpu.requestAdapter();
// 获取GPU设备对象，通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
const device = await adapter.requestDevice();
console.log('适配器adapter',adapter);
console.log('GPU设备对象device',device);
device.createRenderPipeline()//创建渲染管线
device.createComputePipeline()//创建计算管线
device.createShaderModule()//创建着色器模块
device.createCommandEncoder()//创建命令对象(绘制和计算命令)
device.createBuffer()//创建缓冲区对象
device.feature
device.queue

// 传递着色器对应uniform数据
const mat4Array = glMatrix.mat4.create();
//缩放变换
glMatrix.mat4.scale(mat4Array, mat4Array, [0.5, 0.5, 1]);
// 在GPU显存上创建一个uniform数据缓冲区
const mat4Buffer = device.createBuffer({
    size: mat4Array.byteLength,
    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
});
// mat4Array里面矩阵数据写入uniform缓冲区mat4Buffer
device.queue.writeBuffer(mat4Buffer, 0, mat4Array);

// 传递着色器对应uniform数据
const mat4Array = glMatrix.mat4.create();
//生成平移变换矩阵
glMatrix.mat4.translate(mat4Array, mat4Array, [-1, -1, 0]);
// 在GPU显存上创建一个uniform数据缓冲区
const mat4Buffer = device.createBuffer({
    size: mat4Array.byteLength,
    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
});
// mat4Array里面矩阵数据写入uniform缓冲区mat4Buffer
device.queue.writeBuffer(mat4Buffer, 0, mat4Array);

// 传递着色器对应uniform数据
const modelMatrix = glMatrix.mat4.create();
//后发生缩放变换，先乘
glMatrix.mat4.scale(modelMatrix, modelMatrix, [0.5, 0.5, 1]);
//先发生平移变换，后乘
glMatrix.mat4.translate(modelMatrix, modelMatrix, [-1, -1, 0]);
// 在GPU显存上创建一个uniform数据缓冲区
const modelMatrixBuffer = device.createBuffer({
   size: modelMatrix.byteLength,
   usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
});
device.queue.writeBuffer(modelMatrixBuffer, 0, modelMatrix);

// 传递着色器对应uniform数据
const modelMatrix = glMatrix.mat4.create();
//后发生平移变换，先乘
glMatrix.mat4.translate(modelMatrix, modelMatrix, [-1, -1, 0]);
//先发生缩放变换，后乘
glMatrix.mat4.scale(modelMatrix, modelMatrix, [0.5, 0.5, 1])
// 在GPU显存上创建一个uniform数据缓冲区
const modelMatrixBuffer = device.createBuffer({
   size: modelMatrix.byteLength,
   usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
});
device.queue.writeBuffer(modelMatrixBuffer, 0, modelMatrix);

//triangle-list表示三个点为一组绘制一个三角形。
const pipeline = device.createRenderPipeline({
    primitive: {
        topology: "triangle-list",//绘制三角形
    }
});
//line-strip表示把多个顶点首位相接连接(不闭合)，三个坐标点可以绘制两条直线段。
const pipeline = device.createRenderPipeline({
    primitive: {
        topology: "line-strip",//多个定点依次连线
    }
});
//point-list表示每个顶点坐标对应位置渲染一个小点
const pipeline = device.createRenderPipeline({
    primitive: {
        topology: "point-list",
    }
});

// 给片元着色器传递一个颜色数据
const colorArray = new Float32Array([0.0,1.0,0.0]);//绿色
// 在GPU显存上创建一个uniform数据缓冲区
const colorBuffer = device.createBuffer({
    size: colorArray.byteLength,
    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
});
// colorArray里面颜色数据写入uniform缓冲区colorBuffer
device.queue.writeBuffer(colorBuffer, 0, colorArray);
// 设置uniform数据的绑定组
// 学习createBindGroup的参数，可以类比渲染管线中shaderLocation学习
const bindGroup = device.createBindGroup({
    // .getBindGroupLayout(0)参数0对应shader中@group(0)代码的参数0
    layout: pipeline.getBindGroupLayout(0),//绑定组，标记为0
    // 一个组里面可以包含多个uniform数据
    entries: [//每个元素可以用来设置一个uniform数据
        {
            //binding的值对应@binding(0)的参数，保持一致，比如都是0
            binding: 0,//标记组里面的uniform数据
            resource: { buffer: mat4Buffer }
        },
        {
            //binding的值对应@binding(1)的参数，保持一致，比如都是1
            binding: 1,//标记组里面的uniform数据
            resource: { buffer: colorBuffer }
        }
    ]
});
// uniform关键字辅助var声明一个三维向量变量color表示片元颜色
//@binding(1)的参数对应webgpu代码.binding的值，保持一致，比如都是1
@group(0) @binding(1) var<uniform> color:vec3<f32>;
@fragment
fn main() -> @location(0) vec4<f32> {
    // return vec4<f32>(1.0, 0.0, 0.0, 1.0);
    return vec4<f32>(color, 1.0);
}

//首先通过GPU设备对象的方法.createCommandEncoder()创建一个命令编码器对象。
// 创建GPU命令编码器对象
const commandEncoder = device.createCommandEncoder();
//通过命令对象的方法.beginRenderPass()可以创建一个渲染通道对象renderPass。
const renderPass = commandEncoder.beginRenderPass({
    // 给渲染通道指定颜色缓冲区，配置指定的缓冲区
    colorAttachments:[{
        // 指向用于Canvas画布的纹理视图对象(Canvas对应的颜色缓冲区)
        // 该渲染通道renderPass输出的像素数据会存储到Canvas画布对应的颜色缓冲区(纹理视图对象)
        view: context.getCurrentTexture().createView(),  
        storeOp: 'store',//像素数据写入颜色缓冲区
        loadOp: 'clear',
        clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色
    }]
});
// const pipeline = device.createRenderPipeline()
// 设置该渲染通道控制渲染管线
renderPass.setPipeline(pipeline);
//顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
renderPass.setVertexBuffer(0, vertexBuffer);
// renderPass.setPipeline(pipeline);
// 绘制命令.draw()绘制顶点数据
renderPass.draw(3);
// 渲染通道结束命令.end()
renderPass.end();
// const commandEncoder = device.createCommandEncoder();
// 命令编码器.finish()创建命令缓冲区(生成GPU指令存入缓冲区)
const commandBuffer = commandEncoder.finish();
// const commandEncoder = device.createCommandEncoder();
const commandBuffer = commandEncoder.finish();
// 命令编码器缓冲区中命令传入GPU设备对象的命令队列.queue
device.queue.submit([commandBuffer]);

// 命令编码器
const commandEncoder = device.createCommandEncoder();
// 渲染通道
const renderPass = commandEncoder.beginRenderPass({
    colorAttachments: [{
        view: context.getCurrentTexture().createView(),
        storeOp: 'store',
        loadOp: 'clear',
    }]
});
renderPass.setPipeline(pipeline);
// 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
renderPass.setVertexBuffer(0, vertexBuffer);
// 把绑定组里面的uniform数据传递给着色器中uniform变量
renderPass.setBindGroup(0, bindGroup);
renderPass.draw(6);// 绘制顶点数据
renderPass.end();
const commandBuffer = commandEncoder.finish();
device.queue.submit([commandBuffer]);

//渲染循环
function render() {
    // 命令编码器
    const commandEncoder = device.createCommandEncoder();
    // 渲染通道
    const renderPass = commandEncoder.beginRenderPass({
        colorAttachments: [{
            view: context.getCurrentTexture().createView(),
            storeOp: 'store',
            
            loadOp: 'clear',
        }]
    });
    renderPass.setPipeline(pipeline);
    // 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
    renderPass.setVertexBuffer(0, vertexBuffer);
    // 把绑定组里面的uniform数据传递给着色器中uniform变量
    renderPass.setBindGroup(0, bindGroup);
    renderPass.draw(6);// 绘制顶点数据
    renderPass.end();
    const commandBuffer = commandEncoder.finish();
    device.queue.submit([commandBuffer]);
    requestAnimationFrame(render);
}
render()

//渲染循环
let angle = 0.0;//初始旋转角度
function render() {
    angle += 0.05;//每次渲染角度增加
    const modelMatrix = glMatrix.mat4.create();
    // 每次渲染，生成新的旋转矩阵
    glMatrix.mat4.rotateZ(modelMatrix, modelMatrix,angle);
    //模型矩阵modelMatrix重新写入uniform数据的缓冲区中
    device.queue.writeBuffer(modelMatrixBuffer, 0, modelMatrix)

    // 命令编码器
    const commandEncoder = device.createCommandEncoder();
    // 渲染通道
    const renderPass = commandEncoder.beginRenderPass({
        colorAttachments: [{
            view: context.getCurrentTexture().createView(),
            storeOp: 'store',
            loadOp: 'clear',
        }]
    });
    renderPass.setPipeline(pipeline);
    // 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
    renderPass.setVertexBuffer(0, vertexBuffer);
    // 把绑定组里面的uniform数据传递给着色器中uniform变量
    renderPass.setBindGroup(0, bindGroup);
    renderPass.draw(6);// 绘制顶点数据
    renderPass.end();
    const commandBuffer = commandEncoder.finish();
    device.queue.submit([commandBuffer]);

    requestAnimationFrame(render);
}
render()

var position = { x: 100, y: 0 }
// 首先为位置创建一个补间(tween),然后告诉 tween 我们想要在1000毫秒内以动画的形式移动 x 的位置
var tween = new TWEEN.Tween(position).to({ x: 200 }, 1000).start();

function animate() {
    requestAnimationFrame(animate);
    // [...]
    TWEEN.update();
    // [...]
}

animate();

tween.onUpdate(function(object) {
    console.log(object.x);
});

const x = R * Math.cos(angle);
const y = R * Math.sin(angle);

const v3 = new THREE.Vector3(30,30,0);
console.log('v3',v3);

console.log('mesh.position',mesh.position);
mesh.position.y = 80;// 设置网格模型y坐标
mesh.position.set(80,2,10);// 设置模型xyz坐标

const A = new THREE.Vector3(30, 30, 0);// 人起点A
// walk表示运动的位移量用向量
const walk = new THREE.Vector3(100, 50, 0);
const B = new THREE.Vector3();// 人运动结束点B
// 计算结束点xyz坐标
//B.x = A.x + walk.x;
//B.y = A.y + walk.y;
//B.z = A.z + walk.z;
// addVectors的含义就是参数中两个向量xyz三个分量分别相加
//B.addVectors(A,walk);
//console.log('B',B);
B = A.clone().add(walk);//不希望A被改变，使用clone

// 向量v表示人速度，大小√2米每秒，方向是x、y正半轴的角平分线
const v = new THREE.Vector3(1, 1, 0);

// xyz三个方向上速度分别和时间相乘，得到三个方向上位移
//const walk = new THREE.Vector3(v.x * 50, v.y * 50, v.z * 50);

// `.multiplyScalar(50)`表示向量x、y、z三个分量和参数分别相乘
const walk = v.clone().multiplyScalar(50);

//假设人起点坐标A(30, 30, 0)，以速度v运动50秒，计算运动结束位置。
const A = new THREE.Vector3(30, 30, 0);// 人起点A
const B = A.clone().add(walk);

const A = new THREE.Vector3(30, 30, 0);// 人起点A
const B = new THREE.Vector3(130,80,0);// 人运动结束点B

const AB = B.clone().sub(A);//B.sub(A);表示B的xyz三个属性分别减去A的xyz三个属性，然后结果赋值给B自身的xyz属性
console.log('AB',AB);

//length函数用于计算两点之间距离，相当于以下计算
// 3D空间，A和B两点之间的距离
const L = Math.sqrt(Math.pow(B.x-A.x,2) + Math.pow(B.y-A.y,2) + Math.pow(B.z-A.z,2));

const AB = new THREE.Vector3(100, 50, 0);
AB.normalize(); //向量归一化

//自己写代码实现归一化。
const dir = new THREE.Vector3(1, 1, 0);
const L = dir.length();
// 归一化：三个分量分别除以向量长度
dir.x = dir.x / L;
dir.y = dir.y / L;
dir.z = dir.z / L;
//Vector3(√2/2, √2/2, 0)   Vector3(0.707, 0.707, 0)
console.log('dir',dir);

//直线上两点坐标A和B
const A = new THREE.Vector3(-50,0,-50);
const B = new THREE.Vector3(100,0,100);
const AB = B.clone().sub(A);//AB向量
AB.normalize();//AB归一化表示直线AB的方向
const T = AB.clone().multiplyScalar(100);

const v = new THREE.Vector3(30, 0, 0);//物体运动速度
const clock = new THREE.Clock();//时钟对象
let t = 0;
const g = new THREE.Vector3(0, -9.8, 0);
const pos0 = mesh.position.clone();
// 渲染循环
function render() {
    if (mesh.position.y > 0) {
        const spt = clock.getDelta();//两帧渲染时间间隔(秒)
        t += spt;
        // 在t时间内，以速度v运动的位移量
        const dis = v.clone().multiplyScalar(t).add(g.clone().multiplyScalar(0.5 * t * t));
        // 网格模型当前的位置加上spt时间段内运动的位移量
        const newPos = pos0.clone().add(dis);
        mesh.position.copy(newPos);
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

const v = new THREE.Vector3(30, 0, 0);//物体初始速度
const clock = new THREE.Clock();//时钟对象
const g = new THREE.Vector3(0, -9.8, 0);
// 渲染循环
function render() {
    if (mesh.position.y > 0) {
        const spt = clock.getDelta();//两帧渲染时间间隔(秒)
        //spV:重力加速度在时间spt内对速度的改变
        const spV = g.clone().multiplyScalar(spt);
        v.add(spV);//v = v + spV  更新当前速度
        // 在spt时间内，以速度v运动的位移量
        const dis = v.clone().multiplyScalar(spt);
        // 网格模型当前的位置加上spt时间段内运动的位移量
        mesh.position.add(dis);
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

//物体初始速度
const v = new THREE.Vector3(30, 20, 0);

const a = new THREE.Vector3(10, 10, 0);
const b = new THREE.Vector3(20, 0, 0);
// dot几何含义：向量a长度 * 向量b长度 * cos(ab夹角)
const dot = a.dot(b);
console.log('点乘结果',dot);//判断结果是不是200

const a = new THREE.Vector3(10, 10, 0);
const b = new THREE.Vector3(20, 0, 0);
// a、b向量归一化后点乘
const cos =  a.normalize().dot(b.normalize());
console.log('向量夹角余弦值',cos);
// 弧度转角度
const angle = THREE.MathUtils.radToDeg(cos);
console.log('向量夹角角度值',angle);

// a向量：人的正前方沿着z轴负半轴
const a = new THREE.Vector3(0,0,-1);

person.position.set(0,0,2);//人位置
mesh.position.set(2,0,-3);//物体位置

//物体坐标减去人坐标，创建一个人指向物体的向量
const b = mesh.position.clone().sub(person.position);

//向量b与向量a的夹角处于0~180度之间。
// 0 ~ 90度：物体在人的前方,人指向物体的向量b与人正前方向量a夹角处于0 ~ 90之间，余弦值大于0
// 90 ~ 180度：物体在人的后方，人指向物体的向量b与人正前方向量a夹角处于90 ~ 180之间，余弦值小于0
const dot = a.dot(b);//向量a和b点乘
if (dot > 0) {
    console.log('物体在人前面');
} else if (dot < 0) {
    console.log('物体在人后面');
}

// 已知数据
person.position.set(0, 0, 2);//人位置
mesh.position.set(2, 0, -3);//物体位置
// a向量：人的正前方沿着z轴负半轴
const a = new THREE.Vector3(0, 0, -1);
// 扇形范围
const R = 20;//人前方扇形半径
const angle = 60;//人前方扇形角度

//先通过人与物体距离排除，物体不在扇形范围内情况
// 物体坐标减去人坐标，创建一个人指向物体的向量
const b = mesh.position.clone().sub(person.position);
const L = b.length();//物体与人的距离

//比较距离L与扇形半径的关系，排除物体不在扇形范围内的情况。
if (L < R) {//物体与人的距离在半径R以内
    console.log('物体与人距离小于扇形半径');
}else{
    console.log('不在扇形区域内');
}

//比较夹角余弦值大小判断物体是否在扇形内
b.normalize();//归一化
const cos = a.dot(b);//向量a和b夹角余弦值
//在扇形范围内，从人所在位置，向外沿着扇形半径方向绘制向量c，你会发现向量c与向量a最大夹角就是扇形角度一半。
// 角度转弧度
const rad = THREE.MathUtils.degToRad(angle);
// 扇形角度一半的余弦值
const rangeCos = Math.cos(rad / 2)
//比较向量a、b夹角余弦值cos和扇形角度一半的余弦值rangeCos大小，判断物体是否在扇形内。
if (L < R) {
    if (cos > rangeCos) {//物体在人前方扇形里面
        console.log('cos',cos);
        console.log('人在半径为R，角度为angle的扇形区域内');
    }else{
        console.log('不在扇形区域内');
    }
}else{
    console.log('不在扇形区域内');
}

const a = new THREE.Vector3(10, 10, 0);
const b = new THREE.Vector3(20, 0, 0);
// a、b向量归一化后点乘
const cos =  a.normalize().dot(b.normalize());
console.log('向量夹角余弦值',cos);

//注意判断的前提是，两个向量是平行的，余弦值要么1，要么-1
if(cos>0.5){
    console.log('方向相同');
}else{
    console.log('方向相反');
}

//.cross()和.crossVectors()都是向量对象的叉乘计算方法，功能一样，只是使用的细节有些不同，向量对象叉乘的结果仍然是向量对象。
const c = new THREE.Vector3();
c.crossVectors(a,b);
c = a.clone().cross(b);
c.length() = a.length()*b.length()*sin(θ);

//在XOZ平面上，随机选择了两个坐标，作为人和物体的位置，选择一个方向作为人的正前方。
person.position.set(0, 0, 2);//人位置
// a向量：假设人的正前方沿着z轴负半轴
const a = new THREE.Vector3(0, 0, -5);

// 箭头可视化向量a
const arrowA = new THREE.ArrowHelper(a.clone().normalize(), person.position, a.length(),0xff0000);
model.add(arrowA);

//物体位置选择了两种情况，一个在人的左侧(左前方)，一个在人的右侧(右前方)。
mesh.position.set(2, 0, -3);//物体位置在人右边     
mesh.position.set(-2, 0, -3);//物体位置在人左边 

//创建人指向物体的向量b
//物体两个位置对应的两个向量b，分别位于向量a左右两侧。
const b = mesh.position.clone().sub(person.position);
const arrowB = new THREE.ArrowHelper(b.clone().normalize(), person.position, b.length(),0x00ff00);
model.add(arrowB);

const c = a.clone().cross(b);
c.normalize();
// 可视化向量c方向
const arrowC = new THREE.ArrowHelper(c, person.position, 2.5 ,0x0000ff);

//当向量b在向量a右侧(物体在人右侧)时，向量c竖直向下，当向量b在向量a左侧(物体在人左侧)时，向量c竖直向上。
//向量旋转不超过180度情况下，向量b在向量a右侧，说明向量a顺时针旋转与b重合，向量c竖直向下，当向量b在向量a左侧时，说明向量a逆时针旋转与b重合，向量c竖直向上。
// 根据向量c方向，判断物体在人的左侧还是右侧。
if(c.y < 0){
    console.log('物体在人右侧');
}else if(c.y > 0){
    console.log('物体在人左侧');
}

// 已知三角形三个顶点的坐标，计算三角形法线方向
const p1 = new THREE.Vector3(0, 0, 0);
const p2 = new THREE.Vector3(50, 0, 0);
const p3 = new THREE.Vector3(0, 100, 0);

// 三个顶点构建两个向量，按照三角形顶点的顺序，构建1指向2的向量，2指向3的向量
const a = p2.clone().sub(p1);
const b = p3.clone().sub(p2);

const c = a.clone().cross(b);
c.normalize();//向量c归一化表示三角形法线方向

// 可视化向量a和b叉乘结果：向量c
const arrow = new THREE.ArrowHelper(c, p3, 50, 0xff0000);
mesh.add(arrow);

// c.crossVectors(a,b);
// c.length() = a.length()*b.length()*sin(θ)
// S = 0.5*a.length()*b.length()*sin(θ)

// 三角形两条边构建两个向量
const a = p2.clone().sub(p1);
const b = p3.clone().sub(p1);
// 两个向量叉乘结果c的几何含义：a.length()*b.length()*sin(θ)
const c = a.clone().cross(b);

// 三角形面积计算
const S = 0.5*c.length();

console.log('S',S);

//为了方便查看几何关系，可以尝试可视化表示
// 小球可视化四个坐标点
const group = new THREE.Group();
const AMesh = createSphereMesh(0xffff00,2);
AMesh.position.copy(A);
const BMesh = createSphereMesh(0xffff00,2);
BMesh.position.copy(B);
const p1Mesh = createSphereMesh(0xff0000,2);
p1Mesh.position.copy(p1);
const p2Mesh = createSphereMesh(0xff0000,2);
p2Mesh.position.copy(p2);
group.add(AMesh,BMesh,p1Mesh,p2Mesh);

function createSphereMesh(color,R) {
    const geometry = new THREE.SphereGeometry(R);
    const material = new THREE.MeshLambertMaterial({
        color: color,
    });
    const mesh = new THREE.Mesh(geometry, material);
    return mesh;
}
// Line可视化线段AB
const geometry = new THREE.BufferGeometry(); 
const vertices = new Float32Array([
    A.x, A.y, A.z, 
    B.x, B.y, B.z, 
]);
geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);
const material = new THREE.LineBasicMaterial({
    color: 0xffff00, 
});
const line = new THREE.LineLoop(geometry, material); 
group.add(line);

//p1分别向线段AB两点创建两条向量a1、b1
//p2分别向线段AB两点创建两条向量a2、b2
//你会发现，p1、p2同侧时候，a1转向b1与a2转向b2方向一致，如果是异侧，方向不一致。
//换句话说，a1叉乘b1得到向量c1，与a2叉乘b2得到向量c2，如果p1、p2同侧，那么c1和c2方向一样，否则方向不同。

// p1分别向线段AB两点创建两条向量a1、b1
const a1 = A.clone().sub(p1);
const b1 = B.clone().sub(p1);
// p2分别向线段AB两点创建两条向量a2、b2
const a2 = A.clone().sub(p2);
const b2 = B.clone().sub(p2);
// 通过c1、c2方向是否相同来推断两点是否位于线段同一侧
const c1 = a1.clone().cross(b1);
const c2 = a2.clone().cross(b2);

//箭头可视化所有向量辅助判断
group.add(new THREE.ArrowHelper(a1.clone().normalize(), p1, a1.length(),0xff0000))
group.add(new THREE.ArrowHelper(b1.clone().normalize(), p1, b1.length(),0x00ff00))
group.add(new THREE.ArrowHelper(a2.clone().normalize(), p2, a2.length(),0xff0000))
group.add(new THREE.ArrowHelper(b2.clone().normalize(), p2, b2.length(),0x00ff00))
group.add(new THREE.ArrowHelper(c1.clone().normalize(), p1, 50, 0x0000ff))
group.add(new THREE.ArrowHelper(c2.clone().normalize(), p2, 50, 0x0000ff))

// 向量c1与c2夹角余弦值：用来推断向量c1与c2方向是否相同
const cos =  c1.normalize().dot(c2.normalize());
if(cos>0.5){//方向相同时候，余弦值1>0.5
    console.log('方向相同，两点在线段同侧');
}else{//方向相反时候，余弦值-1<0.5
    console.log('方向相反，两点在线段异侧');
}

// 已知条件
// 直线经过两点坐标A、B
const A = new THREE.Vector3(0, 0, 0);
const B = new THREE.Vector3(100, 0, 0);
// 直线外一点p
const p = new THREE.Vector3(50, 0, 30);

// ApB构建一个三角形，其中两条边构建向量a、向量b
const a = A.clone().sub(p);
const b = B.clone().sub(p);
const c = a.clone().cross(b);
const S = 0.5*c.length();//叉乘结果长度一半是三角形ApB的面积

//计算三角形ApB底边AB的长度
const AB = B.clone().sub(A);
const width = AB.length();//AB两点距离

//计算三角形高度(点到直线的距离)
//叉乘结果长度一半是三角形ApB的面积
const S = 0.5*c.length();
//AB两点距离
const width = AB.length();
const H = S / width * 2;//三角形高度，也就是点到直线的距离
console.log('点到直线的距离',H);

const model = new THREE.Group();
loader.load("../飞机.glb", function (gltf) {
    const fly = gltf.scene
    model.add(fly);
    fly.position.set(10, 10, 0);//相对世界坐标系坐标原点偏移
    const axesHelper = new THREE.AxesHelper(10);
    fly.add(axesHelper);//用一个坐标轴可视化模型的局部坐标系(本地坐标系)

    const a = new THREE.Vector3(0, 0, -1);//飞机初始姿态飞行方向
    // 飞机姿态绕自身坐标原点旋转到b指向的方向
    const b = new THREE.Vector3(-1, -1, -1).normalize();

})

//箭头可视化飞机旋转前后的方向
// 可视化飞机方向
const a = new THREE.Vector3(0, 0, -1);//飞机初始姿态飞行方向
const O = fly.position.clone();//飞机位置坐标箭头起点
model.add(new THREE.ArrowHelper(a, O, 30, 0xff0000));
// 飞机姿态绕自身坐标原点旋转到b指向的方向
const b = new THREE.Vector3(-1, -1, -1).normalize();
model.add(new THREE.ArrowHelper(b, O, 30, 0x00ff00));

//.setFromUnitVectors(a, b)生成四元数旋转飞机
//四元数Quaternion的方法.setFromUnitVectors(a, b)可以通过两个向量参数a和b，创建一个四元数，表示从向量a表示的方向旋转到向量b表示的方向。(参数a, b是单位向量)
//飞机初始姿态飞行方向a
const a = new THREE.Vector3(0, 0, -1);
// 飞机姿态绕自身坐标原点旋转到b指向的方向
const b = new THREE.Vector3(-1, -1, -1).normalize();
// a旋转到b构成的四元数
const quaternion = new THREE.Quaternion();
//注意两个参数的顺序
quaternion.setFromUnitVectors(a, b);
// quaternion表示的是变化过程，在原来基础上乘以quaternion即可
fly.quaternion.multiply(quaternion);

// R * T * p:先平移、后旋转
const modelMatrix = R.clone().multiply(T);
p.applyMatrix4(modelMatrix);

// T * R * p：先旋转、后平移
const modelMatrix = R.clone().multiply(T);
p.applyMatrix4(modelMatrix);

// 不执行renderer.render(scene, camera);情况下测试
mesh.position.set(2,3,4);
mesh.updateMatrix();//更新矩阵，.matrix会变化
console.log('本地矩阵',mesh.matrix);
mesh.scale.set(6,6,6);
mesh.updateMatrix();
console.log('本地矩阵',mesh.matrix);
mesh.position.set(2,3,4);
mesh.scale.set(6,6,6);
mesh.updateMatrix();
console.log('本地矩阵',mesh.matrix);

console.log('本地坐标',mesh.position);
const worldPosition = new THREE.Vector3();
mesh.getWorldPosition(worldPosition)
console.log('世界坐标',worldPosition);

const scene = new THREE.Scene();
mesh.position.set(2,3,4);
const group = new THREE.Group();
group.position.set(2,3,4);
group.add(mesh);
scene.add(group);

// render渲染时候，会获取模型`.position`等属性更新计算模型矩阵值
renderer.render(scene, camera);

console.log('本地矩阵',mesh.matrix);
console.log('世界矩阵',mesh.matrixWorld);