three.js学习
菜鸟karroy
努力做一名合格的程序猿!加油
展开
-
npm下载的vue-3d-model的学习笔记
Part1build文件夹config文件夹1、你用vue-cli模板构建的vue项目都会有这些文件,属于webpack相关配置;dev.env.js文件是开发环境的变量,npm run dev命令;在build文件下webpack.dev.conf可找到在什么地方引入了此变量;prod.env.js文件是生产环境的变量,npm run build命令;在build文件下webpack....原创 2019-03-20 19:57:37 · 3807 阅读 · 0 评论 -
Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.
three.js:27461 DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded. at THREE.WebGLState.texImage2D (file:///H:/3d_demo/demo6/js/three.js:274...原创 2019-03-13 16:53:18 · 8722 阅读 · 0 评论 -
Expected indentation of 0 spaces but found 4解决办法
原因:项目初始时,默认安装ESLint(ESLint是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码)的原因,关闭ESLint。解决办法:build文件夹中的webpack.base.conf.js中把 ...(config.dev.useEslint ? [createLintingRule()] : []),注释掉即可。module: { rules: ...原创 2019-03-22 10:14:37 · 13716 阅读 · 1 评论 -
threejs使场景中物体有阴影
使场景中物体有阴影1、对renderer设置 this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setSize(window.innerWi...原创 2019-04-02 09:56:32 · 2273 阅读 · 0 评论 -
threejs 骨骼动画(蒙奇动画)
AnimationMixer是场景中特定对象的动画播放器。当场景中的多个对象独立动画时,可以为每个对象使用一个AnimationMixer。 let animations = gltf.animations; self.mixer = new THREE.AnimationMixer(self.model); let idle...原创 2019-04-02 11:05:00 · 2833 阅读 · 0 评论 -
vue使用three.js实现盒子上下左右开关门的效果(进一步优化)
一、vue使用three.js实现开关门1、实现效果使用button按钮来控制开关门。默认是关门状态,当点击“向左/向右/向上/向下开门”按钮时实现某个方向的开门效果,并且不需要点击“关门按钮”就能切换不同方向的开门效果;点击“关门按钮”实现关门的效果。2、实现思路2.1、建立一个盒子模型。(1)定义一个Scene、PerspectiveCamera、WebGLRenderer以及包...原创 2019-06-13 20:54:09 · 2462 阅读 · 0 评论 -
vue使用three.js实现外部加载模型的自动缩放的效果(进一步优化)
一、vue使用three.js加载外部模型自适应渲染区域大小1、实现效果当在http://localhost:8080/#/scale?name=tree2.glb 中name参数中输入不同名字的.glb模型时,都可以自动进行缩放来适用所定义页面的大小。但需要注意的是:模型需要为.glb格式。若不是glb格式,可以通过blender软件进行导入后再导出为glb格式。2、实现思路(1)定...原创 2019-06-13 22:08:13 · 8111 阅读 · 5 评论 -
vue使用three.js实现盒子上下左右开关门的效果
效果图:默认是关闭状态。从每个方向打开后需要关闭后才可以进行其他方向的打开操作。具体实现的步骤:1、新建文件在src中创建views文件夹,在views中创建switch文件夹。在switch中创建components文件夹和index.vue文件,最后在components创建BoxSwitch.vue文件。2、BoxSwitch.vue文件中(1)、加载需要的js文件impor...原创 2019-06-11 22:04:18 · 2564 阅读 · 1 评论 -
vue使用three.js实现外部加载模型的自动缩放的效果
效果图:具体实现的步骤:1、新建文件在src中创建views文件夹,在views中创建scale文件夹。在scale中创建components文件夹和index.vue文件,最后在components创建ModelScale.vue文件。2、BoxSwitch.vue文件中(1)、加载需要的js文件 import * as THREE from 'three' import * a...原创 2019-06-12 10:47:21 · 3327 阅读 · 6 评论