下包
npm i three
引入
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
调用方法(有部分数据要存在data里)
createThree() {
// 初始化场景
this.scene = new THREE.Scene();
// 初始化相机
this.camera = new THREE.PerspectiveCamera(
90,
document.body.clientWidth / document.body.clientHeight,
0.1,
100
);
this.camera.position.set(0, 0, 0.1);
// 初始化渲染器
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize(window.innerWidth, window.innerHeight);
document
.getElementById("container")
.appendChild(this.renderer.domElement);
// 镜头控制器
var controls = new OrbitControls(this.camera, this.renderer.domElement);
// //添加3D物体
// 用立方体实现
// this.useBox();
// 用全景图实现
this.useSphere();
// 调用启动渲染帧;
this.loop();
},
loop() {
requestAnimationFrame(this.loop);
this.renderer.render(this.scene, this.camera);
},
useBox() {
var materials = [];
var texture_left = new THREE.TextureLoader().load(
require("../assets/scene_left.png")
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_left }));
var texture_right = new THREE.TextureLoader().load(
require("../assets/scene_right.png")
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_right }));
var texture_top = new THREE.TextureLoader().load(
require("../assets/scene_top.png")
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_top }));
var texture_bottom = new THREE.TextureLoader().load(
require("../assets/scene_bottom.png")
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_bottom }));
var texture_front = new THREE.TextureLoader().load(
require("../assets/scene_front.png")
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_front }));
var texture_back = new THREE.TextureLoader().load(
require("../assets/scene_back.png")
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_back }));
var box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), materials);
// 用线框模式大家可以看得清楚是个立方体而不是矩形
box.material.wireframe = true;
this.scene.add(box);
// 把图片翻转
box.geometry.scale(1, 1, -1);
// 设置相机位置
this.camera.position.set(0, 0, 0.01);
},
useSphere() {
let sphereGeometry = new THREE.SphereGeometry(1, 50, 50);
let texture = new THREE.TextureLoader().load(
require("../assets/scene.jpeg")
);
let sphereMaterial = new THREE.MeshBasicMaterial({ map: texture });
let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// sphere.material.wireframe = true;
this.scene.add(sphere);
sphere.geometry.scale(1, 1, -1);
this.camera.position.set(0, 0, 0.01);
},
可以用两种方法:立方体(6张图)和球体(全景图)
都是把图贴到物体上,再把图片翻转,把相机移到物体中间即可。