threejs
关注
分享
扫一扫
空谷足音 -จุ
活出自己的世界！(微信18710307060)
展开
-
vue加载three模型成功，但显示黑屏？
遇到问题解决方案：遇到问题：导入到场景内的模型无法查看，而且也没有报错这种会有可能有多种情况造成的，一般情况下都是下面两种情况造成的：1.模型太小或者太大，这种情况可以尝试放大一千倍或者缩小一千倍来查看效果。2. 模型的位置太偏，根本不在相机照射范围内，这种问题我们可以将模型居中到相机照射的焦点位置看获取模型的大小：// 获取模型大小 let box = new TH...原创 2020-04-03 14:16:57 · 5409 阅读 · 0 评论 -
vue项目中怎么引入three以及其它模块？
安装：npm install three -Snpm install import-three-examples -D引用：import * as THREE from 'three'import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'// import { FBXLoader } from 'thr...原创 2020-04-03 14:04:07 · 2332 阅读 · 1 评论 -
Threejs入门3-helloword
1.目录搭建js:存放js逻辑目录libs: threejs类库images:图片index.html入口2. 制作一个旋转的立方体3.代码详解a.index.html引入下载好的threejs类库以及自定义的main.js<!DOCTYPE html><html><head> <title>...原创 2019-01-03 16:33:17 · 462 阅读 · 0 评论 -
Threejs入门4-line(画线)
1.简介在3D世界中：归根结底是点，两点一线，三点一面(不在一条线)，不同的面组成各种各样的物体2. Threejs中定义点var point = new THREE.Vecotr3(x,y,z);这个函数有3个参数，分别代表x坐标，y坐标和z坐标的分量.3.画线效果图：(1).新建line.html<!DOCTYPE html><htm...原创 2019-01-04 11:44:47 · 11984 阅读 · 3 评论 -
Threejs入门5-plane(画面)
1.简介想一想如何在三维坐标系画面？联想到二维平面，同一个平面的多条线形成闭合区间就组成了平面2.右手坐标系在Threejs中，坐标和右边的坐标完全一样。x轴正方向向右，y轴正方向向上，z轴由屏幕从里向外。3.画面效果图：画个坐标系平面，会画坐标系，画简单平面岂不是更简单(几条线交互形成闭合区间)(1).新建grid.html<!DOCTYPE ht...原创 2019-01-04 16:15:46 · 4139 阅读 · 0 评论 -
Threejs入门1-简介
简介Three.js是WebGL的JavaScript 3D库，其对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，成为前端开发者完成3D绘图的得力工具。three.js官方文档 ：threejs.org/three.js中文文档 ： techbrood.com/threejs/doc…Three.js整体认知（附：Three.js功能概览）一、...转载 2019-01-02 16:39:13 · 1604 阅读 · 0 评论 -
Threejs入门2-安装
1. npm 安装a.用npm 安装three npm install threethree.js 安装地址 ： www.npmjs.com/package/thr…安装成功后，在项目中 import three from 'three'; ，之后运行程序。发现控制台报错 default export is not declared in imported module 说明thr...原创 2019-01-02 17:08:52 · 7180 阅读 · 1 评论 -
Threejs入门6-animation(动画)
1.简介要想一个物体动起来？满足什么条件呢？物体移动的同时定时重绘页面。a.定时重绘：setTimeout或者requestAnimationFramerequestAnimationFrame：与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一...原创 2019-01-07 11:23:20 · 8680 阅读 · 4 评论