网站书店建设背景,网站改版方案案例,最好的域名注册网站,网站做维恩图文章中使用到的案例图片都来源于#xff1a;Humus - Textures 里面有很多免费的资源#xff0c;可以直接下载#xff0c;每个资源里面都提供6个不同方位的图片#xff0c;我们通过threejs稍微处理一下#xff0c;就能实现以下3D效果的场景了。
templatediv …文章中使用到的案例图片都来源于Humus - Textures 里面有很多免费的资源可以直接下载每个资源里面都提供6个不同方位的图片我们通过threejs稍微处理一下就能实现以下3D效果的场景了。
templatediv idview-3D/div
/templatescript setup
import { onMounted } from vue;
import * as THREE from three
import { OrbitControls } from three/examples/jsm/controls/OrbitControlsonMounted(() {init()renderScene()
})
// 定义场景
const scene new THREE.Scene()
// 创建一个能看场景的相机
const camare new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
// 定义渲染器
const renderer new THREE.WebGLRenderer()
// 轨道控制器
let orbitControls
const init () {// 给场景设置纹理贴图const texture new THREE.CubeTextureLoader().setPath(/assets/).load([posx.jpg,negx.jpg,posy.jpg,negy.jpg,posz.jpg,negz.jpg])scene.background texture// 设置相机的位置camare.position.set(0, 0, 300)// 设置相机看的方向camare.lookAt(scene.position)// 设置要渲染的场景大小renderer.setSize(window.innerWidth, window.innerHeight)// 把相机添加到场景中scene.add(camare)// 在页面元素上画出元素document.getElementById(view-3D).appendChild(renderer.domElement)// 创建轨道控制器使鼠标前后左右上下方位移动orbitControls new OrbitControls(camare, renderer.domElement)
}
const renderScene () {// 创建动画刷新机制 请求再次执行渲染函数render渲染下一帧requestAnimationFrame(renderScene)// 更新控制器orbitControls.update()// 最后一步渲染场景renderer.render(scene, camare)
}
/script
