在vue 中使用 Three.js 一

最新推荐文章于 2024-06-26 11:46:16 发布
最新推荐文章于 2024-06-26 11:46:16 发布
阅读量295 收藏
点赞数
分类专栏： three.js 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45341411/article/details/126536542
版权

我的环境是 vue2+vue-cli脚手架+yarn

yarn add three@0.139.0    我使用的是r139版本   

github版本库 https://github.com/mrdoob/three.js/releases

我没有在main.js 中引入  而是自己新建了一个 文件夹  在该文件夹下的js文件中引入

 在该文件中引入 three.js

 在这个文件中执行渲染3D模型的操作

荒泷一斗-
关注
专栏目录
vue3-threejs
03-07
VUE 3 + THREE.JS
vue3 threejs
qq_36564433的博客
06-07 334
ts three
2024最新three.js在vue中的使用（保姆级手把手教程）
最新发布
qq_51649346的博客
06-26 1280
Three.js 是一个跨浏览器的脚本，使用 JavaScript 函数库或 API 来在网页浏览器中创建和展示动画的三维计算机图形。写这篇文章也是因为目前越来越多的3dweb出现，three.js使用的频率也越来越高，自己也是边学习边记录，所以打算开一个关于three的专栏，谈不上经验分享，一起学习一起进步，与君共勉!
vue中使用Three.js
qq_37312180的博客
06-12 783
【代码】vue中使用Three.js。
three.js 实现简单立方体
刘振兴的博客
10-23 1886
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个three.js文件_WebGL三维场景</title> <style> body { marg
在vue中使用three.js
fackyoufack的博客
10-10 9177
下面我会介绍three.js的基础写法，和在vue中写入three.js的写法。three在vue中使用的时候，用到纹理图片、模型加载不出来的时候的解决办法，在下面会具体体现出来。
Vue3 + Three.js 商城可视化实战
04-06
1. **3D商品组件**：每个商品可以用一个Vue组件表示，组件内部使用Three.js创建和管理3D模型。 2. **交互事件**：Vue3的生命周期钩子和监听器可以与Three.js的事件处理相结合，实现用户与3D模型的交互，如点击、...
基于vue3，three.js,3D智慧园区
11-09
**Three.js**: Three.js是一个强大的JavaScript库，用于在Web浏览器中创建和展示3D对象。它简化了WebGL的使用，提供了一个面向对象的接口，用于创建场景、几何体、材质、光源等。在“3D智慧园区”项目中，Three.js被...
Vue使用Three.js加载glTF模型的方法详解
10-15
Vue结合Three.js加载glTF模型的方法详解主要介绍的是如何在Vue项目中使用Three.js这个三维图形库加载glTF格式的模型。Three.js是一个JavaScript库，它简化了WebGL的使用，使得开发者可以更容易地在网页中创建和展示...
vue使用three.js引入外部obj，mtl模型.zip
05-31
在Vue.js应用中集成Three.js库来加载外部的3D模型，如.obj和.mtl文件，是一种常见的增强网页3D视觉效果的方法。Three.js是一个强大的JavaScript库，它为WebGL提供了一个简单易用的接口，使得在浏览器中创建复杂的3D...
vue页面引入three.js实现3d动画场景操作
10-14
至此，你已经具备了在Vue中使用Three.js的基础。你可以继续添加更多的3D对象、灯光、纹理和复杂的动画，以创造出更丰富的3D场景。 补充知识：Three.js官方文档（中文版）提供了详细的API介绍和示例，包括相机、几何...
vue-threejs：Three.js的Vue绑定
02-06
vue-threejs [WIP] 绑定 从迁移 演示： ， // import VueThreejs from 'vue-threejs' // below 0.2.0 import * as VueThreejs from 'vue-threejs' // >= 0.2.0 Vue . use ( VueThreejs ) < template> < renderer xss=removed> < scene> < camera xss=removed></ camera
vue中使用three.js
旧忆时光的博客
08-19 4424
<template> <div id="container"></div> </template> <script> import * as THREE from 'three'; let scene, mesh; export default { name: 'test', data() { return { camera: '', //创建相机 renderer: '', //创建渲染器
vue3中使用three.js
weixin_45943355的博客
03-27 2259
在vite项目下，静态资源放在public目录下，特别是经过压缩过的glb模型文件，要使用three的draco去解码，在官方的例子里，一些代码放在跟例子一个js目录里，安装的three.js里没有自带，所有需要复制到public里调用。注意：在package.json中查看他们的版本，如果版本不一致的话，可能导致ts不能识别three这个模块。现在vue3的项目中，大部分是vite+vue3+typescript+pinia的技术栈。一些three的插件在examples/jsm的目录下。
在vue中使用threejs
weixin_40856652的博客
06-27 5305
记录在vue中使用threejs步骤
VUE3.0集成Threejs
书读百遍，其义自见
10-29 1095
package.json加入依赖 yarn add three 或者 npm install three vue.config.js 加入配置 const ThreeExamples = require('three') module.exports = { ...ThreeExamples } } 组件引用 import * as THREE from 'three'; import {OrbitControls} from 'three/examples/jsm/controls/Or
Vue使用Three.js创建三维场景（入门）
likc的博客
12-31 1605
环境：Vue.js，Vuetify ①依赖：在index.html引入Three.js相关文件 ②准备场景容器 ③编写初始化代码 const container = document.getElementById('container') // 场景 const scene = new THREE.Scene() // 相机 const camera = new THREE.PerspectiveCamera(45,...
Vue-Threejs学习
lifei799的博客
12-16 835
Threejs学习 最近在学习threejs，探索3D开发，主要记录一下学习的过程及遇到的问题，以后续查看，目前主要涉及的也就几个知识点，纹理贴图、2D标签、挖洞、简单动画（开关门）、引入Etharts图表，还未涉及到其它知识点。 最新效果图2020-12-16 前端代码 import { remoteCallAjaxService } from '@/assets/baseJs/ajaxservice' import { transtoTree, isNull } from '@/asse
vue 使用 threejs 加载第三方模型
大家好，我是+V
04-18 1759
第三方模型我们可以去一些第三方网站下载，也可以自己制作，从第三方网站下载的话有一个通病，我相信我不说也知道，那就是收费。给大家推荐一个网站，叫做Sketchfab，在里面我们可以下载一些需要的模型，当然，有收费的，但是免费的也不少，自己玩的话够用了。
在vue中使用three.js vr 全景图
07-29
在Vue中使用Three.js VR全景图，你可以按照以下步骤进行： 1. 首先，确保你已经安装了Vue和Three.js的依赖包。你可以使用npm或yarn来安装它们。 2. 在Vue的组件中，导入Three.js所需的库和组件： ```javascript import * as THREE from 'three'; import { VRButton } from 'three/examples/jsm/webxr/VRButton.js'; ``` 3. 创建一个Vue组件，并在其中定义一个方法来初始化Three.js场景： ```javascript export default { mounted() { this.initScene(); }, methods: { initScene() { // 创建场景 const scene = new THREE.Scene(); // 创建相机 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // 创建渲染器 const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 添加VR按钮 document.body.appendChild(VRButton.createButton(renderer)); // 创建全景图 const textureLoader = new THREE.TextureLoader(); const texture = textureLoader.load('path/to/your/panorama-image.jpg'); const sphereGeometry = new THREE.SphereGeometry(500, 60, 40); const sphereMaterial = new THREE.MeshBasicMaterial({ map: texture }); const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.position.set(0, 0, 0); scene.add(sphere); // 更新相机和场景 const animate = () => { requestAnimationFrame(animate); sphere.rotation.y += 0.01; renderer.render(scene, camera); }; animate(); }, }, }; ``` 4. 在Vue模板中使用这个组件： ```html <template> <div id="app"> <canvas id="vr-canvas"></canvas> </div> </template> ``` 这样，你就可以在Vue中使用Three.js VR全景图了。当用户点击VR按钮时，全屏显示全景图，并支持通过移动设备或VR眼镜进行交互。你可以适配不同的全景图、修改相机参数等来满足你的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值