wagner的作用已经被three集成

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

关于提示找不到OrbitControls

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

添加场景背景，或vr背景

1. 固定背景： scene.background = new THREE.TextureLoader().load( url );
2. 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-multiplyobject.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…

无限管道

www.9iweb.com.cn/effects/res…