threejs怎么用（第一次使用可参考）

最新推荐文章于 2024-06-02 16:31:37 发布
最新推荐文章于 2024-06-02 16:31:37 发布
阅读量3.2k 收藏 15
点赞数 3
文章标签： three.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/joker4o/article/details/112979156
版权

1，前言
本文章主要针对于前端不怎么会的玩家第一次使用threejs
2，正文
①源代码在哪；首先，官网上都是html，如果不是玩前端的同学，可能最后连源代码都找不到在哪里，按一下f12，这个地方就是源码了，对于不经常玩前端的人员，可能会找半天源代码。。。。在这里插入图片描述

②threejs是啥；就是一个包，引入之后就可以用里面的东西去做网页3d效果了，所以只要能创建web项目，引入就用就行了，就不会像u3d那些还要搭建环境，我就直接用的idea写的。新版idea是直接创建JavaScript项目就行了，老版本的是staticweb项目。
在这里插入图片描述

这里面的东西挺适合入门的
http://www.webgl3d.cn/Three.js/
③怎么引入；
把threejs包下载下来，在项目里建一个javascript工程,建个文件夹放进去就好了。
在这里插入图片描述

<script src="src/js/three.js"></script>
直接就这样随便写在<body 里面就行了
引入之后，点开html按下f12如果报这个错，很明显，那就是路径写错了
在这里插入图片描述

END；玩后端的，前端都忘了，长路漫漫。。

