聊城网站推广,那种软件,厦门正规网站建设公司,建e全景效果图三维坐标系
辅助观察坐标系
THREE.AxesHelper()的参数表示坐标系坐标轴线段尺寸大小#xff0c;你可以根据需要改变尺寸。
// AxesHelper#xff1a;辅助观察的坐标系
const axesHelper new THREE.AxesHelper(150);
scene.add(axesHelper);材质半透明设置
设置材质半透明…三维坐标系
辅助观察坐标系
THREE.AxesHelper()的参数表示坐标系坐标轴线段尺寸大小你可以根据需要改变尺寸。
// AxesHelper辅助观察的坐标系
const axesHelper new THREE.AxesHelper(150);
scene.add(axesHelper);材质半透明设置
设置材质半透明,这样可以看到坐标系的坐标原点。
const material new THREE.MeshBasicMaterial({color: 0x0000ff, //设置材质颜色transparent:true,//开启透明opacity:0.5,//设置透明度
});AxesHelper的xyz轴
three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴对于three.js的3D坐标系默认y轴朝上。
改变相机参数——预览新的渲染效果
相机放在x轴负半轴目标观察点是坐标原点这样相当于相机的视线是沿着x轴正方向只能看到长方体的一个矩形平面。
camera.position.set(-1000, 0, 0);
camera.lookAt(0, 0, 0);// 相机视线沿着x轴负半轴mesh位于相机后面自然看不到
camera.position.set(-1000, 0, 0);
camera.lookAt(-2000, 0, 0);相机far偏小mesh位于far之外物体不会显示在画布上。
const camera new THREE.PerspectiveCamera(30, width / height, 1, 300); 光源对物体表面影响
实际生活中物体表面的明暗效果是会受到光照的影响在threejs中咱们用网格模型Mesh模拟生活中物体所以threejs中模拟光照Light对物体表面的影响就是模拟光照Light对网格模型Mesh表面的影响。
受光照影响材质
threejs提供的网格材质有的受光照影响有的不受光照影响。 基础网格材质MeshBasicMaterial不会受到光照影响。
//MeshBasicMaterial不受光照影响
const material new THREE.MeshBasicMaterial(); 漫反射网格材质MeshLambertMaterial 会受到光照影响该材质也可以称为Lambert网格材质
一个立方体使用MeshLambertMaterial材质不同面和光线夹角不同立方体不同面就会呈现出来不同的明暗效果。
//MeshLambertMaterial受光照影响
const material new THREE.MeshLambertMaterial(); 光源简介 点光源
点光源PointLight 可以类比为一个发光点就像生活中一个灯泡以灯泡为中心向四周发射光线。
//点光源两个参数分别表示光源颜色和光照强度
// 参数10xffffff是纯白光,表示光源颜色
// 参数21.0,表示光照强度可以根据需要调整
const pointLight new THREE.PointLight(0xffffff, 1.0);pointLight.intensity 1.0;//光照强度
点光源辅助观察PointLightHelper
通过点光源辅助观察对象PointLightHelper可视化点光源。预览观察可以借助相机控件OrbitControls旋转缩放三维场景便于预览点光源位置
// 光源辅助观察
const pointLightHelper new THREE.PointLightHelper(pointLight, 10);
scene.add(pointLightHelper);pointLight.position.set(100, 60, 50);
// 改变点光源位置使用OrbitControls辅助观察
pointLight.position.set(-400, -200, -300);光源衰减
随机距离的改变光线会衰减越来越弱光源衰减属性.decay默认值是2.0如果你不希望衰减可以设置为0.0
pointLight.decay 0.0;//设置光源不随距离衰减光源位置
意光源位置尺寸大小如果你希望光源照在模型的外表面那你就需要把光源放在模型的外面。
//点光源位置
pointLight.position.set(0, 100, 0);//点光源放在y轴上光源添加到场景
光源和网格模型Mesh对应一样是三维场景的一部分自然需要添加到三维场景中才能起作用。
scene.add(pointLight); //点光源添加到场景中改变光源位置观察网格模型表面的明暗变化。
pointLight.position.set(400, 200, 300); 环境光设置
环境光AmbientLight没有特定方向只是整体改变场景的光照明暗。
//环境光:没有特定方向整体改变场景的光照明暗
const ambient new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);平行光
平行光DirectionalLight 就是沿着特定方向发射。
// 平行光
const directionalLight new THREE.DirectionalLight(0xffffff, 1);
// 设置光源的方向通过光源position属性和目标指向对象的position属性计算
directionalLight.position.set(80, 100, 50);
// 方向光指向对象网格模型mesh可以不设置默认的位置是0,0,0
directionalLight.target mesh;
scene.add(directionalLight);平行光辅助观察DirectionalLightHelper
通过点光源辅助观察对象DirectionalLightHelper 可视化点光源。
// DirectionalLightHelper可视化平行光
const dirLightHelper new THREE.DirectionalLightHelper(directionalLight, 5,0xff0000);
scene.add(dirLightHelper);平行光与Mesh表面光线反射规律
平行光照射到网格模型Mesh表面光线和模型表面构成一个入射角度入射角度不同对光照的反射能力不同。
光线照射到漫反射网格材质MeshLambertMaterial 对应Mesh表面Mesh表面对光线反射程度与入射角大小有关。 // 对比不同入射角mesh表面对光照的反射效果
directionalLight.position.set(100, 0, 0);
directionalLight.position.set(0, 100, 0);
directionalLight.position.set(100, 100, 100);
directionalLight.position.set(100, 60, 50);
//directionalLight.target默认指向坐标原点相机控件OrbitControls
OrbitControls使用
旋转拖动鼠标左键缩放滚动鼠标中键平移拖动鼠标右键
引入扩展库OrbitControls.js
script typeimportmap{imports: {three: ../../../three.js/build/three.module.js,three/addons/: ../../../three.js/examples/jsm/}}
/script// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from three/addons/controls/OrbitControls.js;使用OrbitControls
// 设置相机控件轨道控制器OrbitControls
const controls new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数重新调用渲染器渲染三维场景
controls.addEventListener(change, function () {renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件
OrbitControls本质
OrbitControls本质上就是改变相机的参数比如相机的位置属性改变相机位置也可以改变相机拍照场景中模型的角度实现模型的360度旋转预览效果改变透视投影相机距离模型的距离就可以改变相机能看到的视野范围。
controls.addEventListener(change, function () {// 浏览器控制台查看相机位置变化console.log(camera.position,camera.position);
});动画渲染循环
请求动画帧window.requestAnimationFrame
// requestAnimationFrame实现周期性循环执行
// requestAnimationFrame默认每秒钟执行60次但不一定能做到要看代码的性能
let i 0;
function render() {i1;console.log(执行次数i);requestAnimationFrame(render);//请求再次执行函数render
}
render();threejs旋转动画
动画说白了就是一张张照片连起来依次展示这样就形成一个动画效果只要帧率高人的眼睛就感觉不到卡顿是连续的视频效果。
const renderer new THREE.WebGLRenderer();
renderer.setSize(width, height);
// renderer.render(scene, camera); //执行渲染操作
document.body.appendChild(renderer.domElement);// 渲染函数
function render() {renderer.render(scene, camera); //执行渲染操作mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度requestAnimationFrame(render);//请求再次执行渲染函数render渲染下一帧
}
render();计算两帧渲染时间间隔和帧率
// 渲染循环
const clock new THREE.Clock();
function render() {const spt clock.getDelta()*1000;//毫秒console.log(两帧渲染时间间隔(毫秒),spt);console.log(帧率FPS,1000/spt);renderer.render(scene, camera); //执行渲染操作mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度requestAnimationFrame(render);//请求再次执行渲染函数render渲染下一帧
}
render();渲染循环和相机控件OrbitControls
设置了渲染循环,相机控件OrbitControls就不用再通过事件change执行renderer.render(scene, camera);毕竟渲染循环一直在执行renderer.render(scene, camera);。
全屏渲染
// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width window.innerWidth; //窗口文档显示区的宽度作为画布宽度
const height window.innerHeight; //窗口文档显示区的高度作为画布高度
const renderer new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);canvas画布宽高度动态变化
// onresize 事件会在窗口被调整大小时发生
window.onresize function () {// 重置渲染器输出画布canvas尺寸renderer.setSize(window.innerWidth, window.innerHeight);// 全屏情况下设置观察范围长宽比aspect为窗口宽高比camera.aspect window.innerWidth / window.innerHeight;// 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix// 但是不会每渲染一帧就通过相机的属性计算投影矩阵(节约计算资源)// 如果相机的一些属性发生了变化需要执行updateProjectionMatrix ()方法更新相机的投影矩阵camera.updateProjectionMatrix();
};
