Threejs3D看房思路教学

最新推荐文章于 2024-01-11 17:51:14 发布

海上彼尚

最新推荐文章于 2024-01-11 17:51:14 发布

阅读量121

点赞数 1

分类专栏： Three.js 文章标签： 3d

本文链接：https://blog.csdn.net/weixin_63443072/article/details/134122437

版权

Three.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 初始屏幕大小
const innerSize = {
  width: innerWidth,
  height: innerHeight
}

// 初始化基本对象
const initObj = () => {
  const { width, height } = innerSize
  const obj = {
    scene: new THREE.Scene(),
    camera: new THREE.PerspectiveCamera(55, width / height, 1, 1000),
    renderer: new THREE.WebGLRenderer()
  }
  obj.camera.position.set(10, 0, 0)
  obj.camera.lookAt(0, 0, 0)
  obj.renderer.setSize(width, height)
  obj.renderer.render(obj.scene, obj.camera)
  document.body.appendChild(obj.renderer.domElement)
  return obj
}
// 创建以及渲染场景
const createMesh = (url, scene) => {
  // 创建三维球体
  const geometry = new THREE.SphereGeometry(500, 60, 40)
  geometry.scale(-1, 1, 1)
  // 创建纹理加载器
  const texture = new THREE.TextureLoader().load(url)
  // 基础网格材质
  const material = new THREE.MeshBasicMaterial({
    map: texture, // 颜色贴图
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)
  return mesh
}

// 初始化
const obj = initObj()
// 创建物体
const mesh1 = createMesh('/home.jpg', obj.scene)
// 相机轨道控制器
const controls = new OrbitControls(obj.camera, obj.renderer.domElement)
controls.enableDamping = true // 惯性
controls.enablePan = false // 静止平移
controls.maxDistance = 12 // 缩放限制
controls.minPolarAngle = Math.PI / 2;
controls.maxPolarAngle = Math.PI / 2;

// 空间坐标系
// const axesHelper = new THREE.AxesHelper(20) // 红色是x 蓝色是z 绿色是y
// obj.scene.add(axesHelper)

// 监听页面缩放
window.addEventListener('resize', () => {
  innerSize.width = window.innerWidth
  innerSize.height = window.innerHeight
  obj.renderer.setSize(innerSize.width, innerSize.height)
})

// 渲染
const animationIng = () => {
  obj.renderer.render(obj.scene, obj.camera)
  requestAnimationFrame(animationIng)
}
animationIng()