joker4o
关注
  • 3
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
ThreeJs官方案例源码
07-20
ThreeJs官方案例源码
Three.js使用指南（入门版）
西装暴徒_12138的博客
06-05 1290
Three.js 是一个用于在 Web 浏览器中创建和渲染 3D 图形的 JavaScript 库。它提供了一系列强大的功能和工具，使开发者能够轻松地在网页中创建交互式的 3D 场景和动画。本指南将详细介绍如何开始使用 Three.js，并提供一些常见的用法示例和技巧。
three.js指南
最新发布
Frankabcdefgh的博客
06-02 602
Three.js经常会和WebGL混淆， 但也并不总是，three.js其实是使用WebGL来绘制三维效果的。WebGL是一个只能画点、线和三角形的非常底层的系统. 想要用WebGL来做一些实用的东西通常需要大量的代码， 这就是Three.js的用武之地。还有其他的方法可以加载three.js，但是自r106开始，使用模块是最推荐的方式。会是一个更推荐的方案。画布的宽度是高度的两倍，所以水平视角会比我们设置的垂直视角75度要大。对于three.js这意味着它需要你把所有的实例的库放在正确的文件夹结构中。
threejs的使用
Coco_998的博客
04-20 2876
threeJs的简单使用
Three.js第1篇，Three.js新手教学，如何使用Three.js（three.js使用流程详细，three.js的使用方式，three.js创建3d物体）
weixin_65793170的博客
03-27 3073
Three.js封装了WebGL的底层细节，是一款运行在浏览器中的 3D 引擎，可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象，目前在Git上已经拥有90k+的star。
three.js的基础和使用
qq_51011357的博客
12-11 1446
一般来说，你项目用到那个扩展库，就引入那个，用不到就不需要引入。
three.js的基本使用
m0_37751401的博客
09-14 1583
three.js在html中的使用
threejs学习第一课：了解threejs的基本概念
04-01
#### 一、Three.js简介 Three.js是一款强大的JavaScript库，它封装了WebGL技术，使得开发者能够更容易地创建和展示3D图形内容。WebGL是一种用于渲染交互式2D和3D图形的标准API，无需任何插件即可在网页浏览器中运行...
tweenjs动画库配合ThreeJS使用DEMO
12-09
在本文中，我们将深入探讨如何将TweenJS动画库与Three.js结合使用，通过一个实际的DEMO来展示这种结合的应用。TweenJS是一个轻量级的JavaScript库，它提供了平滑的缓动效果，用于对象属性的过渡动画。而Three.js则是...
ThreeJS使用Curve曲线让物体沿轨迹运动DEMO
12-09
本示例"ThreeJS使用Curve曲线让物体沿轨迹运动DEMO"探讨了如何利用Three.js中的Curve类来创建自定义的路径，并使物体沿着这条路径移动。 首先，让我们理解什么是Curve。在Three.js中，Curve是定义二维空间中路径的...
threejs 局部泛光、局部发光使用
08-01
threejs 场景内有局部是发光体 其余是不发光体 这种情况下可以使用局部泛光解决 用到bloom 适用场景挺多得 两个小球 一个发光 一个不发光 逻辑清晰明了 工业场景 室内场景大多会遇到 能制作出一些酷炫得效果 结合...
使用threejs渲染工厂模型源码
08-27
在本文中，我们将深入探讨如何使用Three.js库来渲染工厂模型源码，特别是涉及加载OBJ+MTL格式的3D模型。Three.js是基于WebGL的JavaScript库，它为开发者提供了一个简单易用的接口来创建和展示3D对象在网页上。在描述...
idea 插件
three_stand的博客
03-13 120
Alibaba Java Coding Guidelines 代码规范 Easy Code 生成mybatis 配置 dao service imp controler文件等 lombok 生成get set方法 Rainbow Brackets彩虹颜色的括号好对照 ，查找对应关系 Translation 翻译插件 中英文翻译 支持 百度 google 有道 GsonFormat 根据...
十分钟快速实战Three.js
主要领域：前端开发
11-23 9069
前言 本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。 学习 我们会使用Three.js简单做一个立方体，为了大家更能宏观的了解Three.js。我将会分解成代码段（模块）来进行开发。 模块如下： 场景对象 网格模型 光源 相机 渲染器对象 渲染操作 1. 创建html文件 首先，我们得创建一个html文件，这样才有地方开发。创建完成后，我们可以引入Three.js文件，今天，它
Three.js使用详解
qq_59456579的博客
05-25 786
Three.js是一款强大的JavaScript 3D渲染引擎，可以用于创建各种3D场景、动画和交互应用。其中，GLTFLoader是一种加载GLTF格式模型的加载器，参数分别为模型文件路径、加载完成回调、加载进度回调、加载错误回调。其中，PerspectiveCamera是一种透视摄像机，可以模拟人眼视角，参数分别为视角、宽高比、近裁剪面、远裁剪面。其中，requestAnimationFrame是浏览器提供的一种动画循环方法，用于实现流畅的动画效果。以上就是Three.js的所有用法的详细介绍。
『Three.js』入门教程
热门推荐
ReturnTmp的博客
10-28 2万+
目的：方便模块化进行three.js项目的学习和开发Building a web app with Parcel | Parcel 中文网。
threejs基本使用方法
伪成年的博客
03-23 1578
1、基本使用案例 import * as THREE from "three"; //有些功能需要单独引入，如下： //1、轨道控制器，可以使得相机围绕目标进行轨道运动。 import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'; //2、第一人称控制器 import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonContro
Threejs入门之一:本地运行
九仞山的专栏
04-01 2723
ThreeJS本地运行方法
一个使用three.js的vue项目参考
03-29
以下是一个使用three.js的vue项目参考： 1. 创建一个vue项目并安装three.js： ``` vue create myproject cd myproject npm install three --save ``` 2. 在App.vue中引入three.js： ``` <template> <div id="app"> <canvas id="canvas"></canvas> </div> </template> <script> import * as THREE from 'three' export default { name: 'App', mounted() { const canvas = document.getElementById('canvas') const renderer = new THREE.WebGLRenderer({canvas}) const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000) camera.position.z = 5 const scene = new THREE.Scene() const geometry = new THREE.BoxGeometry() const material = new THREE.MeshBasicMaterial({color: 0x00ff00}) const cube = new THREE.Mesh(geometry, material) scene.add(cube) function animate() { requestAnimationFrame(animate) cube.rotation.x += 0.01 cube.rotation.y += 0.01 renderer.render(scene, camera) } animate() } } </script> ``` 3. 运行项目： ``` npm run serve ``` 4. 打开浏览器访问 http://localhost:8080/ ，可以看到一个旋转的绿色立方体。 以上就是一个简单的使用three.js的vue项目参考。通过这个项目，你可以了解到如何在vue项目中引入three.js，并创建一个简单的场景。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值