赞
踩
安装 Threejs
npm i three
效果:
素材截图:
原理:
创建一个正方体 把图贴到6个面,视角进入正方形体内部反转
代码
<template> <div class="container" ref="containerRef"></div> </template> <script setup> import { onMounted, ref } from "vue"; import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 初始化场景 const scene = new THREE.Scene(); // 初始化 透视 相机 参数1 视角 屏幕宽高比 近端 远端 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // 设置相机位置 camera.position.z = 0.1; // 初始化渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); const containerRef = ref(null); const render = () => { renderer.render(scene, camera); requestAnimationFrame(render); }; // 添加立方体 const geometry = new THREE.BoxGeometry(10, 10, 10); // const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // const cube = new THREE.Mesh(geometry, material); // scene.add(cube); let arr = ["4_l", "4_r", "4_u", "4_d", "4_b", "4_f"]; // 左右 上下 前后 let boxMaterials = []; arr.forEach((item) => { // 纹理加载 let texture = new THREE.TextureLoader().load(`./imgs/living/${item}.jpg`); // 创建材质 if (item === "4_u" || item === "4_d") { texture.rotation = Math.PI; //旋转 texture.center = new THREE.Vector2(0.5, 0.5); //设置旋转中心 } boxMaterials.push(new THREE.MeshBasicMaterial({ map: texture })); }); const cube = new THREE.Mesh(geometry, boxMaterials); // 进入盒子内部 修改z轴 cube.geometry.scale(1, 1, -1); scene.add(cube); // 挂载完毕 获取dom onMounted(() => { // 添加控制器 const contros = new OrbitControls(camera, containerRef.value); contros.enableDamping = true; containerRef.value.appendChild(renderer.domElement); render(); }); </script> <style> * { margin: 0; padding: 0; } .container { width: 100vw; height: 100vh; background-color: #f0f0f0; } </style>
效果:
素材截图:
原理:
hdr图是铺开的矩形,类似世界地图,所以我们要创建的不再是正方体,而是球体,然后把图包裹上去,同理需要翻转进入球体内部
代码:
<template> <div class="container" ref="containerRef"></div> </template> <script setup> import { onMounted, ref } from "vue"; import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"; // 加载 hdr需要 // 初始化场景 const scene = new THREE.Scene(); // 初始化 透视 相机 参数1 视角 屏幕宽高比 近端 远端 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // 设置相机位置 camera.position.z = 0.1; // 初始化渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); const containerRef = ref(null); const render = () => { renderer.render(scene, camera); requestAnimationFrame(render); }; // 添加球 const geometry = new THREE.SphereGeometry(5, 32, 32); const loader = new RGBELoader(); loader.load("./imgs/hdr/Living.hdr", (texture) => { const material = new THREE.MeshBasicMaterial({ map: texture }); const sphere = new THREE.Mesh(geometry, material); sphere.geometry.scale(1, 1, -1); // 反转过来 本来是图片包裹在球上的 scene.add(sphere); }); // 挂载完毕 获取dom onMounted(() => { // 添加控制器 const contros = new OrbitControls(camera, containerRef.value); contros.enableDamping = true; containerRef.value.appendChild(renderer.domElement); render(); }); </script> <style> * { margin: 0; padding: 0; } .container { width: 100vw; height: 100vh; background-color: #f0f0f0; } </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。