基本概念

1.场景

const scene = new THREE.Scene()

2.相机

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,0.1,1000) scence.add(camera)

构造器

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

fov — 摄像机视锥体垂直视野角度 aspect — 摄像机视锥体长宽比 near — 摄像机视锥体近端面 far — 摄像机视锥体远端面

3.轨道控制器

const controls = new OrbitControls(camera,render.domElement)

JavaScript

const controls = new OrbitControls(camera,render.domElement) //可以设置阻尼,添加惯性效果,必须在动画循环里面调用update() controls.enableDamping = true

function animate() {

requestAnimationFrame( animate );//浏览器自带 请求动画帧 方法

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

renderer.render( scene, camera );

}

const controls = new OrbitControls(camera,render.domElement)

//可以设置阻尼,添加惯性效果,必须在动画循环里面调用update()

controls.enableDamping = true

function animate() {

requestAnimationFrame( animate );//浏览器自带 请求动画帧 方法

// required if controls.enableDamping or controls.autoRotate are set to true

controls.update();

renderer.render( scene, camera );

}

4.渲染函数

const render = new THREE.WebGLRender() render.setSize(window.innerWidth,window.innerHeight)

doucument.body.appendChild(render.domElement)

坐标轴辅助工具

JavaScript

运行代码

//添加坐标辅助器 const axesHelper = new THREE.AxesHelper(5); scene.add(axesHelper)

//添加坐标辅助器

const axesHelper = new THREE.AxesHelper(5);

scene.add(axesHelper)