three.js 专题-白红宇

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背景中由六个图拼成一个六边型，相机处于这个六边形的中心，

矩阵详解

镜头控制

//OrbitControlsvar controls = new THREE.OrbitControls( camera );复制代码

辅助线

var axesHelper = new THREE.AxesHelper( 5 );scene.add( axesHelper );复制代码

球体图片

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

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

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

@.rotateOnAxis

@.setRotationFromEuler

第一点物体的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?

引用：

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 spacevar 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);});复制代码