three.js 专题第一点物体的rotation的旋转属性是相对与该物体的本身坐标系而言的，物体的rotation就

wagner的作用已经被three集成

参看D:\npmwork\three.js-master\examples\js中的shaders和postprocessing文件夹

关于提示找不到OrbitControls

OrbitControls已经从新版three.js中剥离，需要单独引入

添加场景背景，或vr背景

固定背景： scene.background = new THREE.TextureLoader().load( url );
vr背景： scene.background = new THREE.CubeTextureLoader().load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
vr背景中由六个图拼成一个六边型，相机处于这个六边形的中心，

矩阵详解

www.opengl-tutorial.org/beginners-t…

镜头控制

//OrbitControls
var controls = new THREE.OrbitControls( camera );

辅助线

var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

球体图片

球体图片应该是比例2：1的图片，不然会造成图像失真下边这个库中有太阳系行星的素材

github.com/jeromeetien…

让对象以指定轴(非xyz轴)旋转

skybox.rotation.x/y/z 是球体绕自身圆形旋转

threejs.org/docs/index.…

@.rotateOnAxis

www.cnblogs.com/mimime/p/61…

@.setRotationFromEuler

blog.csdn.net/birdflyto20…

threejs.org/docs/index.…

第一点物体的rotation的旋转属性是相对与该物体的本身坐标系而言的，物体的rotation就是Euler欧拉角，但是会存在万向节死锁的问题。

第二点 three.js中提供了相关的方法rotateOnAxis(axis,angle),该方法需要注意的是angle是相对于物体之前状态的旋转角度，也就是增加角度；另外一点需要注意的是axis参数向量是相对物体本身坐标系的，且为单位向量,通过调用.normalize()得到单位向量；rotateOnAxis方法其实也就是调用Quaternion对象的setFromAxisAngle方法

第三点构建旋转矩阵，方法有：1、makeRotationAxis(axis,angle)方法生成绕任意轴转angle弧度的旋转矩阵 2、new THREE.Matrix4().makeBasis(axisX, axisY, axisZ).setPosition(point)；构建矩阵之后将物体的quaternion应用setFromRotationMatrix

How to rotate a 3D object on axis three.js?

引用：

www.javascriptcn.com/read-28339.…

CommunityTony Han提出了一个问题：How to rotate a 3D object on axis three.js?，或许与您遇到的问题类似。

回答者PeterCory Gross给出了该问题的处理方式：

Here are the two functions I use. They are based on matrix rotations. and can rotate around arbitrary axes. To rotate using the world’s axes you would want to use the second function rotateAroundWorldAxis().

// Rotate an object around an arbitrary axis in object space
var rotObjectMatrix;
function rotateAroundObjectAxis(object, axis, radians) {
    rotObjectMatrix = new THREE.Matrix4();
    rotObjectMatrix.makeRotationAxis(axis.normalize(), radians);

    // old code for Three.JS pre r54:
    // object.matrix.multiplySelf(rotObjectMatrix);      // post-multiply
    // new code for Three.JS r55+:
    object.matrix.multiply(rotObjectMatrix);

    // old code for Three.js pre r49:
    // object.rotation.getRotationFromMatrix(object.matrix, object.scale);
    // old code for Three.js r50-r58:
    // object.rotation.setEulerFromRotationMatrix(object.matrix);
    // new code for Three.js r59+:
    object.rotation.setFromRotationMatrix(object.matrix);
}

var rotWorldMatrix;
// Rotate an object around an arbitrary axis in world space       
function rotateAroundWorldAxis(object, axis, radians) {
    rotWorldMatrix = new THREE.Matrix4();
    rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);

    // old code for Three.JS pre r54:
    //  rotWorldMatrix.multiply(object.matrix);
    // new code for Three.JS r55+:
    rotWorldMatrix.multiply(object.matrix);                // pre-multiply

    object.matrix = rotWorldMatrix;

    // old code for Three.js pre r49:
    // object.rotation.getRotationFromMatrix(object.matrix, object.scale);
    // old code for Three.js pre r59:
    // object.rotation.setEulerFromRotationMatrix(object.matrix);
    // code for r59+:
    object.rotation.setFromRotationMatrix(object.matrix);
}

So you should call these functions within your anim function (requestAnimFrame callback), resulting in a rotation of 90 degrees on the x-axis:

var xAxis = new THREE.Vector3(1,0,0);
rotateAroundWorldAxis(mesh, xAxis, Math.PI / 180);

点击互动

//向点击方向发射镭射光，返回接触的对象
var raycaster = new Raycaster(); 
var mouse = new THREE.Vector3(); 
window.addEventListener("click", (e) => {
mouse.set(
	(e.clientX / window.innerWidth)*2- 1,
	-(e.clientY / window.innerHeight)*2+ 1, 
	50
);

raycaster.setFromCamera( mouse, camera );
let a= raycaster.intersectObject( ground, true );
console.log(a);
});

three图片虚化

wow.techbrood.com/fiddle/2567…

three.js 专题