webGL之three.js入门1
开场白
最近开始学前端,看了极客学院的前端教学视频,其实有C++或者java基础的人学前端还是很快的。但是html的标签和CSS的样式还是得多code才能熟练,熟能生巧,学以致用。
还在看js,因为有Java的基础,所以直接跳到了DOM,正好这几天要加入一个webGL的项目,就开始学习three.js了,当然echart也要看,不知道得看多久,心累,好多。
今天写了第一个three.js,写个随笔就当是开始了,以后写学习笔记了,因为组长也要求我每日提交日报,也算是督促我学习了。
three.js源码下载地址:https://github.com/mrdoob/three.js/
下载之后解压到你的js项目的目录里面,按理来说写网页的时候,把three.js下载到本地,直接引入就行了:
<script type="text/javascript" src="D:\FronteEnd\FrontEndSrc\JiKe\three.js-dev\build\three.js">
</script>;
然而在chrome浏览器里面调试(F12)的时候,发现结果是这样的:
Not allowed to load local resource: file:///D/FronteEnd/FrontEndSrc/JiKe/three.js-dev
我又直接引入了github的地址:
<script type="text/javascript" src="https://github.com/mrdoob/three.js/tree/dev/build/three.js">
</script>;
结果显示:
Refused to execute script from 'https://github.com/mrdoob/three.js/tree/dev/build/three.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled
最后我就直接把three.js放在了根目录下面,嵌入:
<script type="text/javascript" src="three.js">
</script>;

然后就ok了,显示了版本信息。

网上有人说chrome不允许引入本地文件,firefox嵌入本地地址或者github地址就没问题。
这只是开始,加油!
更新………………
在网上看到了很多chrome浏览器不能加载本地js/css的相关问题,今天问了一个好人师兄,才发现不是浏览器的问题。路径错了。刚开始我是这样写的

结果是这样:

其实这个路径的意思就是在src路径下找js/three.js,那肯定找不到了。
把路径定位到上一个目录:
<script src="../js/three.js"></script>
这样就ok了,这个路径的意思是在JiKe下面找js/three.js。

希望能帮到遇到同样困难的同学。
webGL之three.js入门1的更多相关文章
- webGL之three.js入门3--材料篇
这几天在看李鹏程翻译的[美]Jos Dirksen的<Three.js开发指南>,看到第八章了,现在来总结一下threejs中材料的相关知识.顺带也看完了上海交大的张雯莉出的<thr ...
- webGL之three.js入门2
入门建议: webGL中文翻译教程,基于NeHe的openGL教程:http://www.hiwebgl.com/?p=42 . WebGL中文网 http://www.hewebgl.com/ ,里 ...
- webGL之three.js入门4--ThreeJS Editor入门篇
因为工作需要,要看threejs editor的源码,顺便记录过程. github下载的源码目录是这样的 但是editor和其他文件夹内的内容的关联的,我需要将其独立出来并且编辑editor. 进入e ...
- Web3D编程入门总结——WebGL与Three.js基础介绍
/*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...
- Three.js入门篇(一)创建一个场景
上一面讲述了向场景中添加物体对象.这一篇准备把每个功能点细细的讲述一遍,一方面是为了加深自己的理解.另一方面希望能够 帮助到有需要的人. 一.在学习WEBGL的时候,你应该先了解要创建一个WebGL程 ...
- Three.js入门详解
什么是WebGL WebGL(Web 图形库)是一种 JavaScript API,用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形,而无需使用插件.WebGL 通过引入一个与 ...
- 《Three.js 入门指南》3.0 - 代码构建的最基本结构。
3.0 代码构建的最基本结构 说明: 我们必需首先知道,Three.js 的一些入门级概念: 我们需要知道,OpenGL 是一套三维实现的标准,为什么说是标准,因为它是跨平台,跨语言的.甚至CAD以及 ...
- 《Three.js 入门指南》0 - 说明
本笔记,摘自:<Three.js 入门指南>一书 地址链接为:https://www.ituring.com.cn/book/miniarticle/58552 本书的前言摘录: 本书结构 ...
- 1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
随机推荐
- Java中的国际化
一.什么是国际化? 国际化是指应用程序运行时,可根据客户端请求来自的国家/地区.语言的不同而显示不同的界面. 二.Java如何实现国际化? Java程序的国际化思路是将程序中的标签.提示等信息放在资源 ...
- CSS使用方法
CSS行内样式: 在开始标签内添加style样式属性 如:<p style="color:red;">内容</p> CSS内部样式: 内部样式(嵌入样式), ...
- nginx防盗链、nginx访问控制、nginx解析php相关配制、nginx代理
1.nginx防盗链编辑:vim /usr/local/nginx/conf/vhost/test.com.conf写入: location ~* ^.+\.(gif|jpg|png|swf|flv| ...
- PTA——判断胖瘦
PTA 7-40 到底是不是太胖了 #include<stdio.h> #include<math.h> int main() { ,N; scanf("%d&quo ...
- Django---模版层
---https://www.cnblogs.com/liuqingzheng/articles/9509806.html 一.处理浏览器转义字符串的两种方式 1.{{ str|safe }} 2.在 ...
- 实验吧—Web——WP之 上传绕过
我们先上传一个png文件,发现他说必须上传后缀名为PHP的文件才可以,那么,我们尝试一下,PHP文件 但是他又说不被允许的文件类型 在上传绕过里最有名的的就是00截断,那么我们就先要抓包 在这里我们需 ...
- 【liunx】Linux下的压缩和解压缩命令——jar
原文链接:http://blog.chinaunix.net/uid-692788-id-2681136.html JAR包是Java中所特有一种压缩文档,其实大家就可以把它理解为.zip包.当然也是 ...
- 24 正则表达式 re模块
一.正则表达式 1.字符组 ① [abc] 匹配a或b或c ② [a-z] 匹配a到z之间的所有字⺟ [0-9]匹配所有阿拉伯数字 2.元字符 3.量词 4.重要搭配 ① .*? ② .*?x ...
- 【转存】Vue组件选项props
原帖地址 前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 ...
- shiro学习笔记
一.概念: shiro是apache旗下一个开源框架,它将软件系统的安全认证相关的功能抽取出来,实现用户身份认证.权限授权.加密.会话管理等功能,组成了一个通用的安全认证框架. (一)shiro的功能 ...