uniapp如何使用three.js实现3D效果

在uniapp中集成three.js时遇到了一些问题，想请教大家：如何在uniapp项目中正确引入和使用three.js来实现3D效果？我尝试直接npm安装three.js后在页面中引入，但运行时总是报错。是否需要特殊配置webpack或者使用特定的three.js版本？另外，在uniapp的vue文件中应该如何编写three.js的初始化代码？能否提供一个简单的完整示例，包括场景、相机和立方体的创建流程？

2 回复

在uni-app中使用three.js实现3D效果，步骤如下：

  1. 安装依赖
    在项目根目录执行：
    npm install three

  2. 引入three.js
    在vue页面中导入：

    import * as THREE from 'three'

  3. 创建3D场景
    在mounted中初始化：

    const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer({ alpha: true })
renderer.setSize(window.innerWidth, window.innerHeight)
this.$refs.canvas.appendChild(renderer.domElement)

  4. 添加3D物体

    const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)
camera.position.z = 5

  5. 动画循环

    function animate() {
  requestAnimationFrame(animate)
  cube.rotation.x += 0.01
  cube.rotation.y += 0.01
  renderer.render(scene, camera)
}
animate()

注意事项：

  • 需在pages.json中配置页面样式为"navigationStyle": "custom"
  • 建议使用uni.createSelectorQuery()获取节点尺寸
  • 移动端注意性能优化，避免复杂模型

通过以上步骤即可在uni-app中实现基础3D效果，可根据需求扩展灯光、材质等特性。


在 UniApp 中使用 Three.js 实现 3D 效果，可以通过 WebView 组件或 Canvas 组件实现。以下是两种方法的简要说明和示例代码：

方法一：使用 WebView 组件（推荐，兼容性好）

  1. 创建 H5 页面：在 UniApp 项目中创建一个 H5 页面（如 three.html），并在其中引入 Three.js 库。
  2. 编写 Three.js 代码：在 H5 页面中初始化 Three.js 场景、相机、渲染器等。
  3. 通过 WebView 加载：在 UniApp 页面中使用 <web-view> 组件加载该 H5 页面。

示例代码：

  1. H5 页面（three.html）：
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        camera.position.z = 5;

        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>
  1. UniApp 页面：
<template>
    <view>
        <web-view src="/static/three.html"></web-view>
    </view>
</template>

方法二：使用 Canvas 组件（适用于部分平台）

  1. 在 UniApp 中创建 Canvas：使用 <canvas> 组件并设置 canvas-id。
  2. 通过 JavaScript 操作 Canvas：通过 uni.createSelectorQuery() 获取 Canvas 节点，并在其中初始化 Three.js。

示例代码：

<template>
    <view>
        <canvas canvas-id="threeCanvas" style="width: 100%; height: 100vh;"></canvas>
    </view>
</template>

<script>
export default {
    mounted() {
        const query = uni.createSelectorQuery().in(this);
        query.select('#threeCanvas').node((res) => {
            const canvas = res.node;
            const { Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, MeshBasicMaterial, Mesh } = require('three');

            const scene = new Scene();
            const camera = new PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000);
            const renderer = new WebGLRenderer({ canvas: canvas });
            renderer.setSize(canvas.width, canvas.height);

            const geometry = new BoxGeometry();
            const material = new MeshBasicMaterial({ color: 0x00ff00 });
            const cube = new Mesh(geometry, material);
            scene.add(cube);
            camera.position.z = 5;

            function animate() {
                requestAnimationFrame(animate);
                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;
                renderer.render(scene, camera);
            }
            animate();
        }).exec();
    }
}
</script>

注意事项：

  • 平台兼容性：WebView 方法兼容性更好，Canvas 方法可能在某些平台（如小程序）受限。
  • 性能优化：复杂 3D 场景需注意性能，避免内存泄漏。
  • 资源加载：Three.js 依赖的模型或纹理需通过 UniApp 的静态资源管理。

以上方法可帮助你在 UniApp 中快速集成 Three.js 实现 3D 效果。

回到顶部