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);
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>
本文介绍了如何在Vue项目中结合three.js创建一个3D场景，使用WebGLRenderer设置背景图片，以及添加模型和相机控制。作者展示了如何在``中设置背景图像，并在JavaScript中进行渲染和相机设置。
3302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
