今天基于threejs，做一个3d看房的场景。
0. 本案例是基于vue，将threejs渲染到div中
<div id="three3d" ref="three3d"></div>
import { ref, onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
const three3d = ref(null);
1. 创建场景
const scene = new THREE.Scene();
2. 创建相机
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.2,
1000
);
camera.position.set(0, 0, 30);
camera.lookAt(0, 0, 0); //坐标原点
3. 创建物体
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("./room6.png"); // 纹理图片路径
// 创建物体
const geometry = new THREE.SphereGeometry(16, 32, 32);
const material = new THREE.MeshBasicMaterial({
map: texture,
side: THREE.BackSide,//在球体内部贴图。
});
geometry.scale(12, 12, 12);//放大12倍 直接进入球体内部
//geometry.scale(12, 12, -12);// 也可在在球体外部贴图，然后放到z轴设置为相反值，
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
4. 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
5. 相机控制器和光照
// 相机控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 添加光照
const ambientLight = new THREE.AmbientLight(0x404040); // 环境光
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
directionalLight.castShadow = true;
directionalLight.position.set(30, 30, 30);
scene.add(directionalLight);
6. 设置帧渲染
const animate = () => {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
};
onMounted(() => {
three3d.value.appendChild(renderer.domElement);
animate();
});
