three.js 学习
import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; /** * 3d 学习 */ export class ThreeStudy { constructor(canvasId) { // 初始测试绘制 // this.one(canvasId); // 正式调试 this.two(canvasId); } one(canvasId) { let width = window.innerWidth; let height = window.innerHeight; let renderer = new THREE.WebGLRenderer({ antialias: true }); let scene = new THREE.Scene(); renderer.setSize(width, height); document.getElementById(canvasId).appendChild(renderer.domElement); renderer.setClearColor(0x000000, 1.0); let camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); camera.position.set(400, 400, 400); camera.up.set(0, 1, 0); camera.lookAt(0, 0, 0); let light = new THREE.AmbientLight(0xFFFFFF); light.position.set(300, 300, 0); scene.add(light); let geometry = new THREE.BoxGeometry(200, 200, 100); let material = new THREE.MeshLambertMaterial({ color: 0xFF0000 }); let mesh = new THREE.Mesh(geometry, material); mesh.position.set(0, 0, 0); scene.add(mesh); renderer.render(scene, camera); } two(canvasId) { let width = window.innerWidth; let height = window.innerHeight; // 创建渲染器 let renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); document.getElementById(canvasId).appendChild(renderer.domElement); renderer.setClearColor(0x000000); // 创建 3d 场景 let scene = new THREE.Scene(); /** * 照相机常用的有两种 * 正投影相机：THREE.OrthographicCamera(left,right,top,bottom,near,far)； * 透视照相机：THREE.PerspectiveCamera( fov, aspect, near, far ) ; */ // let camera = new THREE.OrthographicCamera(-100, 6, 4.5, -4.5, 0, 50); let camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); // 主视图（front 视角） // camera.position.set(0, 0, 200); // 俯视图（top 视角） // camera.position.set(0, 200, 0); // 侧视图（side 视角） // camera.position.set(200, 0, 0); // 3d 视图（主视角） camera.position.set(200, 200, 200); //设置照相机的位置 camera.lookAt(new THREE.Vector3(0, 0, 0)); //设置照相机面向(0,0,0)坐标观察 照相机默认坐标为(0,0,0); 默认面向为沿z轴向里观察; /** * 添加自然光源 * a. 平行光(DirectionalLight)，效果类似太阳光 , DirectionalLight ( color, intensity ) * b. 点光源(PointLight)，效果类似灯泡 , PointLight ( color, intensity, distance, decay ) * c.. 聚光光源(SpotLight)，效果类似聚光灯 , SpotLight ( color, intensity, distance, angle, penumbra, decay ) * color — 光源颜色的RBG数值。 * intensity — 光强的数值。 * distance -- 光强为0处到光源的距离，0表示无穷大。 * decay -- 沿着光照距离的衰退量。 * angle -- 光线散射角度，最大为Math.PI/2。 * penumbra -- 聚光锥的半影衰减百分比。在0和1之间的值。默认为0。 */ let light = new THREE.DirectionalLight(0xffffff, 1, 100); //创建光源 // 光源移动 light.position.set(500, 500, 500); scene.add(light); //在场景中添加光源 /** * DirectionalLightHelper（平行光） * 用于模拟场景中平行光 DirectionalLight 的辅助对象. 其中包含了表示光位置的平面和表示光方向的线段。 * DirectionalLightHelper( light : DirectionalLight, size : Number, color : Hex ) * light-- 被模拟的光源 * size – (可选的) 平面的尺寸. 默认为 1 * color – (可选的) 如果没有设置颜色将使用光源的颜色 * * SpotLightHelper（聚光灯） * 用于模拟聚光灯 SpotLight 的锥形辅助对象 * SpotLightHelper( light : SpotLight, color : Hex ) * light – 被模拟的聚光灯 SpotLight . * color – (可选的) 如果没有赋值辅助对象将使用光源的颜色 * * RectAreaLightHelper（矩形面光源） * 创建一个表示 RectAreaLight 的辅助对象. * RectAreaLightHelper( light : RectAreaLight, color : Hex ) * light – 被模拟的光源. * color – (可选) 如果没有赋值辅助对象将使用光源的颜色。 * * HemisphereLightHelper（半球/户外光源） * 创建一个虚拟的球形网格 Mesh 的辅助对象来模拟 半球形光源 HemisphereLight. * HemisphereLightHelper( light : HemisphereLight, sphereSize : Number, color : Hex ) * light – 被模拟的光源. * size – 用于模拟光源的网格尺寸. * color – (可选的) 如果没有赋值辅助对象将使用光源的颜色. */ /** * 添加物体 new THREE.Mesh(Geometry, Material); Geometry 为物体的形状，Material 为物体的材质； * a. 形状(Geometry) * 1.BoxGeometry--长方体 * 2.CircleGeometry--圆形平面 * 3.CylinderGeometry--圆柱体 * 4.PlaneGeometry--方形平面 * 5.RingGeometry--环形平面 * 6.SphereGeometry--球形 * 7.TextGeometry--文字 * 8.TorusGeometry--圆环 * 9.TubeGeometry--圆管 * 还有根据坐标去生成具体形状的方法，可以借助第三方建模软件建模之后引入，转换为坐标后再生成，就可以做比较复杂的形状了，比如人脸、汽车等等。 * b. 材质(Material) * 材质就像是物体的皮肤，决定物体外表的样子，例如物体的颜色，看起来是否光滑，是否有贴图等等。 * 网格基础材质(MeshBasicMaterial) 该材质不受光照的影响，不需要光源即可显示出来，设置颜色后，各个面都是同一个颜色。 * 网格朗博材质(MeshLambertMaterial) 该材质会受到光照的影响，没有光源时不会显示出来，用于创建表面暗淡，不光亮的物体。漫反射材质 * 网格 Phong 材质(MeshPhongMaterial) 该材质会受到光照的影响，没有光源时不会显示出来，用于创建光亮的物体。镜面反射材质 * 网格法向材质(MeshNormalMaterial) 该材质不受光照的影响，不需要光源即可显示出来，并且每个方向的面的颜色都不同，同但一个方向的面颜色是相同的，该材质一般用于调试。 * MeshDepthMaterial--根据物体上每一点到摄像机的远近来显示颜色，远的显示黑色，近的显示白色 */ // 图片加载异步，render 时设置 setTimeout 延时 render 即可 let box = this.getBox(); box.position.set(20, 20, 20); scene.add(box); // 草地 let num = 5; // 5 * 5 for (let i = 1; i <= num; i++) { for(let j = 1; j <= num; j++) { let grass = this.getGrass(); let k = (num + 1) / 2; grass.position.set((i - k) * 40, -20, (j - k) * 40); scene.add(grass); } } /** * 盒Helper对象，显示包围一个对象的线框盒。 * BoxHelper(object) * object 要包裹的模型 */ // let box = new THREE.BoxHelper( obj ); // scene.add(box); /** * 包围盒Helper对象，用于创建对象和世界轴对齐的包围盒的一个帮助对象。 * BoundingBoxHelper(object, hex) */ // let bbox = new THREE.BoundingBoxHelper(obj, 0xff0000); // scene.add(bbox); /** * 边缘Helper对象，绘制出构成三维模型每个面边缘线信息。 * EdgesHelper(object, color, thresholdAngle) * object（画边界的对象） * color（边界颜色） * thresholdAngle（角的最小值） */ // let edges = new THREE.EdgesHelper( obj, 0x00ff00 ); // scene.add( edges ); /** * 网格辅助线 * GridHelper 本质上是对线模型对象 Line 的封装，纵横交错的直线构成一个矩形网格模型对象。 * GridHelper( size : number, divisions : Number, colorCenterLine : Color, colorGrid : Color ) * size -- 网格宽度，默认为 10. * divisions -- 等分数，默认为 10. * colorCenterLine -- 中心线颜色，默认 0x444444 * colorGrid -- 网格线颜色，默认为 0x888888 * @type {GridHelper} */ let gridHelper = new THREE.GridHelper(200, 10, 0x444444, 0xffffff); scene.add(gridHelper); /** * 三维坐标轴参考线 * AxisHelper(size) * size（轴线长） * @type {AxisHelper} */ let axes = new THREE.AxisHelper(100); scene.add(axes); /** * 箭头Helper对象，功能很简单就是添加一个箭头。 * ArrowHelper( dir, origin, length, color, headLength, headWidth ) * dir（方向向量） * origin（起点） * length（长度） * hex（颜色） * headLength（箭头长度） * headWidth（箭头宽度） */ // let arrowYHelper = new THREE.ArrowHelper(// y 轴 // new THREE.Vector3(0, 10, 0), // new THREE.Vector3(0, 0, 0), // 30, 0x00FF1C, 5, 3); // scene.add(arrowYHelper); // // x 轴 // let arrowXHelper = new THREE.ArrowHelper( // new THREE.Vector3(10, 0, 0), // new THREE.Vector3(0, 0, 0), // 30, 0xFF0000, 5, 3); // scene.add(arrowXHelper); // // z 轴 // let arrowZHelper = new THREE.ArrowHelper( // new THREE.Vector3(0, 0, 10), // new THREE.Vector3(0, 0, 0), // 30, 0x002EFF, 5, 3); // scene.add(arrowZHelper); // 渲染，设置延迟，物料材质贴图，需时间加载 setTimeout(() => { // material.needsUpdate = true; // 可以隐藏，不用通知更新标记了 renderer.render(scene, camera); }, 100); // 添加鼠标操作 let controls = new OrbitControls(camera, renderer.domElement); // 动态阻尼系数 就是鼠标拖拽旋转灵敏度，阻尼越小越灵敏 controls.dampingFactor = 0.5; // 是否可以缩放 controls.enableZoom = true; //是否自动旋转 controls.autoRotate = true; //设置相机距离原点的最近距离 controls.minDistance = 20; //设置相机距离原点的最远距离 controls.maxDistance = 1000; //是否开启右键拖拽 controls.enablePan = true; //上下翻转的最大角度 controls.maxPolarAngle = 3.5; //上下翻转的最小角度 controls.minPolarAngle = 0; // 是否可以旋转 controls.enableRotate = true; controls.addEventListener('change', () => { renderer.render(scene, camera); }); // 用于动画 function rotated () { requestAnimationFrame(rotated); // scene.rotation.y += 0.01; // 世界横向旋转 // box.position.x += 0.3; // 盒子横向移动 box.scale.x += 0.001; // 形变，目前没有固定方向，为双向形变 renderer.render(scene, camera); } console.log(box); rotated(); } /** * 获取盒子 */ getBox() { let geometry = new THREE.BoxGeometry(40, 40, 40); // let geometry = new THREE.SphereBufferGeometry(10, 10, 10); // 球体，方便查看边缘Helper // 测试使用无需光照材质 // let material = new THREE.MeshNormalMaterial(); let material = new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('./assets/box.png') }); // // 物体 return new THREE.Mesh(geometry, material); } /** * 获取草地块 */ getGrass() { let grass; let geometry = new THREE.BoxGeometry(40, 40, 40); let top = new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('./assets/grass-top.png') }); let side = new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('./assets/grass-side.png') }); let bottom = new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('./assets/grass-bottom.png') }); // 物体，左右上下前后 grass = new THREE.Mesh(geometry, [ side, side, top, bottom, side, side ]); return grass; } /** * 设置网格参考线 * 使用 MeshBasicMaterial 无需光源即展示，方便设置坐标 */ setGrid(scene) { // 线条数 let num = 10; // 间距 let step = 20; // 粗细 let width = 0.2; for (let i = 0; i <= num; i++) { let x = i - (num) / 2; // 长度 let len = step * num; // 0,0 原点标线颜色特殊一下 let color = x === 0 ? '#666' : '#fff'; let lineM = new THREE.MeshBasicMaterial({ color: color }); // 纵向线 depth let lineXG = new THREE.BoxGeometry(width, width, len); let lineX = new THREE.Mesh(lineXG, lineM); lineX.position.set(x * step, 0, 0); scene.add(lineX); // 横向线 let lineZG = new THREE.BoxGeometry(step * num, width, width); let lineZ = new THREE.Mesh(lineZG, lineM); lineZ.position.set(0, 0, x * step); scene.add(lineZ); } } }
效果：
