//新建一个相机 var width = window.innerWidth; //窗口宽度 var height = window.innerHeight; //窗口高度 var k = width / height; //窗口宽高比 var s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大 //创建相机对象 var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); camera.position.set(200, 300, 200); //设置相机位置 camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
//新建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height);//设置渲染区域尺寸 renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
持续执行渲染器
requestAnimationFrame()
1 2 3 4 5 6 7 8 9 10 11 12 13
functionrender() {
let T1 = newDate();
let t = T1 - T0; T0 = T1; renderer.render(scene, camera);//执行渲染操作
//长方体 参数:长,宽,高 var geometry = new THREE.BoxGeometry(100, 100, 100); // 球体 参数:半径60 经纬度细分数40,40 var geometry = new THREE.SphereGeometry(60, 40, 40); // 圆柱 参数:圆柱面顶部、底部直径50,50 高度100 圆周分段数 var geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 ); // 正八面体 var geometry = new THREE.OctahedronGeometry(50); // 正十二面体 var geometry = new THREE.DodecahedronGeometry(50); // 正二十面体 var geometry = new THREE.IcosahedronGeometry(50);
材质设定
THREE.MeshLambertMaterial(color: 0x0000ff)
这个一般是对生成的物体模型的材质进行定义
1 2 3 4 5
var material = new THREE.MeshLambertMaterial({ color: 0x0000ff }); //材质对象Material var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh scene.add(mesh); //网格模型添加到场景中
attribute(属性)
color 颜色
opacity 介于 0~1 透明度设定
transparent 是否开启透明度
wireframe 线框
高光效果,表示光照下的反射、漫反射、镜面反射等,都是光学原理,不懂,不常用,记一下
specular: 0x4488ee,
shininess: 12
辅助坐标
THREE.AxisHelper()
1 2
var axisHelper = new THREE.AxisHelper(350); scene.add(axisHelper)