vue+three加载天空盒

最新推荐文章于 2024-05-11 21:58:37 发布

少年包青菜

最新推荐文章于 2024-05-11 21:58:37 发布

阅读量381

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_50884068/article/details/129133671

版权

<template>
  <div>
  </div>
</template>

<script setup>
import {onMounted} from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import posx from '../assets/posx.jpg'
import negx from '../assets/negx.jpg'
import posy from '../assets/posy.jpg'
import negy from '../assets/negy.jpg'
import posz from '../assets/posz.jpg'
import negz from '../assets/negz.jpg'

// 场景
const scene=new THREE.Scene()
// 相机
const camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
camera.position.y=30
camera.position.z=30
camera.lookAt(scene.position)
// 渲染器
const renderer=new THREE.WebGL1Renderer()
renderer.setSize(window.innerWidth,window.innerHeight)
renderer.render( scene, camera );
document.body.appendChild(renderer.domElement)
// 控制器
const controls=new OrbitControls(camera,renderer.domElement)
// 坐标轴
const axes=new THREE.AxesHelper(50)
scene.add(axes)
// 光照
const pointLight = new THREE.DirectionalLight(0xffffff);
scene.add(pointLight);

// 天空盒
{
  let skyboxCubemap = new THREE.CubeTextureLoader().load([posx, negx, posy, negy, posz, negz]);
  let skyboxShader = THREE.ShaderLib['cube'];
  skyboxShader.uniforms['tCube'].value = skyboxCubemap;
  scene.add(
      new THREE.Mesh(
          new THREE.BoxGeometry(10000, 10000, 10000),
          new THREE.ShaderMaterial({
            fragmentShader: skyboxShader.fragmentShader,
            vertexShader: skyboxShader.vertexShader,
            uniforms: skyboxShader.uniforms,
            depthWrite: false,
            side: THREE.BackSide
          })
      )
  )
}
// 地面
{
  const planeSize = 40;
  const loader = new THREE.TextureLoader();
  const texture = loader.load('https://threejs.org/manual/examples/resources/images/checker.png');
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.magFilter = THREE.NearestFilter;
  const repeats = planeSize / 2;
  texture.repeat.set(repeats, repeats);
  const planeGeo = new THREE.PlaneGeometry(80, 80);
  const planeMat = new THREE.MeshPhongMaterial({
    map: texture,
    side: THREE.DoubleSide,
  });
  const mesh = new THREE.Mesh(planeGeo, planeMat);
  mesh.rotation.x = Math.PI * -.5;
  scene.add(mesh);
}
const init=()=>{
  controls.update()
  requestAnimationFrame(init)
  renderer.render( scene, camera );
}
onMounted(()=>{
  init()
})
</script>

<style scoped>

</style>