上海企业网页制作,seo原创工具,软件开发工程师访谈报告,合肥网站搜索引擎优化前言#xff1a; 自用#xff01;#xff01;#xff01; 文档中描述#xff1a;OrbitControls本质上就是改变相机的参数#xff0c;比如相机的位置属性#xff0c;改变相机位置可以改变相机拍照场景中模型的角度#xff0c;实现模型的360度旋转预览效果#xff0c;改…前言 自用 文档中描述OrbitControls本质上就是改变相机的参数比如相机的位置属性改变相机位置可以改变相机拍照场景中模型的角度实现模型的360度旋转预览效果改变透视投影相机距离模型的距离就可以改变相机能看到的视野范围。
controls.addEventListener(change,function(){//浏览器控制台查看相机位置变化console.log(camera.position)
})
代码 function create3D()函数
function create3D() {//创建3D场景const scene new THREE.Scene();//创建一个长方体几何对象Geometryconst geometry new THREE.BoxGeometry(100, 100, 100);//创建一个网络基础材质的材质对象Material (基础网络材质不会收到光照影响)const material new THREE.MeshBasicMaterial({color: 0xff0000, //设置材质颜色transparent: true, //开启通明opacity: 0.5,});//创建网络模型 ---- 两个参数分别为“几何体”“材质”const mesh new THREE.Mesh(geometry, material);//定义网络模型在三维场景中的位置mesh.position.set(0, 0, 0);//将网络模型添加至三维场景中scene.add(mesh);//定义相机渲染输出的画布尺寸const width 800;const height 500;//创建一个透视摄影相机const camera new THREE.PerspectiveCamera(30, width / height, 1, 3000);//定义相机的位置camera.position.set(300, 300, 300);//相机观察的目标位置 ---- 可以是坐标点也可以是指定物体的位置camera.lookAt(mesh.position);//创建渲染器对象const renderer new THREE.WebGLRenderer();//设置画布尺寸renderer.setSize(width, height);//渲染器渲染方法 生成一个画布并把三维场景呈现在画布上renderer.render(scene, camera);//renderer.domElement获取到方法render()生成的画布dom.appendChild(renderer.domElement);// 设置相机控件轨道控制器OrbitControlsconst controls new OrbitControls(camera, renderer.domElement);// 如果OrbitControls改变了相机参数重新调用渲染器渲染三维场景controls.addEventListener(change, function () {// console.log(camera.position)renderer.render(scene, camera); //执行渲染操作}); //监听鼠标、键盘事件 three.js ---- 动画渲染循环 threejs可以借助HTML5的API请求动画帧 window.requestAnimationFrame 实现动画渲染
动画本质就是一张张照片连起来依次展示这样就形成一个动画效果只要帧率高人的眼睛就感觉不到卡顿是连续的视频效果
设置了渲染循环相机控件OrbitControls就不用再通过事件change执行renderer.render(scene,camera),因为渲染循环一直在执行renderer.render(scene,camera) function create3D() {//创建3D场景const scene new THREE.Scene();//创建一个长方体几何对象Geometryconst geometry new THREE.BoxGeometry(100, 100, 100);//创建一个网络基础材质的材质对象Material (基础网络材质不会收到光照影响)const material new THREE.MeshBasicMaterial({color: 0xff0000, //设置材质颜色transparent: true, //开启通明opacity: 0.5,});//创建网络模型 ---- 两个参数分别为“几何体”“材质”const mesh new THREE.Mesh(geometry, material);//定义网络模型在三维场景中的位置mesh.position.set(0, 0, 0);//将网络模型添加至三维场景中scene.add(mesh);//定义相机渲染输出的画布尺寸const width 800;const height 500;//创建一个透视摄影相机const camera new THREE.PerspectiveCamera(30, width / height, 1, 3000);//定义相机的位置camera.position.set(300, 300, 300);//相机观察的目标位置 ---- 可以是坐标点也可以是指定物体的位置camera.lookAt(mesh.position);//创建渲染器对象const renderer new THREE.WebGLRenderer();//设置画布尺寸renderer.setSize(width, height);//renderer.domElement获取到方法render()生成的画布dom.appendChild(renderer.domElement);// 设置相机控件轨道控制器OrbitControlsconst controls new OrbitControls(camera, renderer.domElement);function render() {//渲染器渲染方法 生成一个画布并把三维场景呈现在画布上renderer.render(scene, camera);mesh.rotateY(0.01); //每次绕y轴旋转0.01requestAnimationFrame(render);}render();}
