three.js背景用background-image设置

最新推荐文章于 2025-02-20 11:46:06 发布

是云呀！

最新推荐文章于 2025-02-20 11:46:06 发布

阅读量697

点赞数 9

分类专栏： three.js 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/yunbabac/article/details/135472032

版权

three.js 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何在Vue项目中结合three.js创建一个3D场景，使用WebGLRenderer设置背景图片，以及添加模型和相机控制。作者展示了如何在`<template>`中设置背景图像，并在JavaScript中进行渲染和相机设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

three.js背景用background-image设置

预览

在这里插入图片描述

步骤

设置背景
wengl渲染器设置透明

代码

<template>
  <div class="app">
    <div ref="canvesRef" class="canvas-wrap"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

const canvesRef = ref(null);
const canvasWidth = window.innerWidth;
const canvasHeight = window.innerHeight;
let scene;
let camera;
let renderer;
let axesHelper;
let cameraControls;

let mesh;

init();
render();
function init() {
  // 场景
  scene = new THREE.Scene();

  // 相机
  camera = new THREE.PerspectiveCamera(
    45,
    canvasWidth / canvasHeight,
    1,
    10000
  );
  camera.position.set(400, 400, 400);
  camera.lookAt(0, 0, 0);
  // 模型
  addModel();
  // 坐标辅助对象
  axesHelper = new THREE.AxesHelper(200);
  scene.add(axesHelper);

  // 渲染器
  //antialias - 是否执行抗锯齿。默认为false.
  renderer = new THREE.WebGLRenderer({
    alpha: true,
  });
  renderer.setSize(canvasWidth, canvasHeight);
  // 相机轨道控制器
  cameraControls = new OrbitControls(camera, renderer.domElement);
}

function addModel() {
  const g = new THREE.BoxGeometry(50, 200, 50);
  const m = new THREE.MeshBasicMaterial({
    color: 0x00ffff,
  });
  const mesh = new THREE.Mesh(g, m);
  scene.add(mesh);
}
function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
onMounted(() => {
  canvesRef.value.appendChild(renderer.domElement);
});
</script>

<style lang="scss" scoped>
.app {
  position: relative;
  background: url("./assets/img/icon.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>