开场白


最近开始学前端,看了极客学院的前端教学视频,其实有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的更多相关文章

  1. webGL之three.js入门3--材料篇

    这几天在看李鹏程翻译的[美]Jos Dirksen的<Three.js开发指南>,看到第八章了,现在来总结一下threejs中材料的相关知识.顺带也看完了上海交大的张雯莉出的<thr ...

  2. webGL之three.js入门2

    入门建议: webGL中文翻译教程,基于NeHe的openGL教程:http://www.hiwebgl.com/?p=42 . WebGL中文网 http://www.hewebgl.com/ ,里 ...

  3. webGL之three.js入门4--ThreeJS Editor入门篇

    因为工作需要,要看threejs editor的源码,顺便记录过程. github下载的源码目录是这样的 但是editor和其他文件夹内的内容的关联的,我需要将其独立出来并且编辑editor. 进入e ...

  4. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  5. Three.js入门篇(一)创建一个场景

    上一面讲述了向场景中添加物体对象.这一篇准备把每个功能点细细的讲述一遍,一方面是为了加深自己的理解.另一方面希望能够 帮助到有需要的人. 一.在学习WEBGL的时候,你应该先了解要创建一个WebGL程 ...

  6. Three.js入门详解

    什么是WebGL   WebGL(Web 图形库)是一种 JavaScript API,用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形,而无需使用插件.WebGL 通过引入一个与 ...

  7. 《Three.js 入门指南》3.0 - 代码构建的最基本结构。

    3.0 代码构建的最基本结构 说明: 我们必需首先知道,Three.js 的一些入门级概念: 我们需要知道,OpenGL 是一套三维实现的标准,为什么说是标准,因为它是跨平台,跨语言的.甚至CAD以及 ...

  8. 《Three.js 入门指南》0 - 说明

    本笔记,摘自:<Three.js 入门指南>一书 地址链接为:https://www.ituring.com.cn/book/miniarticle/58552 本书的前言摘录: 本书结构 ...

  9. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

随机推荐

  1. 2.21 JS处理滚动条

    2.21 JS处理滚动条 前言    selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了.常见场景:当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到 ...

  2. (转载)Peter Norvig:十年学会编程

    作者 Peter Norvig 是计算机科学家,Google 的研究总监.在本文中,Peter Norvig会告诉你:为什么急功近利地学习软件开发技术是没效果滴? ================华丽 ...

  3. VMware网络连接IP设置

    网络配置(仅主机模式) 一.改变虚拟机IP地址达到联网目的 仅主机模式,第一步,打开我的电脑属性,查看VMt1网卡IP设置,设置一个区段:192.168.xx.aa       xx.aa自由设置,简 ...

  4. 10.我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形。 请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法?

    我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形. 请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 是不是发现看不懂,哈哈:编程题就是这样,一定要归纳,手写过程: n ...

  5. input标签(图像域和隐藏域)

    图像域(图像提交按钮): <input type="image" name="..." src="imageurl"  /> 隐 ...

  6. webservice------UDDI SOAP WSDL 之间的关系

    [  真的是服了一些博客.....啰里啰唆的将一堆==   根本不知道讲的是什么 ... 在描述一个定义之前  (不如先通俗的讲它是干什么的)] SOAP(Simple Object Access P ...

  7. Windows下安装Python模块时环境配置

    “Win +R”打开cmd终端,如果直接在里面使用pip命令的时候,要么出现“syntax invalid”,要么出现: 'pip' is not recognized as an internal ...

  8. maven settings.xml配置优化

    <?xml version="1.0" encoding="UTF-8"?> <settings> <localRepositor ...

  9. 【BZOJ1930】【SHOI2003】吃豆豆

    初见杀…… 原题: 两个PACMAN吃豆豆.一开始的时候,PACMAN都在坐标原点的左下方,豆豆都在右上方.PACMAN走到豆豆处就会吃掉它.PACMAN行走的路线很奇怪,只能向右走或者向上走,他们行 ...

  10. JAVA (1)–第一个GUI程序 添加标题 关闭窗口 屏幕位置 导入图标

      import java.awt.*; // 可以改成 import javax.swing.*; public class FirstFrame { public static void main ...