// 导入three
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// 创建场景
const scene = new THREE.Scene()
// 创建相机
// 参数：视野角度，长宽比，近平面，远平面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
// 设置相机位置
// 参数：x轴，y轴，z轴
camera.position.set(0, 0, 5)
// 将相机添加到场景中
scene.add(camera)
// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1)
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(geometry, material)
// 将物体添加到场景中
scene.add(cube)
// 创建渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight)
console.log(renderer)
// 将渲染器添加到页面中
document.body.appendChild(renderer.domElement)
// 创建轨道控制器
// 参数：相机，渲染器dom元素
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true; // 开启阻尼效果
controls.rotateSpeed = 0.5; // 旋转速度
controls.target.set(0, 0, 0); // 查看物体时的中心点
// 添加坐标轴辅助器
// 参数：坐标轴长度
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)
// 使用渲染器，通过相机渲染场景
function animate() {
    requestAnimationFrame( animate ); //帧动画
    controls.update() //更新控制器
    cube.rotation.x += 0.01; //旋转物体
    cube.rotation.y += 0.01; 
    renderer.render( scene, camera ); //渲染
animate();
				
需要电子档书籍或者源码可以Q群：828202939   希望可以和大家一起学习、一起进步！！
如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，博主会及时修改！！！！！
博主的案例并不难，只是为了更好的给想入门threeJS的同学一点点经验！！！！！
本章节学习的内容可以从的官方文档中找到
涉及的知识点博主已经从three源码库里面摘要出来放在对应的注释里面
今天...
				
文章目录一、3D世界的组成二、在Threejs中定义一个点2.1定义一个点2.2 一个栗子----画一条直线三、几何体THREE.Geometry()四、线条的材质THREE.LineBasicMaterial4.1插值五、关于坐标系5.1 世界坐标和本地坐标5.2 AxesHelper三维坐标系
一、3D世界的组成
在计算机中，3d是由点组成，两个点能够组成一条直线，三个不在一条直线上的点就能够组成一个三角形面，无数三角形面就能够组成各种形状的物体。
网格模型：也叫mesh模型，给物体贴上皮肤也叫纹理，那
本篇例举几个常见的，方便理解。以及一些效果
文章目录前言一、AxesHelper二、BoxHelper三、Box3Helper四、CameraHelper五、DirectionalLightHelper六、GridHelper七、PolarGridHelper八、HemisphereLightHelper九、PlaneHelper十、PointLightHelper十一、SpotLightHelper总结
Helper对象.