基础用法

几何体Geometry

创建一个立方体

THREE.BoxGeometry(100,100,100)

创建了一个长宽高都是100的立方体

 

材质Material

创建了一个可以用于立方体的材质对象

THREE.MeshLambertMaterial({color:0x0000ff})

 

光照Light

创建一个点光源，意思就是从某个方向拿个手电筒照着

var point=new THREE.PointLight(0xffffff);
point.position.set(100,200,300);//点光源位置   X,Y,Z
scene.add(point);//点光源添加到场景中

创建一个环境光，意思就是房间内整体的亮度

var ambient=new THREE.AmbientLight(0x444444);
 scene.add(ambient);

 

相机Camera

camera = new THREE.PerspectiveCamera( 110, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 300, 1000 ); //设置相机位置

camera.lookAt(scene.position);  //设置相机方向(指向的场景对象)

 

网格模型进行三种维度的旋转

rotateX，rotateY , rotateZ,参数为弧度

 

网格模型进行平移

使用网格模型对象的方法translateY()可以把球体网格模型沿着y轴进行平移， 方法translateX()、translateZ()表示其它两个轴方向上的平移

translateX、translateY、translateZ

 

执行动画的方法

requestAnimationFrame(myfun)

一般默认保持60FPS的频率，大约每16.7ms调用一次equestAnimationFrame()方法指定的函数

 

三维座标系

AxesHelper

红线是X轴，绿线是Y轴，蓝线是Z轴

var axes = new THREE.AxisHelper(30);   //参数是线轴的大小
scene.add(axes);

网格辅助线

GridHelper( size : number, divisions : Number, colorCenterLine : Color, colorGrid : Color )
size -- 网格宽度，默认为 10. 
divisions -- 等分数，默认为 10. 
colorCenterLine -- 中心线颜色，默认 0x444444 
colorGrid --  网格线颜色，默认为 0x888888

var gridHelper = new THREE.GridHelper( 100, 30, 0x2C2C2C, 0x888888 );
scene.add(gridHelper);

 

鼠标操作三维场景

import { OrbitControls } from '/three.js/three.js-master/examples/jsm/controls/OrbitControls.js';

        controls = new OrbitControls( camera, renderer.domElement );
        controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
        controls.dampingFactor = 0.1;
        controls.screenSpacePanning = false;
        controls.minDistance = 10;
        controls.maxDistance =600;
        controls.maxPolarAngle = Math.PI;

function render() {
    renderer.render(scene,camera);//执行渲染操作
}
controls.addEventListener('change', render);//监听鼠标、键盘事件

或者第二种写法

function render() {
    renderer.render(scene,camera);//执行渲染操作
    requestAnimationFrame(render);//请求再次执行渲染函数render
}
render();
var controls = new THREE.OrbitControls(camera);//创建控件对象

模型操作:

• 缩放：滚动—鼠标中键
• 平移：拖动—鼠标右键
• 旋转：拖动—鼠标左键