ThreeJs使用教程

最新推荐文章于 2025-09-16 10:18:26 发布

原创

最新推荐文章于 2025-09-16 10:18:26 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html

本文介绍了如何使用Three.js在浏览器中创建3D场景，包括设置相机、光源、场景和渲染器，以及添加OrbitControls和DragControls实现交互。示例代码展示了如何安装Three.js库，创建和配置3D元素，以及处理鼠标事件进行对象选择和拖拽操作。

简介

Three.js 是一款运行在浏览器中的3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。three.js，一个WebGL引擎，基于JavaScript，可直接运行GPU驱动游戏与图形驱动应用于浏览器。其库提供大量特性与API以绘制3D场景于浏览器。

安装依赖

yarn add three@0.142.0

页面使用

<template>
    <div class="three-box">
        <div
            ref="points"
            id="points"
            class="points-box"
        >
        </div>
    </div>
</template>

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { DragControls } from 'three/examples/jsm/controls/DragControls'; // 拖拽控件
import { TransformControls } from 'three/examples/jsm/controls/TransformControls'; // 可视化平移控件
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js'; // CSS3D
export default {
    components: {},
    props: {},
    data() {
        return {
            container: null, //容器
            camera: null, //相机
            scene: null, //场景
            renderer: null, //渲染器
            controls: null, //控制器
            cameraTarget: null, //相机方向
            width: null,
            height: null,
            lineGroup: null, // Target实线组
            LineSegmentsGroup: null, // Base虚线组
            PointsGroup: null, // Distance端点组
            top: -100,
            left: -100,
            name: '',
            targetX: null,
            targetY: null,
        };
    },
    mounted() {
        this.$nextTick(() => {
            this._initData();
            this.animate();
        });
    },
    beforeDestroy() {},
    methods: {
        _initData() {
            this.container = document.createElement('div');

            this.$refs.points.appendChild(this.co