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

因为工作需要,要看threejs editor的源码,顺便记录过程。

github下载的源码目录是这样的

但是editor和其他文件夹内的内容的关联的,我需要将其独立出来并且编辑editor。

进入editor,three.js-master\editor,打开index.html,从源码可以看出来,里面引用了上级目录的一些.js文件。

所以,要独立出来,就把../examples/js文件夹下的所有内容拷贝到three.js-master\editor\js目录下。然后把index.html中的“../examples/js”全部替换为“js”,步骤是:"ctrl+F"-->"Find All" ,这样就全部选中了,然后全部替换为“js”

这样,这个editor文件夹就从threejs master中独立出来了。


 

 下面来看看index.html,有人会好奇,这里面没有写人任何样式和布局。其实<link href="css/main.css" rel="stylesheet" /><link id="theme" href="css/light.css" rel="stylesheet" />

<link rel="stylesheet" href="js/libs/codemirror/codemirror.css">
<link rel="stylesheet" href="js/libs/codemirror/theme/monokai.css">

<link rel="stylesheet" href="js/libs/codemirror/addon/dialog.css">
<link rel="stylesheet" href="js/libs/codemirror/addon/show-hint.css">
<link rel="stylesheet" href="js/libs/codemirror/addon/tern.css">

<script src="js/libs/ui.js"></script>
<script src="js/libs/ui.three.js"></script>
<!--菜单栏的设计-->
<script src="js/Editor.js"></script>
<script src="js/Config.js"></script> <script src="js/History.js"&
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
"pan.baidu.com\ webgl three.js入门与实战" 是一个涉及到网页图形技术 WebGL 和三维图形库 three.js 的学习和实践教程。 首先,WebGL 是一种基于 HTML5 的图形引擎,允许在网页中实现高性能的图形渲染。通过使用 WebGL,开发者可以在浏览器中创建出具有逼真效果和交互性的三维图形。因此,学习 Webgl 可以帮助我们理解如何构建出精美的图形界面。 而 three.js 是一种基于 WebGL 的开源 JavaScript 3D 渲染库,为开发者提供了简化创建和渲染三维图形的方法和功能。它提供了丰富的内置函数和类,使得开发者可以轻松地创建出复杂的场景、模型和动画。因此,学习和掌握 Three.js 可以让我们更高效地开发出出色的 WebGL 三维图形项目。 "pan.baidu.com\webgl three.js入门与实战" 这个教程可能包含以下内容:介绍 WebGL 技术的基础知识和概念,如绘制图形的渲染管线、顶点着色器和片元着色器等。同时,它也会介绍如何使用 Three.js 库来简化代码的编写,实现鼠标交互、相机控制和灯光效果等。 在实战部分,教程可能会提供一些具体的案例和项目,让学习者通过实际动手操作来加深对 WebGLThree.js 的理解和掌握。这些实战项目可能包括创建一个简单的三维场景、导入和展示三维模型、实现纹理贴图和光照效果等。 总的来说,"pan.baidu.com\webgl three.js入门与实战" 是一个为初学者提供学习和实践 WebGLThree.js 技术的教程。通过学习这个教程,我们可以掌握 WebGL 技术的基础知识和概念,并且学会使用 Three.js 库来创建出精美的三维图形网页。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值