临平做网站电话,五一网站个人空间,WordPress如何设置seo关键词,开发一个app最少需要多少钱1.实现效果 2. 实现步骤
2.1创建场景
const scene new THREE.Scene();
2.2添加相机
说明#xff1a;
fov#xff08;视场角#xff09;#xff1a;视场角决定了相机的视野范围#xff0c;即相机可以看到的角度范围。较大的视场角表示更广阔的视野#xff0c;但可能…1.实现效果 2. 实现步骤
2.1创建场景
const scene new THREE.Scene();
2.2添加相机
说明
fov视场角视场角决定了相机的视野范围即相机可以看到的角度范围。较大的视场角表示更广阔的视野但可能会导致失真。一般建议设置在 45° 到 90° 之间。aspect纵横比纵横比表示了渲染区域的宽度和高度之比。通常设置为渲染区域的宽度除以高度以保持图像不变形。near近裁剪面近裁剪面决定了相机能够看到的最近的物体的距离。通常设置为一个正数表示相机距离近裁剪面的距离。far远裁剪面远裁剪面决定了相机能够看到的最远的物体的距离。通常设置为一个正数表示相机距离远裁剪面的距离。
const camera new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
2.3添加网格
说明创建几何图形和图形的材质几何图形必须要材质。下面创建了矩阵图形。
const textureMaterial new THREE.MeshBasicMaterial({map: texture});
const geometry new THREE.PlaneGeometry(1, 1);
mesh new THREE.Mesh(geometry, textureMaterial);
2.4渲染动画
const renderer new THREE.WebGLRenderer({antialias: false});
renderer.setSize(width, height);
2.5放入Dom结构 document.querySelector(#renderBox).appendChild(renderer.domElement);
3.源代码
templatediv idrenderBox/div
/templatescript setup
import * as THREE from three;
import {onMounted} from vue;
// 浏览器可操作的宽度高度
const width window.innerWidth, height window.innerHeight;const camera new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z 1;
const scene new THREE.Scene();
const geometry new THREE.PlaneGeometry(1, 1);
let mesh;
const textureLoader new THREE.TextureLoader().load(/data/map/scene-bg2.png,function (texture) {// 纹理加载完成后创建材质,map:texture实际就是贴在上面的const textureMaterial new THREE.MeshBasicMaterial({map: texture});// 创建一个网格对象mesh new THREE.Mesh(geometry, textureMaterial);// 将网格对象添加到场景中scene.add(mesh);}
);
const renderer new THREE.WebGLRenderer({antialias: false});
renderer.setSize(width, height);
renderer.setAnimationLoop(animation);function animation(time) {if (mesh) {// 每一帧增加网格对象的旋转角度实现 360 度旋转效果mesh.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0.02);}// 渲染图形renderer.render(scene, camera);}const init () {document.querySelector(#renderBox).appendChild(renderer.domElement);
}onMounted(() {init()
})
/scriptstyle/style4.素材图片
